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)
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)
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:
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.
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.