[Flutter] Button types

앱 화면에서 버튼을 추가 하기 위해서는 버튼 위젯을 사용해야 하는데

Flutter에서는 TextButton, ElevatedButton, OutlinedButton, IconButton이 있습니다.

TextButton

TextButton(
  style: TextButton.styleFrom(
    padding: const EdgeInsets.all(16.0),
    primary: Colors.blue,
    textStyle: const TextStyle(fontSize: 20),
  ),
  onPressed: () {},
  child: const Text('TextButton'),
),

TextButton은 Text위젯만 존재합니다.
styleFrom 메서드는 간단한 값에서 텍스트 버튼 ButtonStyle 을 만드는 편리한 방법 입니다.

 

ElevatedButton

ElevatedButton(
  onPressed: () {}, 
  child: const Text('Elevated Button1'),
),
ElevatedButton(
  style: ElevatedButton.styleFrom(
    // Foreground color
    onPrimary: Theme.of(context).colorScheme.onSecondaryContainer,
    // Background color
    primary: Theme.of(context).colorScheme.secondaryContainer,
  ).copyWith(elevation: ButtonStyleButton.allOrNull(0.0)),
  onPressed: () {},
  child: const Text('Elevated Button2'),
),

배경색이 있는 TextButton입니다.

styleFrom 메서드는 간단한 값에서 텍스트 버튼 ButtonStyle 을 만드는 편리한 방법 입니다.

 

OutlinedButton

OutlinedButton(
  onPressed: () {
    debugPrint('Received click');
  },
  child: const Text('Outlined Button'),
)

테두리 윤곽선이 있는 TextButton입니다.

IconButton

아이콘 버튼은 색상으로 채워 터치에 반응 하는 위젯입니다.

만약 아이콘 버튼 주위에 배경을 주고 싶다면 Ink위젯을 사용하여 아이콘 버튼을 만들어야 합니다. 

Ink(
  decoration: const ShapeDecoration(
    color: Color(0xff6750a4),
    shape: CircleBorder(),
  ),
  child: IconButton(
    icon: const Icon(Icons.star),
    color: Colors.white,
    onPressed: () {},
  ),
),

 

Buttons

onPressed 및 onLongPress 콜백이 null 이면 이 버튼이 비활성화되고 터치에 반응하지 않습니다.

 

 

전체 테마로 스타일 적용해보기!

Flutter 에서는 전체 테마를 설정 할 수 있는데

각 버튼에 대해 아래와 같이 테마를 정의할 수 있습니다.

MaterialApp(
  theme: ThemeData.from(colorScheme: ColorScheme.light()).copyWith(
    textButtonTheme: TextButtonThemeData(style: flatButtonStyle),
    elevatedButtonTheme: ElevatedButtonThemeData(style: raisedButtonStyle),
    outlinedButtonTheme: OutlinedButtonThemeData(style: outlineButtonStyle),
    iconTheme: IconThemeData(size: 35.0),
  ),
)

TextButton -> TextButtonTheme

ElevatedButton -> ElevatedButtonTheme

OutlinedButton -> OutlinedButtonTheme

IconButton -> IconTheme

 

Material 3 button types을 사용하고 싶다면 ThemeData에 useMaterial3: true을 적용해주면 된다.

플러터 문서에 따르면 마이그레이션된 모든 구성 요소가 안정적인 상태에 도달한 후 기본적으로 이를 true로 변경한다고 합니다.

 

또한, Material Design 3은 5가지 유형의 버튼을 지정한다고 합니다.

그래서 Flutter는 다음과 같은 버튼 클래스를 사용한다고 나와있네요!

Flutter 공식 문서 Material 3 button types

 

 

[참고]

https://docs.flutter.dev/release/breaking-changes/buttons

https://stackoverflow.com/questions/57288155/flutter-how-to-change-iconbuttons-size-with-theme