How to Create multiple (More Than One) FAB in Flutter

If you’re familiar with the Gmail mobile app, you must have seen the Floating Action Button (or FAB) at the bottom right corner of its home screen, which allows you to compose a new message.

Adding that button in Flutter is pretty easy, you just need to use the FloatingActionButton class on the ‘floatingActionButton’ property of the ‘Scaffold’ widget.

But what if you need to create multiple (more than one) floating action buttons (FABs). So in this Flutter example, I will show you how to do such a thing (like the following pic).

The Secret Is SingleChildScrollView…

Someone might think that the ‘floatingActionButton’ property of the Scaffold widget accepts a Widget class, so let’s use a Column widget in it with its children being multiple FloatingActionButton classes and that’s set.

I’ll say, doing that alone will get you a weird result, but you are a half way through. So the solution is to wrap the column with a SingleChildScrollView like that.

floatingActionButton: SingleChildScrollView(
        child: Column(
          children: [
            FloatingActionButton(...),
            FloatingActionButton(...),
            FloatingActionButton(...),
          ],
        ),
      )

Don’t forget the Padding widget

It will be a good idea to wrap the Column in a Padding widget, because if you don’t do that, the shadows of the FABs will be clipped on the right or the bottom sides of the screen.

floatingActionButton: SingleChildScrollView(
        child: Padding(
          padding: const EdgeInsets.only(bottom: 8.0, right: 5.0),
          child: Column(
            children: [
              FloatingActionButton(...),
              FloatingActionButton(...),
              FloatingActionButton(...),
            ],
          ),
        ),
      )

Also, I've added Padding between the FABs, so that they don't touch each other from the top or the bottom (look at the full code below).

The Full Code

import 'package:flutter/material.dart';

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Multiple Floating Action Buttons'),
      ),
      floatingActionButton: SingleChildScrollView(
        //Fixing the shadow.
        child: Padding(
          padding: const EdgeInsets.only(bottom: 8.0, right: 5.0),
          child: Column(
            children: [
              FloatingActionButton(
                elevation: 4,
                tooltip: 'First FAB Button',
                backgroundColor: Colors.pink,
                child: Icon(Icons.gamepad),
                onPressed: () {},
              ),
              Padding(
                padding: const EdgeInsets.only(top: 4.0),
                child: FloatingActionButton(
                  elevation: 4,
                  tooltip: 'Second FAB Button',
                  backgroundColor: Colors.green,
                  child: Icon(Icons.streetview),
                  onPressed: () {},
                ),
              ),
              Padding(
                padding: const EdgeInsets.only(top: 4.0),
                child: FloatingActionButton(
                  elevation: 4,
                  tooltip: 'Third FAB Button',
                  backgroundColor: Colors.amber[800],
                  child: Icon(Icons.cake),
                  onPressed: () {},
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}