Flutter Button

Flutter Button에 대해서 알아보자!

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

New Buttons and Button Themes

The basic material button classes have been replaced.

docs.flutter.dev

Flutter에는 기본적으로 다음과 같은 버튼들이 존재 한다.

TextButton, ElevatedButton, and OutlinedButton

움직이는 동작을 보면 다른 점을 확실히 알수 있을 것이다.

각 버튼들의 속성은 다음과 같이 일치 한다.

style - 버튼의 미니멈사이즈, 색, 패딩, 모양등을 정의

onPressed - 클릭 되었을때 동작

child - 화면에 표현되는 Widget으로 일반적으로 Text, Image, Icon등을 넣는다.

(TextButton에도 Text뿐만이 아닌, Icon, Image등 Widget이 들어갈 수 있다.)

TextButton

우선 TextButton만 간단하게 찝어서 보면 다음과 같이 표현할 수 있다.

클릭되었을때의 액션인 showSnackBar는 Click이벤트를 확인 하기 위해서 넣었다.

TextButton(
    style: ButtonStyle(
      foregroundColor:
          MaterialStateProperty.all<Color>(Colors.blue),
    ),
    onPressed: () {
      ScaffoldMessenger.of(context)
          .showSnackBar(const SnackBar(content: Text('Clicked')));
    },
    child: const Text('TextButton'),
)

ElevatedButton

Button Style을 조금 구체적으로 넣은 예제이다.

테마의 기본컬러, 최소 사이즈, 패딩, 모양의 속성을 주었다.

final ButtonStyle raisedButtonStyle = ElevatedButton.styleFrom(
    onPrimary: Colors.black87,
    primary: Colors.grey[300],
    minimumSize: const Size(88, 36),
    padding: const EdgeInsets.symmetric(horizontal: 16),
    shape: const RoundedRectangleBorder(
      borderRadius: BorderRadius.all(Radius.circular(2)),
    ),
);

ElevatedButton(
    style: raisedButtonStyle,
    onPressed: () {},
    child: Text('ElevatedButton'),
)

OutlinedButton

아래는 특이하게 side라고 하는 속성이 들어갔는데 이는 border를 조금 더 섬세하게 컨트롤 할 수 있는 속성이다.

아래 예제에서는 버튼이 눌렸을때 눌리지 않았을때 border의 두께값에 변화를 주고 있다.

Widget _outLineButton(BuildContext context) {
    final ButtonStyle outlineButtonStyle = OutlinedButton.styleFrom(
      primary: Colors.black87,
      minimumSize: Size(88, 36),
      padding: EdgeInsets.symmetric(horizontal: 16),
      shape: const RoundedRectangleBorder(
        borderRadius: BorderRadius.all(Radius.circular(2)),
      ),
    ).copyWith(
      side: MaterialStateProperty.resolveWith<BorderSide>(
        (Set<MaterialState> states) {
          if (states.contains(MaterialState.pressed))
            return BorderSide(
              color: Theme.of(context).colorScheme.primary,
              width: 1,
            );
          return BorderSide(
            color: Theme.of(context).colorScheme.primary,
            width: 0,
          ); // Defer to the widget's default.
        },
      ),
    );

    return OutlinedButton(
      style: outlineButtonStyle,
      onPressed: () {},
      child: Text('OutlineButton'),
    );
 }

마치며...

일반적으로 어플리케이션을 만들면서 가장 많이 사용하게 되는것이 Button이 아닐까 생각한다. 만들다 보면 GestureDetector를 통해서 Button이 아닌 일반 Widget으로 사용하는 경우도 많겠지만 말이다.

프로그램에게 사용자가 할수 있는 명령의 수단인 버튼에 대해서 잘 알아 두도록 하자!

참고요 전체 소스 이다.

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Main(),
    );
  }
}

class Main extends StatelessWidget {
  Main({Key? key}) : super(key: key);

  final ButtonStyle raisedButtonStyle = ElevatedButton.styleFrom(
    onPrimary: Colors.black87,
    primary: Colors.grey[300],
    minimumSize: Size(88, 36),
    padding: EdgeInsets.symmetric(horizontal: 16),
    shape: const RoundedRectangleBorder(
      borderRadius: BorderRadius.all(Radius.circular(2)),
    ),
  );

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text('Button'),
        ),
        body: SafeArea(
          child: Center(
            child: Row(
              mainAxisSize: MainAxisSize.min,
              children: [
                SizedBox(
                  width: 10,
                ),
                TextButton(
                  style: ButtonStyle(
                    foregroundColor:
                        MaterialStateProperty.all<Color>(Colors.blue),
                  ),
                  onPressed: () {
                    ScaffoldMessenger.of(context)
                        .showSnackBar(const SnackBar(content: Text('Clicked')));
                  },
                  child: const Text('TextButton'),
                ),
                SizedBox(
                  width: 10,
                ),
                ElevatedButton(
                  style: raisedButtonStyle,
                  onPressed: () {},
                  child: Text('ElevatedButton'),
                ),
                SizedBox(
                  width: 10,
                ),
                _outLineButton(context),
                SizedBox(
                  width: 10,
                ),
              ],
            ),
          ),
        ));
  }

  Widget _outLineButton(BuildContext context) {
    final ButtonStyle outlineButtonStyle = OutlinedButton.styleFrom(
      primary: Colors.black87,
      minimumSize: Size(88, 36),
      padding: EdgeInsets.symmetric(horizontal: 16),
      shape: const RoundedRectangleBorder(
        borderRadius: BorderRadius.all(Radius.circular(2)),
      ),
    ).copyWith(
      side: MaterialStateProperty.resolveWith<BorderSide>(
        (Set<MaterialState> states) {
          if (states.contains(MaterialState.pressed))
            return BorderSide(
              color: Theme.of(context).colorScheme.primary,
              width: 1,
            );
          return BorderSide(
            color: Theme.of(context).colorScheme.primary,
            width: 0,
          ); // Defer to the widget's default.
        },
      ),
    );

    return OutlinedButton(
      style: outlineButtonStyle,
      onPressed: () {},
      child: Text('OutlineButton'),
    );
  }
}

MonsterB