Flutter – Extended Floating Action Button

In Flutter, the Floating Action Button (FAB) is a common UI Widget. There are scenarios where you might need to extend the functionality of the FAB to offer additional options or actions. In this article we are going to create a Floating Action Button by clicking it will show 2 more options we can add more options to it according to your requirements. A sample video is given below to get an idea about what we are going to do in this article.

Basic Syntax of Extended FAB

FloatingActionButton.extended(
  onPressed: () {
    // Add your main action here
  },
  label: Text('Extended FAB'),
  icon: Icon(Icons.add),
  backgroundColor: Colors.blue,
);

Step By Step Implementation

Step 1: Create a New Project in Android Studio

To set up Flutter Development on Android Studio please refer to Android Studio Setup for Flutter Development, and then create a new project in Android Studio please refer to Creating a Simple Application in Flutter.

Step 2: Import the Package

First of all import material.dart file.

import 'package:flutter/material.dart';

Step 3: Execute the main Method

Here the execution of our app starts.

Dart

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

Step 4: Create MyApp Class

In this class we are going to implement the MaterialApp , here we are also set the Theme of our App.

Dart

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.green, // Set the app's primary theme color
      ),
      debugShowCheckedModeBanner: false,
      home: ExtendedFAB(),
    );
  }
}

Step 5: Create ExtendedFAB Class

In this class, we manage the visibility of additional options using the showOptions variable and a function toggleOptions().Inside the build method, we return a Column widget containing the main FAB and, if showOptions is true, a set of additional FABs representing different options that we are defined on the code. It contains a toggleOptions() method which is responsible for toggling the value of the boolean showOptions varriable. Comments are added for better understanding.

FloatingActionButton.extended(
            onPressed: () {
              toggleOptions(); // When the main FAB is pressed, toggleOptions is called
            },
            label: Text('Extended FAB'),
            icon: Icon(Icons.add),
            backgroundColor: Colors.blue,
          ),
          SizedBox(height: 16.0),
          Visibility(
            visible:
                showOptions, // Show the options only if showOptions is true
            child: Column(
              children: [
                FloatingActionButton(
                  onPressed: () {
                    // Add your action for Option 1
                  },
                  tooltip: 'Option 1',
                  child: Icon(Icons.add),
                ),
                SizedBox(height: 16.0),
                FloatingActionButton(
                  onPressed: () {
                    // Add your action for Option 2
                  },
                  tooltip: 'Option 2',
                  child: Icon(Icons.delete),
                ),
              ],
            ),
          ),

Dart

class ExtendedFAB extends StatefulWidget {
  @override
  _ExtendedFABState createState() => _ExtendedFABState();
}

class _ExtendedFABState extends State<ExtendedFAB> {
  bool showOptions = false;

  void toggleOptions() {
    setState(() {
      showOptions =
          !showOptions; // Toggling the visibility of additional options
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Extended FAB Example'),
      ),
      body: Center(
        child: Text(
          'GFG Extended FAB',
          style: TextStyle(fontSize: 24),
        ),
      ),
      floatingActionButton: Column(
        mainAxisAlignment: MainAxisAlignment.end,
        children: [
          FloatingActionButton.extended(
            onPressed: () {
              // When the main FAB is pressed,
              // toggleOptions is called
              toggleOptions();
            },
            label: Text('Extended FAB'),
            icon: Icon(Icons.add),
            backgroundColor: Colors.blue,
          ),
          SizedBox(height: 16.0),
          Visibility(
            visible:
                showOptions, // Show the options only if showOptions is true
            child: Column(
              children: [
                FloatingActionButton(
                  onPressed: () {
                    // Add your action for Option 1
                  },
                  tooltip: 'Option 1',
                  child: Icon(Icons.add),
                ),
                SizedBox(height: 16.0),
                FloatingActionButton(
                  onPressed: () {
                    // Add your action for Option 2
                  },
                  tooltip: 'Option 2',
                  child: Icon(Icons.delete),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

Here is the full Code of main.dart file

Dart

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.green, // Set the app's primary theme color
      ),
      debugShowCheckedModeBanner: false,
      home: ExtendedFAB(),
    );
  }
}

class ExtendedFAB extends StatefulWidget {
  @override
  _ExtendedFABState createState() => _ExtendedFABState();
}

class _ExtendedFABState extends State<ExtendedFAB> {
  bool showOptions = false;

  void toggleOptions() {
    setState(() {
      showOptions =
          !showOptions; // Toggling the visibility of additional options
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Extended FAB Example'),
      ),
      body: Center(
        child: Text(
          'GFG Extended FAB',
          style: TextStyle(fontSize: 24),
        ),
      ),
      floatingActionButton: Column(
        mainAxisAlignment: MainAxisAlignment.end,
        children: [
          FloatingActionButton.extended(
            onPressed: () {
              toggleOptions(); // When the main FAB is pressed, toggleOptions is called
            },
            label: Text('Extended FAB'),
            icon: Icon(Icons.add),
            backgroundColor: Colors.blue,
          ),
          SizedBox(height: 16.0),
          Visibility(
            visible:
                showOptions, // Show the options only if showOptions is true
            child: Column(
              children: [
                FloatingActionButton(
                  onPressed: () {
                    // Add your action for Option 1
                  },
                  tooltip: 'Option 1',
                  child: Icon(Icons.add),
                ),
                SizedBox(height: 16.0),
                FloatingActionButton(
                  onPressed: () {
                    // Add your action for Option 2
                  },
                  tooltip: 'Option 2',
                  child: Icon(Icons.delete),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

Output: