Help us understand the problem. What is going on with this article?

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


2020/10/24追記
最新記事は移動しました。
お手数ですがこちらをご覧ください


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

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

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

いろんなボタンまとめ

1.色付きボタン

1.png

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

2.角丸ボタン

2.png

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

3.横丸ボタン

3.png

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

4.斜角(?)ボタン

5.png

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

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

7. 横丸 + 外枠線

4.png

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

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

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

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

13. アイコン入りボタン

11.png

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

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

15. 文字ボタン + 外枠線

12.png

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

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

13.png

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

coka__01
Flutterが好きなスマホアプリエンジニアです。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away