【Flutter2】ElevatedButton과 TextButton의 디자인 12종류를 정리해 소개!

Flutter2로 업데이트됨에 따라 RaisedButton과 FlatButton이 더 이상 사용되지 않습니다. 대신 ElevatedButton과 TextButton이 권장되었으므로 이번에는 ElevatedButton과 TextButton의 디자인을 함께 소개합니다.

1. 배경에 색칠하기

     ElevatedButton(
       onPressed: () {},
       child: Text(
         "背景",
       ),
       style: ElevatedButton.styleFrom(
         primary: Colors.red,
       ),

2. 아이콘이 있는 버튼

     ElevatedButton.icon(
       onPressed: () {},
       label: Text('アイコン'),
       icon: Icon(Icons.star),
     ),

3. 비활성 버튼

     ElevatedButton(
       onPressed: null,
       child: Text('押せないボタン'),
     ),

4. 요코마루 버튼

     ElevatedButton(
       onPressed: () {},
       child: Text('横丸ボタン'),
       style: ElevatedButton.styleFrom(
         shape: StadiumBorder(),
       ),
     ),

5. 크기가 큰 버튼

     ElevatedButton(
       onPressed: () {},
       child: Text('大きいボタン'),
       style: ButtonStyle(
         padding: MaterialStateProperty.all(EdgeInsets.all(30)),
         textStyle: MaterialStateProperty.all(TextStyle(fontSize: 25)),
        ),
     ),

6. 그림자가 있는 버튼

     ElevatedButton(
       onPressed: () {},
       child: Text('影付きボタン'),
       style: ElevatedButton.styleFrom(elevation: 10),
     ),

7. 둥근 버튼

     ElevatedButton(
       onPressed: () {},
       child: Text('丸'),
       style: ElevatedButton.styleFrom(shape: CircleBorder()),
     ),

8. 외부 프레임이 있는 버튼

     ElevatedButton(
       onPressed: () {},
       child: Text(
         "外枠",
         style: TextStyle(color: Colors.blue),
       ),
       style: ElevatedButton.styleFrom(
         primary: Colors.white,
         side: BorderSide(
           color: Colors.blue,
           width: 2,
         ),
       ),
     ),

9.외부 테두리가 있는 가로 원 버튼

     ElevatedButton(
       onPressed: () {},
       child: Text(
         "外枠付き横丸",
         style: TextStyle(color: Colors.blue),
       ),
       style: ElevatedButton.styleFrom(
         shape: StadiumBorder(),
         primary: Colors.white,
         side: BorderSide(
           color: Colors.blue,
           width: 2,
         ),
       ),
     ),

10. 문자 버튼

     TextButton(
       onPressed: () {},
       child: Text('文字ボタン'),
       style: ButtonStyle(
         foregroundColor:
             MaterialStateProperty.all<Color>(Colors.blue),
       ),
     ),

11. 외부 프레임이 있는 문자 버튼

     OutlinedButton(
       onPressed: () {},
       child: Text('外枠付き文字ボタン'),
       style: OutlinedButton.styleFrom(
         side: BorderSide(width: 2, color: Colors.blue),
       ),
     ),

12. 요코마루 문자 버튼

     OutlinedButton(
       onPressed: () {},
       child: Text('横丸文字ボタン'),
       style: OutlinedButton.styleFrom(
         shape: StadiumBorder(),
         side: BorderSide(width: 2, color: Colors.blue),
       ),
     ),