Open In App

FAB - Speed Dial in Flutter

Last Updated : 15 Jul, 2025
Comments
Improve
Suggest changes
6 Likes
Like
Report

A floating action button, commonly abbreviated as FAB, is a primary action button that has a fixed position hovering over an app without altering the contents of the screen. Speed dial is a transition type of FAB, where it emits multiple entities as an action of an FAB on the same screen.

Floating Action Button

FAB has three parts. They are containers, icons, and text. Based on these parts, FAB is classified into two types.

  1.  Regular: Container with only an Icon (Default)
  2.  Extended:  
    • Container with only Text
    • Container with both Icon and Text

FAB containers have two default sizes. They are default (56 x 56 dp) and mini (40 x 40 dp). FAB container’s shape or width are of two types.

  • Fixed: Cumulative width of the contents of a container, including padding
  • Fluid: Relative width to the screen or layout grid of the app

By default, a basic container is circular, where the icon is placed in the centre.

FAB’s visibility, motion, and even animations are highly customizable, making it quite relevant and easy to access on a screen. As mentioned above, FABs are fixed, but they hover over the content, making it completely out of context from the screen’s content. So, using the relevant FABs for a particular screen is highly recommended.

FABs when clicked perform actions that either happen on the same screen or in a different one.  The FAB transitions can be in the following forms:

  •     Speed Dial (FABs with icons and labels)  
  •     Menu
  •     Sub-surfaces (new surface on the same screen)  
  •     New screen

Speed Dial in Flutter

Speed dial is a transition type of FAB, where a stack of actions emits from an FAB when clicked, in the same screen. These actions are in the form of FABs with icons and labels on them.  A speed dial can be achieved by using a plugin/dependency named “flutter_speed_dial”.

Steps to Implement Making Calls in Flutter application

Step 1: Create a New Flutter Application

Create a new Flutter application using the command Prompt. To create a new app, write the below command and run it.

flutter create app_name

To know more about it refer this article: Creating a Simple Application in Flutter

Step 2: Adding the Dependency

To add the dependency to the pubspec.yaml file, add flutter_speed_dial as a dependency in the dependencies part of the pubspec.yaml file, as shown below:

Dart 
dependencies:
  flutter:
    sdk: flutter
  flutter_speed_dial:

Now run the below command in the terminal

flutter pub get


Step 3: Importing the Dependency

Use the below line of code in the main.dart file, to import the flutter_speed_dial dependency :

import 'package:flutter_speed_dial/flutter_speed_dial.dart';


Step 4: Code Implementation

- Create buildSpeedDial

Dart 
SpeedDial buildSpeedDial() {
    return SpeedDial(
          animatedIcon: AnimatedIcons.menu_close,
          animatedIconTheme: IconThemeData(size: 28.0),
          backgroundColor: Colors.green,
          foregroundColor: Colors.white,
          visible: true,
          curve: Curves.bounceInOut,
          children: [
                SpeedDialChild(
                      child: Icon(Icons.chrome_reader_mode, color: Colors.white),
                      backgroundColor: Colors.green,
                      onTap: () => print('Pressed Read Later'),
                      label: 'Read',
                      labelStyle:TextStyle(fontWeight: FontWeight.w500, color: Colors.white),
                      labelBackgroundColor: Colors.black,
                ),
                SpeedDialChild(
                      child: Icon(Icons.create, color: Colors.white),
                      backgroundColor: Colors.green,
                      onTap: () => print('Pressed Write'),
                      label: 'Write',
                      labelStyle:TextStyle(fontWeight: FontWeight.w500, color: Colors.white),
                      labelBackgroundColor: Colors.black,
                ),
                SpeedDialChild(
                      child: Icon(Icons.laptop_chromebook, color: Colors.white),
                      backgroundColor: Colors.green,
                      onTap: () => print('Pressed Code'),
                      label: 'Code',
                      labelStyle:TextStyle(fontWeight: FontWeight.w500, color: Colors.white),
                      labelBackgroundColor: Colors.black,
                ),
          ],
        );
  }


- Assign buildSpeedDial function to floatingActionButton

Dart 
 floatingActionButton: buildSpeedDial(),


Complete Source Code

main.dart:

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

void main() => runApp(MyApp()); 

class MyApp extends StatelessWidget {
    
  // Builds the SpeedDial with three action buttons
  SpeedDial buildSpeedDial() {
    return SpeedDial(
      animatedIcon: AnimatedIcons.menu_close, 
      animatedIconTheme: IconThemeData(size: 28.0), 
      backgroundColor: Colors.green, 
      foregroundColor: Colors.white, 
      visible: true, 
      curve: Curves.bounceInOut, // Animation curve
      
      children: [
        SpeedDialChild(
          
          // Read action icon
          child: Icon(Icons.chrome_reader_mode, color: Colors.white),
          
          // Button background color
          backgroundColor: Colors.green, 
          
          // Action on tap
          onTap: () => print('Pressed Read Later'),
          
          // Button label
          label: 'Read', 
          
          // Label style
          labelStyle: TextStyle(fontWeight: FontWeight.w500, color: Colors.white), 
          
          // Label background color
          labelBackgroundColor: Colors.black, 
        ),
        SpeedDialChild(
            
          // Write action icon
          child: Icon(Icons.create, color: Colors.white), 
          backgroundColor: Colors.green,
          onTap: () => print('Pressed Write'),
          label: 'Write',
          labelStyle: TextStyle(fontWeight: FontWeight.w500, color: Colors.white),
          labelBackgroundColor: Colors.black,
        ),
        SpeedDialChild(
            
          // Code action icon
          child: Icon(Icons.laptop_chromebook, color: Colors.white), 
          backgroundColor: Colors.green,
          onTap: () => print('Pressed Code'),
          label: 'Code',
          labelStyle: TextStyle(fontWeight: FontWeight.w500, color: Colors.white),
          labelBackgroundColor: Colors.black,
        ),
      ],
    );
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      
      // Hide debug banner
      debugShowCheckedModeBanner: false, 
      home: Scaffold(
        appBar: AppBar(
            
          // AppBar title
          title: Text('Geeks for Geeks'),
          
          // AppBar background color
          backgroundColor: Colors.green, 
          
          // AppBar text color
          foregroundColor: Colors.white, 
        ),
        body: SafeArea(
          child: Center(
            child: Text(
              'Welcome to GFG!',
              style: TextStyle(
                
                // Text size
                fontSize: 30.0, 
                
                // Text color
                color: Colors.green, 
                
                // Bold text
                fontWeight: FontWeight.bold, 
              ),
            ),
          ),
        ),
        
        // Add SpeedDial as FAB
        floatingActionButton: buildSpeedDial(), 
      ),
    );
  }
}

Code Explanation:

  1. A basic screen with an app bar, text, and a FAB is created.
  2. This FAB is assigned with an action named buildSpeedDial.
  3. The buildSpeedDial function has a main FAB called SpeedDial and multiple other SpeedDialChild FABs attached to it.
  4. SpeedDial is nothing but the main FAB that’s on the screen, which when clicked expands to emit those multiple SpeedDialChild.
  5. The SpeedDial can be customized using many features like animatedIcon, animatedIconTheme, visible (visibility of the FAB on screen), curve (the way in which the FAB acts when clicked), and much more.
  6. The SpeedDialChild is a completely customizable one too, with features like backgroundColor, onTap, label, labelStyle, Child(Icon), labelBackgroundColor, etc.  

Note: The onTap: () => print(“Pressed”), command will be executed in the flutter console.

Output:



V

varshaadhanasekar
Improve
Article Tags :

Explore

Lightbox