技術記事

micomia株式会社の井上です。
今回はFlutterFlowにあるWidget「Floating Action Button」について説明しようと思います。

この記事を読めばFloating Action Buttonはマスターできるので、ぜひ実際にFlutterFlowを触りながら進めてみてください！

1.そもそもFloating Action Buttonとは？

まずFloating Action Buttonが何なのか知らないと始まらないですね。

名前から推測するに「浮かんでいるボタン」的な意味ですが、浮かんでいるボタン？？？？

でも実は、ほとんどの人が知っているボタンなのです。

出典：X(旧Twitter)

この青い投稿作成ボタン。これがFloating Action Buttonです。

実際にアプリを開いて確かめてみてください。どれだけスクロールしても同じ位置にいて、たしかに少し浮いている感じがします。

Floating Action Buttonの正体が分かったところで、実際にFlutterFlowで触りながらマスターしていきましょう！

2.Floating Action Buttonを見つける

widgetを追加する手順に従って、floating action buttonを探します。Top Resultsに出てきているものが今回使用するFloating Action Buttonなのでこちらを選びます。

すると追加できました。もちろんこのままでも使えますが気になるのは

①カラー

②配置

なので、この二つを修正していきます。

①カラーの変更

右側のプロパティパネルを下までスクロールしてみると、Colorと書かれている箇所があります。デフォルトのカラーでPrimaryになっていますが今回はApp BarやNav Barのセットしているカラーと同じカラー(#b259f8)にしようと思います。

Primaryの横のカラーが実際に表示されている四角い部分をタップすると

このようなパネルが表示されます。上部は好きなカラーを選べるのでここで選んでも良いですが、今回は#b259f8にしたいので、今のカラーコード(#4B39EF)が書かれているところに#b259f8を入力します。

するとカラーが変わりました。これで一旦カラー問題はクリアです。

②配置の変更

次は配置です。今のままでも十分ですが、今回はもう少し高めに置きたいと思います。

位置はPaddingをつけることで調節できます。デフォルトでは何も値が入っていないので一度100にしてみましょう。

少し高すぎて使いにくそうですね。では20くらいならどうでしょうか？

ちょうど良い感じかなと思います。これでいきましょう。

次に少し気になるのは、Colorの下にあるElevationです。

これは、簡単に言うと「どれくらい浮いてる感じを出したいか」を決められるものです。

デフォルトの8のままでも

特に違和感はないですが、少し値を大きくしてみます。

30にするとこのようになります。先ほどの8と比べるとかなり影が濃くなっていて違和感を感じます。

次は、0(Elevationなし)にしてみます。

Elevationがなくなると、少しのっぺりしていて立体感はなくなるのが分かります。

やはり、個人的には8前後が適切だと思います。

これで、①カラー、②配置　のどちらも解決しました！

最後に、Floating Action Buttonのアイコンについてもお話しします。

3.アイコンの変更

ここまでずっと、Floating Action Buttonの部分に＋のアイコンが表示されていました。これはデフォルで＋になっています。

ですが、左側のパネルをよく見てみると、

Floating Action Buttonの上にIconが置かれている状態だったんですね。

つまりここのアイコンは変更可能と言うことです。少しいじってみましょう。

例えばCreate Outlineというアイコンを置いてみると、鉛筆のアイコンなので何かの作成画面に遷移するんだなと分かりやすくなります。

他にも、Searchアイコンにすることで検索画面に遷移することが一目で分かります。

このようにさまざまなカラー、配置、アイコンに変えられるので何通りものFloating Action Buttonが作れます。

それぞれのアプリの雰囲気や目的に合うようにFloating Action Buttonを活用していきましょう！

動画でもっと知りたい方はこちら