【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),
       ),
     ),