FAB Flutter

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

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).


Multiple (More than One) FABs

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(...),
            ],
          ),
        ),
      )

Multiple FABs with and without Padding


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: () {},
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

2 comments:

  1. Can we use a Row instead of a Column? Did anyone try it?

    ReplyDelete
    Replies
    1. Yeah, but it will get you a wired result. Try it.

      Delete

| Designed by Colorlib