[Flutter]FloatingActionButtonのサイズを変更する方法

どうも、ちょげ(@chogetarou)です。

FloatingActionButtonの大きさを変更する方法を紹介します。

方法

FloatingActionButtonのサイズを変更する方法は、５つあります。

SizedBox

１つ目は、SizedBoxを使う方法です。

 floatingActionButton: SizedBox(
          width: 150,
          height: 150,
          child: FloatingActionButton(
            onPressed: () {},
          ),
        ),

SizedBoxのchildにFloatingActionButtonを指定します。

そして、widthとheightを使ってサイズを変更することが出来ます。

Container

２つ目は、Containerを使う方法です。

 floatingActionButton: Container(
          width: 150,
          height: 150,
          child: FloatingActionButton(
            onPressed: () {},
          ),
        ),

SizedBoxと同じように使います。

Transform.scale

３つ目は、Transform.scaleを使う方法です。

floatingActionButton: Transform.scale(
  scale: 1.5,
  child: FloatingActionButton(onPressed: () {}),
)

childにFloatingActionButtonを指定し、大きさを引数「scale」で指定します。

「scale」では、何倍の大きさにするかを指定します。

FloatingActionButton.extended

４つ目は、「FloatingActionButton.extended」を使う方法です。

floatingActionButton: FloatingActionButton.extended(
          onPressed: () {},
          label: Text('Save'),
          icon: Icon(Icons.save),
        ),

FloatingActionButton.extendedを使うと、アイコンのサイズと形状が変化します。

mini

5つ目は、miniを使う方法です。

floatingActionButton: FloatingActionButton(
          mini: true,
          onPressed: () {},
        ),

miniにtrueを指定すると、通常のサイズよりも更に小さいサイズになります。

まとめ

FloatingActionButtonのサイズを変える方法は、次の５つです。

• SizedBox
• Container
• Transform.scale
• FloatingActionButton.extended
• 引数「mini」

細かくサイズを設定したいのならば、SizedBoxとContainerが向いています。

それ以外はお好みです。