floating button flutter example

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

What is FloatingActionButton or Floating Button in Flutter?

floating button 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.
floating button flutter without icon

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.

flutter floatingactionbutton with icon


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.

FloatingActionButton.extended() – Example

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

flutter FAB extended constructor

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?

floating button flutter background color

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

floatingactionbutton flutter centerdocked
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.

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.
floatingactionbutton flutter and bottomnavigationbar property

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.

floatingactionbutton in flutter without notch

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.

floatingactionbutton flutter centerdocked

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

multiple floating action button menu in flutter

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

floating button flutter
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?

flutter FAB mini true
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.

rectangular fab


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

beveledrectangleborder shape fab


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

outlineinputborder fab shape flutter


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

underlineinputborder shape flutter

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

circleborder with width shape flutter fab


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

elevation

floating button elevation in flutter
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

Please disable your adblocker or whitelist this site!