FAB - Speed Dial in Flutter

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:

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

-

-

Complete Source Code

main.dart:

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: