本エントリではFloatingActionButton
のデザインバリエーションについて説明する
FloatingActionButton
とは
FloatingActionButton
はMaterialデザインのfloating action buttonを実装するウィジェット。
基本的に画面右下に配置されており、位置が固定されて表示されることが多い。
サイズはwidth
とheight
が56に指定されている
またボイラープレートのカウンターアプリでも画面右下に表示されている基本的なUIアイテム。
FloatingActionButton
のデザインバリエーションについて
FloatingActionButton
は通常のコンストラクタに加え名前付きコンストラクタが3個用意されており、それぞれ次の様にデザインが異なる。
上から
FloatingActionButton()
FloatingActionButton.small()
FloatingActionButton.large()
FloatingActionButton.extended()
で作成したボタンになる。コードは次の通り。
以下でそれぞれの名前付きコンストラクタについて説明する。
FloatingActionButton.small()
通常のFloatingActionButton
よりも小さいボタンが作成される。
サイズはwidth
とheight
が40に指定されている。
プロパティは通常のFloatingActionButton
と基本的に同じ。
FloatingActionButton.large()
通常のFloatingActionButton
よりも大きいボタンが作成される。
サイズはwidth
とheight
が96に指定されている。
プロパティは通常のFloatingActionButton
と基本的に同じ。
FloatingActionButton.extended()
文字列に対してFloatingActionButton
の幅が変化する。
サイズはheight
が56に指定されており通常のFloatingActionButton
と同じ。
プロパティはlabel
に表示したい文字列を含めたText
ウィジェットなどを渡す。