【Flutter2】ElevatedButtonとTextButtonのデザイン12種類をまとめて紹介！


Flutter2へのアップデートに伴ってRaisedButtonとFlatButtonが非推奨になりました。その代わりとしてElevatedButtonとTextButtonが推奨になったので、今回はElevatedButtonとTextButtonのデザインをまとめて紹介します。

## 1.背景に色を付ける

![スクリーンショット 2021-04-19 15.01.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/888855/db171672-17f6-938d-a1ed-d1eff2b493af.png)

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

## 2.アイコン付きボタン

![スクリーンショット 2021-04-19 15.02.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/888855/225f8420-aeb9-49a2-7086-9e2e9f144851.png)

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

## 3.非活性のボタン
![スクリーンショット 2021-04-19 15.03.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/888855/2667fb7e-f656-a425-7d58-a683c633e218.png)

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

## 4.横丸ボタン
![スクリーンショット 2021-04-19 15.03.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/888855/f8246431-784a-3539-7aa0-cb29abdad0a7.png)

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

## 5.サイズの大きいボタン
![スクリーンショット 2021-04-19 15.03.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/888855/fd005072-49b2-0eb7-597b-6ff3f9e698f8.png)

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

## 6.影がついているボタン
![スクリーンショット 2021-04-19 15.04.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/888855/0fa8bd7d-2a5b-e88c-e27f-41215649a910.png)

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

## 7.丸いボタン
![スクリーンショット 2021-04-19 15.04.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/888855/fb505fd2-f338-ea5b-0802-431e31dd7bb8.png)

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

## 8.外枠付きのボタン
![スクリーンショット 2021-04-19 15.05.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/888855/200125f2-ec08-eb61-d3cb-3f3d44fbd34b.png)

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

## 9.外枠付きの横丸ボタン
![スクリーンショット 2021-04-19 15.05.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/888855/328cd050-9797-26a5-1bd5-3863c904964c.png)

```dart
     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.文字ボタン
![スクリーンショット 2021-04-19 15.05.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/888855/6c1e2ad0-b3bc-7ec9-3b8e-8565bb051459.png)

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

## 11.外枠付きの文字ボタン
![スクリーンショット 2021-04-19 15.06.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/888855/ed8d0c37-58a1-b87f-3d19-c34cece7c3f9.png)

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

## 12.横丸の文字ボタン
![スクリーンショット 2021-04-19 15.06.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/888855/dec307ad-4f8d-5b5b-0066-492c1a6b0c2d.png)

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