[Flutter]コピペで使える！ボタンのデザイン16種類をまとめました

Flutter開発する中で、「この形のボタンどうやって書いたっけ？」と調べ直すことが何度かありましたので、ここにまとめておきます。

特に、ボタンウィジェットのshapeで定義できるのは、RoundedRectangleBorderやStadiumBorder、BeveledRectangleBorderなどなど色々ありますが、少し覚えにくいんですよね...

修正点等ありましたら、ご指摘お願いします。

[2020年10月24日追記]
[Flutter1.22](https://medium.com/flutter/announcing-flutter-1-22-44f146009e5f)より、ElevatedButtonやTextButton、OutlinedButtonなどのボタンWidgetが追加されたため、そちらも追記しておきます。

## いろんなボタンまとめ
### 1.色付きボタン

<img width="162" alt="1.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396229/8e06f8de-0ca7-b827-e5f3-17f776b14be2.png">

```dart
// Flutter1.22以降のみ
ElevatedButton(
  child: const Text('Button'),
  style: ElevatedButton.styleFrom(
    primary: Colors.orange,
    onPrimary: Colors.white,
  ),
  onPressed: () {},
),
```

```dart
RaisedButton(
  child: const Text('Button'),
  color: Colors.orange,
  textColor: Colors.white,
  onPressed: () {},
),
```



### 2.角丸ボタン

<img width="165" alt="2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396229/e242bebc-46b2-4f79-eea5-8313862b908a.png">

```dart
// Flutter1.22以降のみ
ElevatedButton(
  child: const Text('Button'),
  style: ElevatedButton.styleFrom(
    primary: Colors.blue,
    onPrimary: Colors.black,
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(10),
    ),
  ),
  onPressed: () {},
),
```

```dart
RaisedButton(
  child: const Text('Button'),
  color: Colors.blue,
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(10),
  ),
  onPressed: () {},
),
```

### 3.横丸ボタン

<img width="169" alt="3.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396229/115f6b94-70cd-5feb-b387-6c47452ab730.png">

```dart
// Flutter1.22以降のみ
ElevatedButton(
  child: const Text('Button'),
  style: ElevatedButton.styleFrom(
    primary: Colors.red,
    onPrimary: Colors.black,
    shape: const StadiumBorder(),
  ),
  onPressed: () {},
),
```

```dart
RaisedButton(
  child: const Text('Button'),
  color: Colors.red,
  shape: const StadiumBorder(),
  onPressed: () {},
),
```

### 4.斜角(?)ボタン

<img width="171" alt="5.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396229/040c5a10-b3f6-76b8-9412-165d455dad63.png">

```dart
// Flutter1.22以降のみ
ElevatedButton(
  child: const Text('Button'),
  style: ElevatedButton.styleFrom(
    primary: Colors.yellow,
    onPrimary: Colors.black,
    shape: BeveledRectangleBorder(
      borderRadius: BorderRadius.circular(10),
    ),
  ),
  onPressed: () {},
),
```

```dart
RaisedButton(
  child: const Text('Button'),
  color: Colors.yellow,
  shape: BeveledRectangleBorder(
    borderRadius: BorderRadius.circular(10),
  ),
  onPressed: () {},
),
```

### 5.下ライン

<img width="173" alt="6.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396229/66042463-e934-e1ae-6f1d-677da4e7fd9c.png">


```dart
RaisedButton(
  child: const Text('Button'),
  shape: const UnderlineInputBorder(),
  onPressed: () {},
),
```

### 6.角丸 + 外枠線

<img width="169" alt="7.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396229/73597fe8-f172-0aba-7cad-759ea46b9ba9.png">

```dart
// Flutter1.22以降のみ
OutlinedButton(
  child: const Text('Button'),
  style: OutlinedButton.styleFrom(
    primary: Colors.black,
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(10),
    ),
    side: const BorderSide(),
  ),
  onPressed: () {},
),
```

```dart
RaisedButton(
  child: const Text('Button'),
  color: Colors.white,
  shape: const OutlineInputBorder(
    borderRadius: BorderRadius.all(Radius.circular(10)),
  ),
  onPressed: () {},
),
```


### 7. 横丸 + 外枠線

<img width="168" alt="4.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396229/559558fe-8f13-778e-ae81-3f940492656a.png">

```dart
// Flutter1.22以降のみ
OutlinedButton(
  child: const Text('Button'),
  style: OutlinedButton.styleFrom(
    primary: Colors.black,
    shape: const StadiumBorder(),
    side: const BorderSide(color: Colors.green),
  ),
  onPressed: () {},
),
```

```dart
RaisedButton(
  child: const Text('Button'),
  color: Colors.white,
  shape: const StadiumBorder(
    side: BorderSide(color: Colors.green),
  ),
  onPressed: () {},
),
```


### 8. 外枠線カスタマイズ

<img width="169" alt="8.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396229/efe7a9d1-51c2-857a-3370-80b0cc0f2b5a.png">

```dart
RaisedButton(
  child: Text("Button"),
  color: Colors.white,
  shape: Border(
    top: BorderSide(color: Colors.red),
    left: BorderSide(color: Colors.blue),
    right: BorderSide(color: Colors.yellow),
    bottom: BorderSide(color: Colors.green),
  ),
  onPressed: () {},
),
```


### 9. 丸型ボタン

<img width="171" alt="9.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396229/68cc12b9-113d-a1c5-258e-b5d22a358eb9.png">

```dart
// Flutter1.22以降のみ
ElevatedButton(
  child: const Text('Btn'),
  style: ElevatedButton.styleFrom(
    primary: Colors.white,
    onPrimary: Colors.black,
    shape: const CircleBorder(
      side: BorderSide(
        color: Colors.black,
        width: 1,
        style: BorderStyle.solid,
      ),
    ),
  ),
  onPressed: () {},
),
```

```dart
RaisedButton(
  child: const Text('Btn'),
  color: Colors.white,
  shape: const CircleBorder(
    side: BorderSide(
      color: Colors.black,
      width: 1,
      style: BorderStyle.solid,
    ),
  ),
  onPressed: () {},
),
```


### 10. 影が深いボタン

<img width="174" alt="10.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396229/e5fd4f3f-3af4-31fb-c861-19aa28322b88.png">

```dart
// Flutter1.22以降のみ
ElevatedButton(
  child: const Text('Button'),
  style: ElevatedButton.styleFrom(
    primary: Colors.orange,
    onPrimary: Colors.black,
    elevation: 16,
  ),
  onPressed: () {},
),
```

```dart
RaisedButton(
  elevation: 16,
  child: const Text('Button'),
  onPressed: () {},
  color: Colors.orange,
),
```


### 11. タップ時に色が変わるボタン

![12-2.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396229/72123595-a0ad-f9a4-3c93-095ad9954691.gif)


```dart
RaisedButton(
  child: const Text('Button'),
  onPressed: () {},
  highlightElevation: 16,
  highlightColor: Colors.blue,
  onHighlightChanged: (value) {},
),
```

### 12. rippleエフェクトのみ色が変わるボタン

![13-2.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396229/dbb91ca5-96d6-afe7-6caa-b4ce79a6e6fa.gif)

```dart
// Flutter1.22以降のみ
ElevatedButton(
  child: const Text('Button'),
  style: ElevatedButton.styleFrom(
    primary: Colors.grey[300],
    onPrimary: Colors.purple,
  ),
  onPressed: () {},
),
```

```dart
RaisedButton(
  child: const Text('Button'),
  onPressed: () {},
  splashColor: Colors.purple,
),
```


### 13. アイコン入りボタン

<img width="172" alt="11.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396229/59f473f2-d05d-efc6-8f90-399f1e728a4f.png">

```dart
// Flutter1.22以降のみ
ElevatedButton.icon(
  icon: const Icon(
    Icons.tag_faces,
    color: Colors.white,
  ),
  label: const Text('Button'),
  style: ElevatedButton.styleFrom(
    primary: Colors.green,
    onPrimary: Colors.white,
  ),
  onPressed: () {},
),
```

```dart
RaisedButton.icon(
  icon: const Icon(
    Icons.tag_faces,
    color: Colors.white,
  ),
  label: const Text('Button'),
  onPressed: () {},
  color: Colors.green,
  textColor: Colors.white,
),
```

### 14. 文字ボタン

![15-2.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396229/c538b330-fc88-015b-68ed-c7aaba5c1751.gif)

```dart
// Flutter1.22以降のみ
TextButton(
  child: const Text('Button'),
  style: TextButton.styleFrom(
    primary: Colors.black,
  ),
  onPressed: () {},
),
```

```dart
FlatButton(
  child: const Text('Button'),
  textColor: Colors.black,
  onPressed: () {},
),
```


### 15. 文字ボタン + 外枠線

<img width="169" alt="12.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396229/ff86c8de-6646-e2f3-03cf-5324449cc8bc.png">

```dart
// Flutter1.22以降のみ
OutlinedButton(
  child: const Text('Button'),
  style: OutlinedButton.styleFrom(
    primary: Colors.black,
  ),
  onPressed: () {},
),
```

```dart
OutlineButton(
  child: const Text('Button'),
  onPressed: () {},
),
```

### 16. グラデーションボタン

<img width="190" alt="13.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/396229/b219b849-5422-e6d1-aaed-a6cea58cd2d0.png">

```dart
// Flutter1.22以降のみ
ElevatedButton(
  child: Container(
    decoration: BoxDecoration(
      gradient: LinearGradient(
        colors: <Color>[
          Colors.orange[300],
          Colors.orange[500],
          Colors.orange[700],
        ],
      ),
    ),
    padding: const EdgeInsets.all(10),
    child: const Text('Gradient Button'),
  ),
  style: ElevatedButton.styleFrom(
    padding: const EdgeInsets.all(0),
  ),
  onPressed: () {},
),
```

```dart
RaisedButton(
  onPressed: () {},
  textColor: Colors.white,
  padding: const EdgeInsets.all(0),
  child: Container(
    decoration: BoxDecoration(
      gradient: LinearGradient(
        colors: <Color>[
          Colors.orange[300],
          Colors.orange[500],
          Colors.orange[700],
        ],
      ),
    ),
    padding: const EdgeInsets.all(10),
    child: const Text('Gradient Button'),
  ),
),
```


##参考
・[Widget catalog](https://flutter.dev/docs/development/ui/widgets)
・[ShapeBorder](https://api.flutter.dev/flutter/painting/ShapeBorder-class.html)
・[RaisedButton](https://api.flutter.dev/flutter/material/RaisedButton-class.html)
・[Anatomy of Material Buttons in Flutter ](https://medium.com/flutterpub/anatomy-of-material-buttons-in-flutter-first-part-40eb790979a6)
・[Announcing Flutter 1.22](https://medium.com/flutter/announcing-flutter-1-22-44f146009e5f)