Flutter 3.3以降 Buttonレイアウト

## Flutterの3.3以降、ElevatedButtonのカスタムオプションで属性が変更されました。
![スクリーンショット 2022-10-06 9.07.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1134006/66a94876-94dc-ffc4-b4c1-df6e9df8ee4c.png)
```dart
ElevatedButton(
  style: ElevatedButton.styleFrom(
    // 以前は primary属性
    backgroundColor: Colors.red,
    // 以前は　　onPrimary属性
    foregroundColor: Colors.white,
  ),
  onPressed: () { },
  child: Text('ElevatedButton with custom foreground/background'),
)
```
`FlatButton` `RaisedButton` `OutlineButton`ウィジェットは廃止され、新しく***TextButton*** ***ElevatedButton*** ***OutlinedButton*** になりましたので、使えそうなボタンをコピペできるようにまとめました。
![スクリーンショット 2022-10-06 9.32.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1134006/6335859d-1fb7-77ae-fc53-b4d389fcd4ee.png)
![スクリーンショット 2022-10-06 9.33.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1134006/43a7a1b2-3475-c054-1160-6ffe62bed073.png)
```dart
ElevatedButton(
                  child: const Text('Button'),
                  style: ElevatedButton.styleFrom(
                    backgroundColor: Colors.blueAccent,
                    foregroundColor: Colors.white,
                  ),
                  onPressed: () {},
                )
```
![スクリーンショット 2022-10-06 9.36.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1134006/5f2fb78f-5302-0a06-e7bd-1ec3fd84ec0a.png)
```dart
ElevatedButton(
                  child: const Text('Button'),
                  style: ElevatedButton.styleFrom(
                    backgroundColor: Colors.blueAccent,
                    foregroundColor: Colors.white,
                    shape: const StadiumBorder(),
                  ),
                  onPressed: () {},
                )
```
![スクリーンショット 2022-10-06 9.38.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1134006/931c58ed-ac4d-5c69-609e-3c92d0c0a682.png)
```dart
OutlinedButton(
                  child: const Text('Button'),
                  style: OutlinedButton.styleFrom(
                    foregroundColor: Colors.black,
                    shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(10),
                    ),
                    side: const BorderSide(color: Colors.blueAccent),
                  ),
                  onPressed: () {},
                )
```
![スクリーンショット 2022-10-06 9.41.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1134006/d974d052-70c6-d918-8b71-0050a2c342c1.png)
```dart
OutlinedButton(
                  child: const Text('Button'),
                  style: OutlinedButton.styleFrom(
                    foregroundColor: Colors.black,
                    shape: const StadiumBorder(),
                    side: const BorderSide(color: Colors.blueAccent),
                  ),
                  onPressed: () {},
                )
```
![スクリーンショット 2022-10-06 9.43.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1134006/3f1f9380-4ad6-1de0-8af2-7254d610af3d.png)
```dart
ElevatedButton(
                  child: const Text('Button'),
                  style: ElevatedButton.styleFrom(
                    backgroundColor: Colors.grey[200],
                    foregroundColor: Colors.blueAccent,
                  ),
                  onPressed: () {},
                )
```
![スクリーンショット 2022-10-06 9.46.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1134006/4e4050fa-eb2f-f7d4-b752-2202349b0da3.png)
```dart
ElevatedButton.icon(
                  icon: const Icon(
                    Icons.star_outline,
                    color: Colors.blueAccent,
                  ),
                  label: const Text('Button'),
                  style: ElevatedButton.styleFrom(
                    backgroundColor: Colors.grey[200],
                    foregroundColor: Colors.blueAccent,
                  ),
                  onPressed: () {},
                )
```
![スクリーンショット 2022-10-06 10.00.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1134006/0c95337b-83a2-0428-341c-eaeb239e7d1e.png)
```dart
ElevatedButton(
                  child: const Text('Button'),
                  style: ElevatedButton.styleFrom(
                    backgroundColor: Colors.blue,
                    foregroundColor: Colors.white,
                    shape: BeveledRectangleBorder(
                      borderRadius: BorderRadius.circular(10),
                    ),
                  ),
                  onPressed: () {},
                )
```
![スクリーンショット 2022-10-06 10.02.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1134006/c1d92e6e-4072-6d0f-60b6-7897f980bd92.png)
```dart
ElevatedButton(
                  child: const Text('Button'),
                  style: ElevatedButton.styleFrom(
                    backgroundColor: Colors.blue,
                    foregroundColor: Colors.white,
                    shape: BeveledRectangleBorder(
                      borderRadius: BorderRadius.circular(10),
                    ),
                  ),
                  onPressed: () {},
                )
```
![スクリーンショット 2022-10-06 10.06.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1134006/8b6e87f0-093e-55b5-41ac-37226bae8573.png)
```dart
ElevatedButton(
                  style: ElevatedButton.styleFrom(
                    shape: RoundedRectangleBorder(
                      borderRadius:
                          BorderRadius.only(topRight: Radius.circular(24)),
                    ),
                  ),
                  onPressed: () {},
                  child: Text('Button'),
                )
```
![スクリーンショット 2022-10-06 10.22.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1134006/0ebd10c1-98b7-30ea-73b2-ec7632acc800.png)
```dart
ElevatedButton(
                  onPressed: () {},
                  child: Text("Button"),
                  style: ElevatedButton.styleFrom(
                      shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(30),
                  )),
                )
```
![スクリーンショット 2022-10-06 10.24.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1134006/48067ec2-bad4-f736-0875-72322ae5895c.png)
```dart
ElevatedButton(
                  onPressed: () {},
                  child: Text("Button"),
                  style: ElevatedButton.styleFrom(
                      shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.only(
                              topLeft: Radius.circular(20),
                              topRight: Radius.elliptical(10, 40)
                              //  bottomLeft:, bottom left
                              // bottomRight: bottom right
                              ))),
                )
```
![スクリーンショット 2022-10-06 10.26.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1134006/0246d197-3fc2-efc6-c266-851d84522d1c.png)
```dart
ElevatedButton(
                  child: const Text('Btn'),
                  style: ElevatedButton.styleFrom(
                    backgroundColor: Colors.blue,
                    foregroundColor: Colors.white,
                    shape: const CircleBorder(
                      side: BorderSide(
                        color: Colors.blue,
                        width: 1,
                        style: BorderStyle.solid,
                      ),
                    ),
                  ),
                  onPressed: () {},
                )
```
![スクリーンショット 2022-10-06 10.28.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1134006/a257d8cd-6de6-1f5c-01ff-c99dd06484c6.png)
```dart
TextButton(
                  child: const Text('Button'),
                  style: TextButton.styleFrom(
                    foregroundColor: Colors.black,
                  ),
                  onPressed: () {},
                )
```
![スクリーンショット 2022-10-06 10.33.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1134006/67ed821c-5caf-c647-792e-c784a77e3241.png)
```dart
 TextButton(
                  style: ButtonStyle(
                    foregroundColor: MaterialStateProperty.all<Color>(
                        Colors.lightBlueAccent),
                    overlayColor: MaterialStateProperty.resolveWith<Color?>(
                      (Set<MaterialState> states) {
                        if (states.contains(MaterialState.hovered))
                          return Colors.blue.withOpacity(0.04);
                        if (states.contains(MaterialState.focused) ||
                            states.contains(MaterialState.pressed))
                          return Colors.blue.withOpacity(0.12);
                        return null; // Defer to the widget's default.
                      },
                    ),
                  ),
                  onPressed: () {},
                  child: Text('Button'),
                )
```
![スクリーンショット 2022-10-06 10.37.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1134006/cfc2b2bc-c078-9ec4-22ed-c7d9d0c24955.png)
```dart
TextButton(
                  style: ButtonStyle(
                    foregroundColor: MaterialStateProperty.all<Color>(
                        Colors.lightBlueAccent),
                  ),
                  onPressed: () {},
                  child: Text(
                    'Button',
                    style: TextStyle(
                        fontSize: 20, decoration: TextDecoration.underline),
                  ),
                )
```
![スクリーンショット 2022-10-06 10.38.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1134006/5f0df74e-c9e9-c93e-e952-aa8732333651.png)
```dart
OutlinedButton(
                  style: OutlinedButton.styleFrom(
                    shape: StadiumBorder(),
                    side: BorderSide(width: 2, color: Colors.lightBlueAccent),
                  ),
                  onPressed: () {},
                  child: Text(
                    'Button',
                    style: TextStyle(
                        fontSize: 16, decoration: TextDecoration.underline),
                  ),
                )
```
![スクリーンショット 2022-10-06 10.40.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1134006/3b6ed416-23bb-416a-48d3-ba5330e12ea4.png)
```dart
ElevatedButton(
                  child: const Text('Button'),
                  style: ElevatedButton.styleFrom(
                    backgroundColor: Colors.lightBlueAccent,
                    foregroundColor: Colors.white,
                    elevation: 16,
                  ),
                  onPressed: () {},
                )
```
![スクリーンショット 2022-10-06 10.41.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1134006/3e942753-7dad-ab3c-2333-21cbb4bf0670.png)
```dart
ElevatedButton(
                  child: Container(
                    decoration: BoxDecoration(
                      gradient: LinearGradient(
                        colors: <Color>[
                          Colors.lightBlueAccent,
                          Colors.blue,
                          Colors.blueAccent,
                        ],
                      ),
                    ),
                    padding: const EdgeInsets.all(10),
                    child: const Text('Button'),
                  ),
                  style: ElevatedButton.styleFrom(
                    padding: const EdgeInsets.all(0),
                  ),
                  onPressed: () {},
                )
```