내가 보려고 쓰는 Flutter 일기

출처 : https://api.flutter.dev/flutter/material/TextButton-class.html

TextButton

오늘 배워볼 위젯은 TextButton

말그대로 글자 있는 버튼! 텍스트 버튼은 테두리가 보이지 않아서, 다른 내용과 섞이지 않도록 주의해서 배치해야한다.
다른 버튼들과 마찬가지로 onPressed 와 onLongPressed 속성을 null로 두면, 터치에 반응하지 않는 버튼이 된다.

크기 조절은 padding 속성으로 가능하고, 지난번에 배워본 ElevatedButton과 크게 다른 점은 못 느끼겠다. ElevatedButton이 누를 때 조금 더 튀어나온다는 정도?

코드 예시로 알아보자

오늘도 공식 문서의 코드를 가져다가 돌려보고, Style부분만 수정해보았다.

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

/// This is the main application widget.
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  static const String _title = 'Test TextButton';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: Scaffold(
        appBar: AppBar(title: const Text(_title)),
        body: const MyStatelessWidget(),
      ),
    );
  }
}

/// This is the stateless widget that the main application instantiates.
class MyStatelessWidget extends StatelessWidget {
  const MyStatelessWidget({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          TextButton(
            style: TextButton.styleFrom(
              textStyle: const TextStyle(fontSize: 20),
            ),
            onPressed: null,
            child: const Text('Disabled'),
          ),
          const SizedBox(height: 30),
          TextButton(
            style: TextButton.styleFrom(
              textStyle: const TextStyle(fontSize: 20),
            ),
            onPressed: () {},
            child: const Text('Enabled'),
          ),
          const SizedBox(height: 30),
          ClipRRect(
            borderRadius: BorderRadius.circular(4),
            child: Stack(
              children: <Widget>[
                Positioned.fill(
                  child: Container(
                    decoration: const BoxDecoration(
                      gradient: LinearGradient(
                        colors: <Color>[
                          Color(0xFF0D47A1),
                          Color(0xFF1976D2),
                          Color(0xFF42A5F5),
                        ],
                      ),
                    ),
                  ),
                ),
                TextButton(
                  style: TextButton.styleFrom(
                    padding: const EdgeInsets.all(20.0),
                    primary: Colors.white,
                    textStyle: const TextStyle(fontSize: 20),
                  ),
                  onPressed: () {},
                  child: const Text('Gradient'),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

맨 마지막 버튼의 패딩 값만 바꿔보고, 두번째 버튼의 styleFrom에다 아래 두줄을 추가해보았다.

backgroundColor: Colors.redAccent,
primary: Colors.white	//버튼 내부 글자색

padding: const EdgeInsets.all(16.0)	padding: const EdgeInsets.all(20.0)	backgroundColor, primary 속성 추가

두번째 버튼 영역을 색칠해보니 버튼이 굉장히 작은데, TextButton의 실제 영역은 저만큼이다. 버튼 터치 시 InkResponse를 살펴보아도 알 수 있다. 누른 위치에서 반투명한 원이 퍼져나가는데, 버튼 크기만큼만 퍼진다.
세번째 버튼은 다른 위젯으로 감싸주고 padding을 주었기 때문에 저렇게 커보이는 것이다. 두번째 버튼도 padding 속성에 EdgeInsets를 주면 크기를 조절할 수 있다.

2021-07-11 추가 - 버튼 모서리를 둥글게

버튼의 모서리를 둥글게 할 때는 styleFrom의 shape 속성을 설정한다. shape 에는 OutlinedBorder를 받게 되어 있는데, OutlinedBorder는 추상 클래스이므로 인스턴스화가 안 된다. 대신 이를 구현한 클래스인 RoundedRectangleBorder를 사용한다.

style: TextButton.styleFrom(
    shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(20)
),

오늘의 일기는 여기까지!