572
452

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Last updated at Posted at 2019-07-28

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

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

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

[2020年10月24日追記]
Flutter1.22より、ElevatedButtonやTextButton、OutlinedButtonなどのボタンWidgetが追加されたため、そちらも追記しておきます。

いろんなボタンまとめ

1.色付きボタン

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

2.角丸ボタン

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

3.横丸ボタン

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

4.斜角(?)ボタン

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

5.下ライン

6.png
RaisedButton(
  child: const Text('Button'),
  shape: const UnderlineInputBorder(),
  onPressed: () {},
),

6.角丸 + 外枠線

7.png
// Flutter1.22以降のみ
OutlinedButton(
  child: const Text('Button'),
  style: OutlinedButton.styleFrom(
    primary: Colors.black,
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(10),
    ),
    side: const BorderSide(),
  ),
  onPressed: () {},
),
RaisedButton(
  child: const Text('Button'),
  color: Colors.white,
  shape: const OutlineInputBorder(
    borderRadius: BorderRadius.all(Radius.circular(10)),
  ),
  onPressed: () {},
),

7. 横丸 + 外枠線

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

8. 外枠線カスタマイズ

8.png
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. 丸型ボタン

9.png
// 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: () {},
),
RaisedButton(
  child: const Text('Btn'),
  color: Colors.white,
  shape: const CircleBorder(
    side: BorderSide(
      color: Colors.black,
      width: 1,
      style: BorderStyle.solid,
    ),
  ),
  onPressed: () {},
),

10. 影が深いボタン

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

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

12-2.gif

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

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

13-2.gif

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

13. アイコン入りボタン

11.png
// 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: () {},
),
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

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

15. 文字ボタン + 外枠線

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

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

13.png
// 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: () {},
),
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
ShapeBorder
RaisedButton
Anatomy of Material Buttons in Flutter
Announcing Flutter 1.22

572
452
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
572
452

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?