5 FloatingActionButton Examples In Flutter With Tutorial

In this tutorial, you will learn about the Floating Action Button in Flutter.

What is FloatingActionButton or Floating Button in Flutter?

FloatingActionButton is a simple button floating above the body at the bottom right corner. Provides immediate access for a primary function.

For example, the Gmail app.

When you are trying to composing a new mail, you are tapping the FloatingActionButton.

How to make a FloatingActionButton in Flutter

It’s very simple because Scaffold provides a floatingActionbutton property. You just need to give its value. Okay…Let’s create a simple Flutter project
with FloatingActionbutton.

You can also use Flutter commands to create a project.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        //body: Container(),
        floatingActionButton: FloatingActionButton(
          backgroundColor: Colors.blue,
          onPressed: () {},
        ),
      ),
    );
  }
}

This will be the output of the above code.

For adding an icon in FloatingActionButton or FAB, just add child property and Icon as value. Like shown below

child: Icon(Icons.add),

Now the output will be like below.

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        //body: Container(),
        floatingActionButton: FloatingActionButton(
          backgroundColor: Colors.blue,
          child: Icon(Icons.add),
          onPressed: () {},
        ),
      ),
    );
  }
}

This is just a simple example, If you want to redraw your widget you need to convert StatelessWidget in to StatefulWidget and call setState() method.

There are 2 types of FloatingActionButton constructors are available now.

1) FloatingActionButton() constructor – You have seen that how to use this constructor in above example.
2) FloatingActionButton.extended() – It just needs label as extra property.

• 8 Flutter Background Image Examples With Tutorial

FloatingActionButton.extended() – Example

In this example, we are using the second constructor of FloatingActionButton.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        //body: Container(),
        floatingActionButton: FloatingActionButton.extended(
          icon: Icon(Icons.add),
          label: Text('Add Note'),
          onPressed: () {
            print('FloatingActionButton clicked');
          },
        ),
      ),
    );
  }
}

How to change color of FloatingACtionButton in Flutter?

Use backgroundColor property and provide any Colors value as you want. just like below.

Scaffold(
        //body: Container(),
        floatingActionButton: FloatingActionButton(
          backgroundColor: Colors.deepPurple,
          child: Icon(Icons.add),
          onPressed: () {},
        ),
      ),

Flutter Bottom Navigation Bar With FAB

Do you want to make an app look like above?

In this example, you will create a BottomAppBar using bottomNavigationBar property with FloatingActionButton. For aligning FAB, Use Scaffold’s floatingActionButtonLocation property.

• 5 Flutter Bottom Button Examples With Tutorial

Step 1

Let’s start with creating FAB…

return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.grey,
        floatingActionButton: FloatingActionButton(
          backgroundColor: Colors.red,
          onPressed: () {},
          child: const Icon(
            Icons.edit,
            color: Colors.white,
          ),
        ),
      ),
    );

• Use backgroundColor property to set FAB’s color.

Step 2

It’s time to add BottomAppBar and it’s childrens.

  @override
  Widget build(BuildContext context) {
return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.grey,
        floatingActionButton: FloatingActionButton(
          backgroundColor: Colors.red,
          onPressed: () {},
          child: const Icon(
            Icons.edit,
            color: Colors.white,
          ),
        ),
        bottomNavigationBar: BottomAppBar(
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: [
              IconButton(
                icon: Icon(Icons.home),
                color: Colors.black,
                onPressed: () {},
              ),
              IconButton(
                icon: Icon(Icons.search),
                color: Colors.black,
                onPressed: () {},
              ),
              SizedBox(
                width: 40,
              ),
              IconButton(
                icon: Icon(Icons.add_shopping_cart),
                color: Colors.black,
                onPressed: () {},
              ),
              IconButton(
                icon: Icon(Icons.account_box),
                color: Colors.black,
                onPressed: () {},
              ),
            ],
          ),
        ),
      ),
    );
}

• Row aligns IconButtons in BottomAppBar

if you run the code now, the output should look like below.

Next, you need to set FloatingActionButton in the center of BottomAppBar.

Step 3

You don’t need to use any other widgets to set FAB’s location. Just use FloatingActionButtonLocation class values.

floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,

• It should be inside of Scaffold constructor.

Now the output will look like below.

Here you can see that FAB just floats above the BottomAppBar, that’s not what you want.

I know that. But if someone wants this type of style. This might help them.

Step 4

Create a notch using BottomAppBar’s shape property.

bottomNavigationBar: BottomAppBar(
shape: CircularNotchedRectangle(),
...

Source code should look like below.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(),
        backgroundColor: Colors.grey,
        floatingActionButton: FloatingActionButton(
          backgroundColor: Colors.red,
          onPressed: () {},
          child: const Icon(
            Icons.edit,
            color: Colors.white,
          ),
        ),
        floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
        bottomNavigationBar: BottomAppBar(
          shape: CircularNotchedRectangle(),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: [
              IconButton(
                icon: Icon(Icons.home),
                color: Colors.black,
                onPressed: () {},
              ),
              IconButton(
                icon: Icon(Icons.search),
                color: Colors.black,
                onPressed: () {},
              ),
              SizedBox(
                width: 40,
              ),
              IconButton(
                icon: Icon(Icons.add_shopping_cart),
                color: Colors.black,
                onPressed: () {},
              ),
              IconButton(
                icon: Icon(Icons.account_box),
                color: Colors.black,
                onPressed: () {},
              ),
            ],
          ),
        ),
      ),
    );
  }
}

You got it now.

How to change floating action button position in flutter

FloatingActionButtonLocation class provides different types of location constants to align the FloatingActionButton.

