Flutterでフローティングアクションボタンについての変更する方法

ホーム
アプリ関連ニュース
技術情報
Flutterでフローティングアクションボタンについての変更する方法

2023年1月27日
技術情報

1: 形状を変更する

FloatingActionButton( 
     shape: BeveledRectangleBorder(
          borderRadius: BorderRadius.zero
     ),
)

2:サイズを変更する

幅と高さは自由に調整できます。

SizedBox( 
    height:100,
    width:100,
    child:FloatingActionButton( 
       child: Icon(Icons.add), 
       onPressed: (){
            print("Button is pressed.");
        },
     ),
),

3:位置を変更する

場所を変更するには、ScaffoldのfloatingActionButtonLocationプロパティを使用します。

Scaffold(
    floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat
)

全部を纏めて、プロジェクトビルドした時

結果

return Scaffold(
        floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
        floatingActionButton: SizedBox(
          height: 100,
          width: 100,
          child: FloatingActionButton(
            child: Icon(Icons.add), 
            shape: BeveledRectangleBorder(borderRadius: BorderRadius.zero),
            onPressed: () {
              print("Button is pressed.");
            },
          ),
        ),
        backgroundColor: Colors.blue[100], 
        appBar: AppBar(
          title: Text("Floating Action Button"), 
          backgroundColor: Colors.redAccent, 
        ),
        body: Center(child: Text("Floating Action Button")));