Speed Dial in Flutter

Suraj Chauhan

29 November 2024

In this blog we will learn about how to use Speed Dial In Flutter.

In flutter Speed Dial is a is a popular Floating Action Button (FAB) variant widely used to provide users with access to multiple actions or options from a single button.

When the FAB is tapped, it expands to reveal a list of additional smaller buttons or actions, enabling users to quickly perform related tasks.

Introduction

A Speed Dial in Flutter is an efficient and user-friendly way to manage multiple actions in a single Floating Action Button. It simplifies UI/UX design while improving accessibility to key features.

The flutter_speed_dial package provides an easy-to-use and highly customizable implementation, making it ideal for a wide range of Flutter applications.

Implementation

We are going to implement Speed Dial In Flutter so we need to follow below steps to implement this topic.

Step 1:

First of all we need to create a new flutter project and add the following dependency in pubspec.yaml file.

 flutter_speed_dial: ^7.0.0

1	flutter_speed_dial: ^7.0.0

You need to add latest version of this package.

Step 2:

In this step you need to create a StatelessWidget and add below mention code in this screen.

class SpeedDialExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Mobikul Speed Dial Example')),
      body: const Center(child: Text('Tap the FAB for options!')),

      // Adding Speed Dial as the Floating Action Button
      floatingActionButton: SpeedDial(
        animatedIcon: AnimatedIcons.menu_close,
        backgroundColor: Colors.blue,
        overlayColor: Colors.black,
        overlayOpacity: 0.5,
        spacing: 12.0,
        spaceBetweenChildren: 8.0,
        direction: SpeedDialDirection.up,
        children: [
          SpeedDialChild(
            child: const Icon(Icons.message),
            label: 'Message',
            onTap: () => print('Message tapped'),
          ),
          SpeedDialChild(
            child: const Icon(Icons.camera_alt),
            label: 'Camera',
            onTap: () => print('Camera tapped'),
          ),
          SpeedDialChild(
            child: const Icon(Icons.share),
            label: 'Share',
            onTap: () => print('Share tapped'),
          ),
        ],
      ),
    );
  }
}

class SpeedDialExample extends StatelessWidget {

@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(title: const Text('Mobikul Speed Dial Example')),

body: const Center(child: Text('Tap the FAB for options!')),

// Adding Speed Dial as the Floating Action Button

floatingActionButton: SpeedDial(

animatedIcon: AnimatedIcons.menu_close,

backgroundColor: Colors.blue,

overlayColor: Colors.black,

overlayOpacity: 0.5,

spacing: 12.0,

spaceBetweenChildren: 8.0,

direction: SpeedDialDirection.up,

children: [

SpeedDialChild(

child: const Icon(Icons.message),

label: 'Message',

onTap: () => print('Message tapped'),

SpeedDialChild(

child: const Icon(Icons.camera_alt),

label: 'Camera',

onTap: () => print('Camera tapped'),

SpeedDialChild(

child: const Icon(Icons.share),

label: 'Share',

onTap: () => print('Share tapped'),

);

}

In above mention code creates a Speed Dial in Flutter, which is an expandable Floating Action Button (FAB) with multiple action buttons.

The main FAB, styled with a blue background and an animated icon, expands upward to reveal three smaller buttons (Message, Camera, Share), each with a label and a tap action.

It’s ideal for grouping related actions in a compact and interactive way.

Output:

Speed Dial

In flutter Speed Dial is a is a popular Floating Action Button (FAB) variant widely used to provide users with access to multiple actions or options from a single button.

Conclusion

In this blog we have discussed about How To Implement Speed Dial.

I hope this blog is helpful to UnderStand this topic, you can visit here for more knowledge about Adaptive Theme.

Please visit the Link for more additional information about floating button.

You can also check other blogs from here for more knowledge.