虎視眈々と

Flutter × Firebaseを研究するアプリエンジニア

Flutterのボタン大全

Flutterのボタン大全

最近「〜〜〜大全」という言葉が流行ってるようなのでタイトルに使わせていただきましたw Flutterにはボタンの種類が複数があるのでこの際一覧で書いてしまいたいと思います。

FlatButton

フラットなデザインのボタンになります。 マテリアルデザイン的にはViewに張り付いてるのを表現するときに使うようです。

f:id:superman199323:20181013224828p:plain

FlatButton(
       color: Colors.grey,
       onPressed: () {}, child: Text("フラットボタン")
),

RaiseButton

ライズボタンです。 影がついているボタンなので、浮いているように見えるようなボタンです。

f:id:superman199323:20181013225058p:plain

RaisedButton(
       onPressed: (){},
       child: Text("レイズボタン"),
),

OutlinButton

アウトラインボタンになります。 インスタグラムとかによく使われていますね。

f:id:superman199323:20181013225348p:plain

OutlineButton(
      onPressed: (){},
      child: Text("アウトラインテキスト"),
      borderSide: BorderSide(color: Colors.black),
)

borderSideshape 属性をカスタマイズすることでいろんなボタンを作成することができます。

f:id:superman199323:20181013230057p:plain

OutlineButton(
      onPressed: (){},
      child: Text("アウトラインボタン 丸", style: TextStyle(color: Colors.blue),),
      borderSide: BorderSide(color: Colors.blue),
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(30.0)),
),

IconButton

アイコンをボタンにできます。 ちゃんとタッチフィードバックもあります。

f:id:superman199323:20181013230356p:plain

IconButton(
      icon: Icon(Icons.android, color: Colors.green,),
      onPressed: (){}
),

FloatingActionButton

マテリアルデザインといったらFloatingButtonだと思います。

f:id:superman199323:20181013230642p:plain

これは Scaffold ウィジェットfloatingActionButton 属性に書いていきます。

Scaffold(
      appBar: AppBar(),
      floatingActionButton: FloatingActionButton(
        onPressed: () {},
        child: Icon(Icons.add),
),)

大きいFloatingButtonも作成することができます。

f:id:superman199323:20181013231123p:plain

Scaffold(
      appBar: AppBar(),
      floatingActionButton: FloatingActionButton.extended(
        onPressed: () {},
        label: Text("大きいフローティングボタン"),
        icon: Icon(Icons.add),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
)

PopupMenuButton

ボタンを押すとPull Downが出てくるようなボタンになります。

f:id:superman199323:20181013232542p:plain

PopupMenuButton<String>(
    itemBuilder: (BuildContext context) => <PopupMenuEntry<String>>[
         const PopupMenuItem<String>(
            child: Text('テスト1'),
         ),
         const PopupMenuItem<String>(
             child: Text('テスト2'),
          ),
          const PopupMenuItem<String>(
              child: Text('テスト3'),
          ),
          const PopupMenuItem<String>(
              child: Text('テスト4'),
          ),
    ],
)

総括

他にも ButtonBar などもありますが、今回は省略しました。 これだけあればほとんどのパターンをカバーできるかと思います。