How to Make Two Floating Action Button In Flutter?

How to Make Two Floating Action Button In Flutter?

Floating Action Button represents the primary action of the screen and generally located at the right bottom of the screen. So in this article, We will go through How to Make Two Floating Action Button In Flutter?

Are you ready for it?

How to Make Two Floating Action Button In Flutter?

Consider a code snippet where Scaffold Widget takes a two floating action button.

return Scaffold(
  appBar: AppBar(
    title: Text(""),
  ),
  body: SingleChildScrollView(/*...*/),
  floatingActionButton: Column(
    mainAxisAlignment: MainAxisAlignment.end,
    children: [
      FloatingActionButton(
        child: Icon(
          Icons.delete
        ),
        onPressed: () {
          //...
        },
        heroTag: null,
      ),
      SizedBox(
        height: 10,
      ),
      FloatingActionButton(           
        child: Icon(
          Icons.star
        ),
        onPressed: () => _someFunc(),
        heroTag: null,
      )
    ]
  )
);

We can also make it happen by HeroTag like below:

Stack(
  children: <Widget>[
    Align(
      alignment: Alignment.bottomLeft,
      child: FloatingActionButton(
                heroTag: null,
             ...),
    ),
    Align(
      alignment: Alignment.bottomRight,
      child: FloatingActionButton(
                heroTag: null,
             ...),
    ),
  ],
)

You must use SpeedDial Class and on children[] you can add some buttons with SpeedDialChild. The sample below shows 2 FABs.

Create a custom widget like the below:

Widget _getFAB() {
        return SpeedDial(
          animatedIcon: AnimatedIcons.menu_close,
          animatedIconTheme: IconThemeData(size: 22),
          backgroundColor: Color(0xFF801E48),
          visible: true,
          curve: Curves.bounceIn,
          children: [
                // FAB 1
                SpeedDialChild(
                child: Icon(Icons.assignment_turned_in),
                backgroundColor: Color(0xFF801E48),
                onTap: () { /* do anything */ },
                label: 'Button 1',
                labelStyle: TextStyle(
                    fontWeight: FontWeight.w500,
                    color: Colors.white,
                    fontSize: 16.0),
                labelBackgroundColor: Color(0xFF801E48)),
                // FAB 2
                SpeedDialChild(
                child: Icon(Icons.assignment_turned_in),
                backgroundColor: Color(0xFF801E48),
                onTap: () {
                   setState(() {
                      _counter = 0;
                   });
                },
                label: 'Button 2',
                labelStyle: TextStyle(
                    fontWeight: FontWeight.w500,
                    color: Colors.white,
                    fontSize: 16.0),
                labelBackgroundColor: Color(0xFF801E48))
          ],
        );
  }

The above code will give us output like below:

Conclusion :

In this article, we have been through How to Make Two Floating Action Button In Flutter?

Thanks for Reading !!!

Keep Learning !!! Keep Fluttering !!!

FlutterAgency.com is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget Guide, Flutter Projects, Code libs and etc.