ElevatedButtonでよくあるボタンをつくる

# 前提：さよならRaisedButton

Flutterでボタンを実装する上で大変お世話になったのがRaisedButtonというWidgetでした。・・・が、以下にもある通り廃止されてしまいました。
代わりに使うように推奨されているのがElevatedButtonです。
https://api.flutter.dev/flutter/material/RaisedButton-class.html

```
This class is obsolete, please use ElevatedButton instead.
```

# ElevatedButtonでよくあるボタンをつくる

というわけで、ElevatedButtonでボタンを作っていきたいと思います。
RaisedButtonと比べると追加するプロパティがやや増えますが、パターンを覚えてしまえば怖くない。

##普通のボタン

<img width="200" alt="button1.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149986/5d1c72ff-8c48-b596-c72e-dc02d4925b77.png">

```dart
            ElevatedButton(
              onPressed: () {},
              child: Text(
                "1.Normal Button",
              ),
            ),
```

## 背景が黒色のボタン
<img width="400" alt="button1.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149986/59408c4d-6176-2420-89ff-d9b8cd7b3dd4.png">

```dart
            ElevatedButton(
              onPressed: () {},
              child: Text(
                "2.BackGround Button",
                style: TextStyle(
                  color: Colors.yellow,
                  fontSize: 30,
                ),
              ),
              style: ElevatedButton.styleFrom(
                primary: Colors.black, //ボタンの背景色
              ),
            ),
```
styleプロパティを使います。

## 押したときの背景が黒色のボタン
<img width="200" alt="button3.gif" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149986/e550661c-1b33-754f-0221-fff33e6e38c6.gif">

```dart
            // 3.押したときの背景が黒色のボタン
            ElevatedButton(
              onPressed: () {},
              child: Text(
                "3.onPressed Color Button",
                style: TextStyle(
                  color: Colors.white,
                ),
              ),
              style: ElevatedButton.styleFrom(
                onPrimary: Colors.black, //押したときの色！！
              ),
            ),
```
先ほどと同様にstyleを使います。
primaryが背景色、onPrimaryが押したときの背景色になります。primaryと名前が似てるので注意。

## ボタン非活性化
<img width="200" alt="button4.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149986/8c8cf210-ef89-3442-e323-90a4cf028e15.png">

```dart
            ElevatedButton(
              onPressed: null, // onPressedをnullにする
              child: Text(
                "4.Untouchable button",
              ),
            ),
```
onPressedをnullにするだけで実現できます。

## 大きさを変える

<img width="330" alt="button5.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149986/291ef3ce-92e2-e9c3-871e-7f49dfbf2f19.png">

```dart
            SizedBox(
              // 5.SizedBoxで囲んでwidth/heightをつける
              width: 330,
              height: 100,
              child: ElevatedButton(
                onPressed: () {},
                child: Text(
                  "5.330 x 100 Size Button",
                ),
                style: ButtonStyle(),
              ),
            ),
```
他にもやり方ありますが、SizedBoxでElevatedButtonを包んでみました。

## 枠線をつける
<img width="200" alt="button1.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/149986/4cc98496-b4f1-54cc-5904-6746767a8c10.png">

```dart
            ElevatedButton(
              onPressed: () {},
              child: Text(
                "6.Button",
              ),
              style: ElevatedButton.styleFrom(
                side: BorderSide(
                  color: Colors.black, //枠線!
                  width: 3, //枠線！
                ),
              ),
```
背景を変えた時と同じstyleプロパティを使います。
sideにBorderSideを書いてあげれば、枠線の色や太さを指定できます。