floatingActionButtonLocation:
            FloatingActionButtonLocation.miniEndDocked,

1. centerDocked
2. centerFloat
3. centerTop
4. endDocked
5. endFloat
6. endTop
7. miniCenterDocked
8. miniCenterFloat
9. miniCenterTop
10. miniEndDocked
11. miniEndFloat
12. miniEndTop
13. miniStartDocked
14. miniStartFloat
15. miniStartTop
16. startDocked
17. startFloat
18. startTop

Flutter 2 or Multiple FloatingActionButton Menu Example – Using Unicorndial package

In this example, you will learn how to create Multiple FloatingActionButton menu using the Unicorndial package.

So first add dependencies in pubspec.yaml.

unicorndial: ^1.1.5

Just put the below code in your dart file.

import 'package:flutter/material.dart';
import 'package:unicorndial/unicorndial.dart';

void main() => runApp(
      new MaterialApp(
        title: "Flutter Multiple FloatingActionButton Example",
        home: MyApp(),
      ),
    );

class MyApp extends StatefulWidget {
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State {
  @override
  Widget build(BuildContext context) {
    final floatingButtons = List();

    floatingButtons.add(
      UnicornButton(
        hasLabel: true,
        labelText: "Attachment",
        currentButton: FloatingActionButton(
          heroTag: "attachment",
          backgroundColor: Colors.black,
          mini: true,
          child: Icon(Icons.attach_file),
          onPressed: () {
            print('Attachment FAB clicked');
          },
        ),
      ),
    );

    floatingButtons.add(
      UnicornButton(
        hasLabel: true,
        labelText: "Camera",
        currentButton: FloatingActionButton(
          onPressed: () {
            print('Camera FAB clicked');
          },
          heroTag: "camera",
          backgroundColor: Colors.black,
          mini: true,
          child: Icon(Icons.photo_camera),
        ),
      ),
    );

    floatingButtons.add(
      UnicornButton(
        hasLabel: true,
        labelText: "Create Note",
        currentButton: FloatingActionButton(
          onPressed: () {
            print('Note FAB clicked');
          },
          heroTag: "note",
          backgroundColor: Colors.black,
          mini: true,
          child: Icon(Icons.note_add),
        ),
      ),
    );

    return Scaffold(
      floatingActionButton: UnicornDialer(
          backgroundColor: Colors.black38,
          parentButtonBackground: Colors.brown,
          orientation: UnicornOrientation.VERTICAL,
          parentButton: Icon(Icons.add),
          childButtons: floatingButtons),
      appBar: AppBar(
        title: Text('Flutter Multiple FloatingActionButton Example'),
      ),
      body: Container(),
    );
  }
}

• In this example, you are creating List of UnicornButtons and pass it to UnicornDialer.
• You can change orientation to horizontal using UnicornOrientation.HORIZONTAL value.
• If there are multiple FloatingACtionButton, you need to provide a unique heroTag value.

FloatingButton onPressed Example

In this example, you will create a counter app using FloatingActionButton.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'FloatingActionButton - onPressed Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State {
  int counter = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('FloatingActionButton onPressed Example'),
      ),
      body: Center(
        child: Text(
          '$counter',
          style: TextStyle(fontSize: 150.0, fontWeight: FontWeight.bold),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(
            () {
              counter++;
            },
          );
        },
        child: Icon(
          Icons.plus_one,
        ),
        backgroundColor: Colors.redAccent,
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
    );
  }
}

• When the FAB is clicked, it will call setState method with updating counter variable value.
• setState() method re-runs build() method, that updates Text value.

Let’s learn about other FloatingActionButton properties.

How to disable FloatingActionButton in Flutter

It is easy to disable FloatingActionButton, just provide a null value for onPressed property. But it is not recommended, because there is no sign that FAB is disabled, So it’s better to change the background color of FAB while it’s in a disabled state.

How to reduce FloatingActionButton size in Flutter?

By default, FloatingActionButton’s width and height are 56.0 logical pixels. Using mini property, you can reduce the Floating Button size to 48.0 logical pixels in both width and height.

floatingActionButton: FloatingActionButton(
          onPressed: () {},
          child: Icon(Icons.add),
          mini: true,
        ),

Different types of Shapes – FloatingActionButton Examples

Not an only circle, but you can also make FloatingActionButton into different shapes, Using the shape property.

floatingActionButton: FloatingActionButton(
          onPressed: () {},
          child: Icon(Icons.account_box),
          shape: RoundedRectangleBorder(),
        ),

floatingActionButton: FloatingActionButton(
          onPressed: () {},
          child: Icon(Icons.account_box),
          shape: BeveledRectangleBorder(
            borderRadius: BorderRadius.circular(12),
          ),
        ),

floatingActionButton: FloatingActionButton(
          onPressed: () {},
          child: Icon(Icons.account_box),
          shape: OutlineInputBorder(),
        ),

 floatingActionButton: FloatingActionButton(
          onPressed: () {},
          child: Icon(Icons.account_box),
          shape: UnderlineInputBorder(),
        ),

floatingActionButton: FloatingActionButton(
          onPressed: () {},
          child: Icon(Icons.account_box),
          shape: CircleBorder(
            side: BorderSide(
              width: 3.0,
              color: Colors.pink,
            ),
          ),
        ),

elevation

elevation property helps to control the shadow behind the FloatingActionButton. Default value is 6.

floatingActionButton: FloatingActionButton(
        onPressed: () {},
        elevation: 15.0,
        child: Icon(Icons.add),
      ),

• elevation changed to 15.0

Okay… That’s all for now. If you like this article, please share it.

FloatingActionButton Flutter Docs