Floating Button を変形してみる


Flutterでいろいろなフローティングボタンを生成してみます。

## よく見るフローティングボタン

よく見るこんなやつ

<img width="506" alt="スクリーンショット 2018-07-23 21.21.37.png" src="https://qiita-image-store.s3.amazonaws.com/0/139360/e4b2fe3b-d157-3a5e-2c0b-befc6e9bd222.png">

右下に浮いているフローティングボタンの実装はこんな感じです。

```dart
      floatingActionButton: FloatingActionButton(
        onPressed: () {
        },
        child: new Icon(Icons.add),
      ),
```

こんな実装を `Scaffold` の中に書きます。

## 文字入れてみる

<img width="449" alt="スクリーンショット 2018-07-23 21.24.22.png" src="https://qiita-image-store.s3.amazonaws.com/0/139360/4f2ba9b1-bc8a-ece1-880f-6e65a298d018.png">

今度はこんな感じで文字をいれて浮かせたボタンをセンタリングします。

実装はこんな感じ

```dart

      floatingActionButton: FloatingActionButton.extended(
        onPressed: () {
        },
        icon: new Icon(Icons.add),
        label: Text("写真を共有する"),
      ),
```

これも同じく ``Scaffold` の中に書きます。

### メニューの下を下にくっつけてみる

<img width="450" alt="スクリーンショット 2018-07-23 21.41.00.png" src="https://qiita-image-store.s3.amazonaws.com/0/139360/949b0966-06f4-128e-cc41-f27676e9e59a.png">


次は下にAPP barをひっつけてみます。
最近よくみるマテリアルデザインですね。

```dart
    floatingActionButton: FloatingActionButton(
        onPressed: () {
        },
        child: new Icon(Icons.add),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      bottomNavigationBar: BottomAppBar(
          hasNotch: false,
          child: new Row(
            mainAxisSize: MainAxisSize.max,
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              IconButton(
                icon: Icon(Icons.menu),
                onPressed: () {},
              ),
              IconButton(
                icon: Icon(Icons.search),
                onPressed: () {},
              )
            ],
          ),
      ),
```

もちろん文字をいれたフローティングボタンもできます。

<img width="432" alt="スクリーンショット 2018-07-23 21.44.02.png" src="https://qiita-image-store.s3.amazonaws.com/0/139360/04c23326-f964-0727-1a79-2e275bece59c.png">

```dart

     floatingActionButton: FloatingActionButton.extended(
        onPressed: () {
        },
        icon: new Icon(Icons.add),
        label: Text("写真を共有する"),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      bottomNavigationBar: BottomAppBar(
          hasNotch: false,
          child: new Row(
            mainAxisSize: MainAxisSize.max,
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              IconButton(
                icon: Icon(Icons.menu),
                onPressed: () {},
              ),
              IconButton(
                icon: Icon(Icons.search),
                onPressed: () {},
              )
            ],
          ),
      ),
```

## Speed dialを実装する

![speeduial.gif](https://qiita-image-store.s3.amazonaws.com/0/139360/2f754ff6-1ced-956a-8554-fa6bbf9d7348.gif)


↑こんなやつです。

これは一から自作するより便利なプラグインがあるのでそれを使いましょう。

https://pub.dartlang.org/packages/flutter_speed_dial

実装はこんな感じ

```dart

    floatingActionButton: SpeedDial(
      animatedIcon: AnimatedIcons.menu_close,
      animatedIconTheme: IconThemeData(size: 22.0),
      curve: Curves.bounceIn,
      children: [
        SpeedDialChild(
            child: Icon(Icons.create),
            backgroundColor: Colors.blue,
            label: "グループを作成する",
            onTap: () {
              Navigator.pushNamed(context, "/create_group");
            },
            labelStyle: TextStyle(fontWeight: FontWeight.w500)),
        SpeedDialChild(
            child: Icon(Icons.person_add),
            backgroundColor: Colors.green,
            label: "グループに参加する",
            onTap: () {
              Navigator.pushNamed(context, "/search_group");
            },
            labelStyle: TextStyle(fontWeight: FontWeight.w500)),
      ],
    ),
```

## 総括

こんなレイアウトもFlutterでは簡単に作れてしまうところはほんと素晴らしいなと思います。

Flutterに関しての呟きをたくさんしているのでよろしければフォローお願いします。↓
Twitter：https://twitter.com/yshogo87

また、以前Flutterを触ってみて得た知見を記事にしたのでこちらも一緒にお願いします。
「Flutterを触りまくったので知見を公開する」
https://note.mu/shogoyamada/n/n043aa4b7750e