すらぼうの開発ノート

モバイルアプリエンジニアのメモ

【Flutter】FloatingActionButtonのデザインバリエーションまとめ

本エントリではFloatingActionButtonのデザインバリエーションについて説明する

FloatingActionButtonとは

api.flutter.dev

FloatingActionButtonはMaterialデザインのfloating action buttonを実装するウィジェット

基本的に画面右下に配置されており、位置が固定されて表示されることが多い。 サイズはwidthheightが56に指定されている

またボイラープレートのカウンターアプリでも画面右下に表示されている基本的なUIアイテム。

floatingActionButton


FloatingActionButtonのデザインバリエーションについて

FloatingActionButtonは通常のコンストラクタに加え名前付きコンストラクタが3個用意されており、それぞれ次の様にデザインが異なる。

FloatingActionButtonのデザインバリエーション

上から

  • FloatingActionButton()
  • FloatingActionButton.small()
  • FloatingActionButton.large()
  • FloatingActionButton.extended()

で作成したボタンになる。コードは次の通り。

以下でそれぞれの名前付きコンストラクタについて説明する。

FloatingActionButton.small()

通常のFloatingActionButtonよりも小さいボタンが作成される。 サイズはwidthheightが40に指定されている。 プロパティは通常のFloatingActionButtonと基本的に同じ。

FloatingActionButton.large()

通常のFloatingActionButtonよりも大きいボタンが作成される。 サイズはwidthheightが96に指定されている。 プロパティは通常のFloatingActionButtonと基本的に同じ。

FloatingActionButton.extended()

文字列に対してFloatingActionButtonの幅が変化する。 サイズはheightが56に指定されており通常のFloatingActionButtonと同じ。 プロパティはlabelに表示したい文字列を含めたTextウィジェットなどを渡す。