虎視眈々と

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

FlutterでFloating buttonを出す

FlutterでFloating buttonを出す

Flutterではフロティングボタンの出し方が複数あるので今回はその方法について紹介します。

普通のFloating button

マテリアルデザインといったらこれといってもいいくらい有名なボタンの実装です。

f:id:superman199323:20181021152048p:plain

Flutterではこのボタンを簡単に実装できます。

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

大きいFloating Button

文字をいれた大きいFloating Buttonも作成できます。

f:id:superman199323:20181021152613p:plain

return Scaffold(
      appBar: AppBar(),
      floatingActionButton: FloatingActionButton.extended(
        onPressed: () {},
        label: Text("大きいボタン"),
        icon: Icon(Icons.add),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
    );

BottomAppbarと組み合わせる

さっきより少しだけかっこいい感じのボタンになります。 f:id:superman199323:20181021154834p:plain

return Scaffold(
      backgroundColor: Colors.blue,
      appBar: AppBar(),
      bottomNavigationBar: BottomAppBar(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            IconButton(
              onPressed: (){},
              icon: Icon(Icons.menu),
            )
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
          onPressed: (){},
        child: Icon(Icons.add),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
    );

もちろん大きいボタンも使えます。

f:id:superman199323:20181021155107p:plain

 return Scaffold(
      backgroundColor: Colors.blue,
      appBar: AppBar(),
      bottomNavigationBar: BottomAppBar(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            IconButton(
              onPressed: (){},
              icon: Icon(Icons.menu),
            )
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton.extended(
          onPressed: (){},
        icon: Icon(Icons.add),
        label: Text("大きいボタン"),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
    );
  }

ボタンの形を変える

次にボタンの形を変えます。 - 丸を完全に消す

f:id:superman199323:20181021164901p:plain

return Scaffold(
      backgroundColor: Colors.blue,
      appBar: AppBar(),
      bottomNavigationBar: BottomAppBar(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            IconButton(
              onPressed: (){},
              icon: Icon(Icons.menu),
            )
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton.extended(
          onPressed: (){},
        icon: Icon(Icons.add),
        label: Text("大きいボタン"),
        shape: BeveledRectangleBorder(
            borderRadius: new BorderRadius.circular(0.0)
        ),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
);
  • なんか可愛い形

f:id:superman199323:20181021165321p:plain

floatingActionButton: new FloatingActionButton.extended(
        icon: new Icon(Icons.cloud),
        label: new Text('可愛いボタン', style: TextStyle(color: Colors.black),),
        backgroundColor: Colors.amberAccent,
        onPressed: () {},
        shape: new BeveledRectangleBorder(
            borderRadius: new BorderRadius.circular(8.0)
        ),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
  • 角ばったボタン

f:id:superman199323:20181021165649p:plain

floatingActionButton: new FloatingActionButton(
        onPressed: (){},
        child: Icon(Icons.add),
        backgroundColor: Colors.black,
        shape: new BeveledRectangleBorder(
            borderRadius: new BorderRadius.circular(50.0)
        ),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,

所感

いろんなボタンが簡単に実装できてめちゃくちゃいいですね。 これからもFlutterやってくぞ!!!