2 Ways to Add Multiple Floating Buttons in Flutter (2021)

Last updated on April 6, 2021 Guest Contributor Loading... Post a comment

This article shows you a couple of different ways to add multiple floating buttons into a single screen in Flutter.

Using Self-Written Code

Overview

The Scaffold widget has a parameter named floatingActionButton that can take not only the FloatingActionButton widget but also other widgets. When you only need a single floating button, using the FloatingActionButton widget is elegant and neat. If you need multiple floating buttons, using a Stack, Column, or Row widget is a good choice.

Example

This example creates 2 floating action buttons: Back and Next. We’ll assign a Stack to floatingActionButton and give it 2 Positioned widgets as the children.

Screenshot:

The code:

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // Remove the debug banner
      debugShowCheckedModeBanner: false,
      title: 'Kindacode.com',
      theme: ThemeData(
          primarySwatch: Colors.green, accentColor: Colors.greenAccent),
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Kindacode.com'),
      ),
      body: Center(),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
      floatingActionButton: Stack(
        fit: StackFit.expand,
        children: [
          Positioned(
            left: 30,
            bottom: 20,
            child: FloatingActionButton(
              heroTag: 'back',
              onPressed: () {/* Do something */},
              child: Icon(
                Icons.arrow_left,
                size: 40,
              ),
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(10),
              ),
            ),
          ),
          Positioned(
            bottom: 20,
            right: 30,
            child: FloatingActionButton(
              heroTag: 'next',
              onPressed: () {/* Do something */},
              child: Icon(
                Icons.arrow_right,
                size: 40,
              ),
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(10),
              ),
            ),
          ),
          // Add more floating buttons if you want
          // There is no limit
        ],
      ),
    );
  }
}

Using a Plugin

There are several plugins that can help you create more than one floating button on the same screen. One of the best and most popular ones is flutter_speed_dial.

1. Installing the plugin by adding its name and version to the dependencies section in your pubspec.yaml:

flutter_speed_dial: ^3.0.5

2. Run:

flutter pub get

Example

Preview:

The code

// main.dart
import 'package:flutter/material.dart';
import 'package:flutter_speed_dial/flutter_speed_dial.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // Remove the debug banner
      debugShowCheckedModeBanner: false,
      title: 'Kindacode.com',
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Kindacode.com'),
      ),
      body: Center(),
      floatingActionButton: SpeedDial(
          icon: Icons.share,
          backgroundColor: Colors.amber,
          children: [
            SpeedDialChild(
              child: Icon(Icons.face),
              label: 'Social Network',
              backgroundColor: Colors.amberAccent,
              onTap: () {/* Do someting */},
            ),
            SpeedDialChild(
              child: Icon(Icons.email),
              label: 'Email',
              backgroundColor: Colors.amberAccent,
              onTap: () {/* Do something */},
            ),
            SpeedDialChild(
              child: Icon(Icons.chat),
              label: 'Message',
              backgroundColor: Colors.amberAccent,
              onTap: () {/* Do something */},
            ),
          ]),
    );
  }
}

Conclusion

You’ve learned a few elegant approaches to implement more than one floating button on a single screen. This is helpful in many situations and will help you quickly get your tasks done when building apps. Explore more interesting aspects about button stuff and other things in Flutter by taking a look at the following:

You can also jump to our Flutter topic page or Dart topic page for the latest tutorials and examples.

Related Articles

guest
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x