FAB - Speed Dial in Flutter - GeeksforGeeks

23 Sep, 2020
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.
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 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”.
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.
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(),      ),    );  }}
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.
android
Flutter
Android
Dart
Flutter
Android
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Android Architecture
How to Create and Add Data to SQLite Database in Android?
MVVM (Model View ViewModel) Architecture Pattern in Android
Broadcast Receiver in Android With Example
Resource Raw Folder in Android Studio
Flutter - DropDownButton Widget
Listview.builder in Flutter
Flutter - Asset Image
Splash Screen in Flutter
Flutter - Custom Bottom Navigation Bar