FAB – Speed Dial in Flutter

Floating action button, commonly abbreviated as FAB, is a primary action button that has a fixed position hovering over in 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 a FAB in 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: 

          i. Container with only Text

          ii. 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.

    1. Fixed: Cumulative width of the contents of a container, including padding

    2. Fluid: Relative width to the screen or layout grid of the app

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

FAB’s visibility, motion, and even animations are highly customizable making it quite relevant and easy to access in 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 a highly recommended one.

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

    1. Speed Dial (FABs with icons and labels)  

    2. Menu

    3. Sub-surfaces (new surface in the same screen)  

    4. New screen

Speed Dial in Flutter

Speed dial is a transition type of FAB, where a stack of action emits from a 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 for adding the plugin to the Flutter app is as follows:

Step 1: Open “pubspec.yaml” file from the project folder.

Step 2: In the pubspec.yaml file, type flutter_speed_dial: under dependencies.

The code looks like this:

Dart

dependencies:
  flutter:
    sdk: flutter
  flutter_speed_dial:

Step 3: Now click “Pub Get” button in the top of the application (Android Studio).

Step 4: The “Process finished with exit code 0“ in the console shows that the dependency is been added successfully.

Step 5: Now import the plugin or package by adding the import ‘package:flutter_speed_dial/flutter_speed_dial.dart’; code to the top of the main.dart file.

Source Code:

Dart

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

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

class MyApp extends StatelessWidget {
  SpeedDial buildSpeedDial() {
    return SpeedDial(
      animatedIcon: AnimatedIcons.menu_close,
      animatedIconTheme: IconThemeData(size: 28.0),
      backgroundColor: Colors.green[900],
      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,
        ),
      ],
    );
  }

  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Geeks for Geeks'),
          backgroundColor: Colors.green,
        ),
        body: SafeArea(
          child: Center(
            child: Text(
              'Welcome to GFG!',
              style: TextStyle(
                fontSize: 30.0,
                color: Colors.green,
                fontWeight: FontWeight.bold,
              ),
            ),
          ),
        ),
        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: