Flutter 2.0 - ButtonStyle (feat. Deprecated Buttons)

요번에 2.0으로 넘어오면서 FlatButton, RaisedButton등이 deprecated 되었습니다

 

아직 완전히 사라지지 않아서 사용해도 괜찮지만

 

TextButton과 ElevatedButton의 ButtonStyle부분에 대해 알아두는것도 나쁘지 않을거 같습니다

 

그래서 요번에는 간단한 ButtonStyle 예제를 만들어봤습니다

class ButtonExample extends StatelessWidget {
  final String title;

  ButtonExample(this.title);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(title)),
      body: Center(
        child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              TextButton(
                  style: ButtonStyle(
                      padding: MaterialStateProperty.all<EdgeInsets>(
                          const EdgeInsets.all(20)),
                      elevation: MaterialStateProperty.all<double>(2.0),
                      backgroundColor:
                          MaterialStateProperty.resolveWith((states) {
                        if (states.contains(MaterialState.pressed)) {
                          return Colors.green;
                        } else {
                          return Colors.red;
                        }
                      }),
                      shape: MaterialStateProperty.resolveWith((states) {
                        if (states.contains(MaterialState.pressed)) {
                          return RoundedRectangleBorder(
                              borderRadius: BorderRadius.circular(20));
                        } else {
                          return null;
                        }
                      })),
                  onPressed: () => ScaffoldMessenger.of(context).showSnackBar(
                      SnackBar(content: Text('This is TextButton'))),
                  child: Text('Text button',
                      style: TextStyle(color: Colors.white))),
              ElevatedButton(
                  style: ButtonStyle(
                      backgroundColor:
                          MaterialStateProperty.all<Color>(Colors.blue)),
                  onPressed: () => ScaffoldMessenger.of(context).showSnackBar(
                      SnackBar(content: Text('This is ElevatedButton'))),
                  child: Text('ElevatedButton'))
            ]),
      ),
    );
  }
}

간단한 버튼클릭 예제인데 이전에 사용했었던 RaisedButton이나 Flatbutton과 다르게

 

커스터마이징 할 때 style에서 ButtonStyle을 이용해야됩니다

 

그리고 각 style마다 사용되는 데이터 타입이 MaterialStateProperty이어서

 

간단한 배경화면을 넣을때도 아래 ElevatedButton처럼 사용해줘야됩니다

 

왜 이렇게 만들었나 생각도 해봤는데 예제를 해보면서 이렇게도 사용할 수 있구나 하고 느꼈습니다

 

장점으로는 MaterialState부분에서 pressed이벤트가 발생했을때 혹은 다른 이벤트가 발생했을 때

 

다른 스타일을 적용해줄 수 있다는거 같고

 

단점으로는 간단한 background Color만 주는 형태에서는 굉장한 낭비(?)인거 같습니다

< 엄청난 낭비!? >

추가로 더욱더 간편하게 변경하시려면 stylefrom을 사용하시면 될거 같습니다

TextButton(
                  style: TextButton.styleFrom(),
                  onPressed: () => ScaffoldMessenger.of(context).showSnackBar(
                      SnackBar(content: Text('This is TextButton'))),
                  child: Text('Text button',
                      style: TextStyle(color: Colors.white))),
              ElevatedButton(
                  style: ElevatedButton.styleFrom(),
                  onPressed: () => ScaffoldMessenger.of(context).showSnackBar(
                      SnackBar(content: Text('This is ElevatedButton'))),
                  child: Text('ElevatedButton'))

이런식으로요