Flutterexperts

In Flutter, Speed Dial is a well-known floating action button (FAB) variation generally used to give users admittance to different actions or choices from a single button. At the point when the FAB is tapped, it extends to rapidly uncover a list of extra more modest buttons or actions, empowering users to perform related errands.

This article will Explore Speed Dial In Flutter. We will implement a demo program and I would like to show how to use speed dial in Flutter using the flutter_speed_dial package in your Flutter applications.

If you’re looking for the best Flutter app development company for your mobile application then feel free to contact us at — support@flutterdevs.com.

For Flutter Speed Dial:

flutter_speed_dial | Flutter package
Flutter plugin to implement a beautiful and dynamic Material Design Speed Dial with labels, animated icons…pub.dev

---

Table Of Contents::

Introduction

Implementation

Code Implement

Code File

Conclusion

---

---

Introduction:

A Speed Dial in Flutter is a proficient and easy-to-use method for dealing with various actions in a single Floating Action Button. It works on UI/UX plan while further developing availability to key elements.

This demo video shows how to use speed dial in Flutter and how a speed dial will work using the flutter_speed_dial package in your Flutter applications. We will show a user a fab button on a screen when the user presses the button it expands to reveal a list of additional smaller buttons or actions by using the flutter_speed_dial package. It will be shown on your device.

Demo Module::

---

Implementation:

Step 1: Add the dependencies

Add dependencies to pubspec — yaml file.

dependencies:
  flutter:
    sdk: flutter
  flutter_lints: ^3.0.0

Step 2: Import

import 'package:flutter_speed_dial/flutter_speed_dial.dart';

Step 3: Run flutter packages get in the root directory of your app.

Code Implement:

You need to implement it in your code respectively:

Create a new dart file called main.dart inside the lib folder.

In the main.dart file, we will create a new class was SpeedDialDemo(). In this new class, we will add the body. In the body we will add the center widget. Inside the widget, we will add an Image with height and width and text is ‘PLease tap the FAB button’.

Center(
    child: Column(
  children: [
    Image.asset(
      "assets/logo.png",
      height: MediaQuery.of(context).size.height * 0.45,
      width: MediaQuery.of(context).size.width * 0.7,
    ),
    const Text(
      'PLease tap the FAB button',
      style: TextStyle(fontSize: 18, fontWeight: FontWeight.w600),
    ),
  ],
)),

Then, now we will add the floatingActionButton. In this button we will add SpeedDial() function. Inside this function, we will add animatedIcon, backgroundColor, foregroundColor, overlayColor, overlayOpacity, etc.

floatingActionButton: SpeedDial(
  animatedIcon: AnimatedIcons.menu_close,
  backgroundColor: Colors.teal.shade100,
  foregroundColor: Colors.black,
  overlayColor: Colors.white,
  overlayOpacity: 0.5,
  spacing: 12.0,
  spaceBetweenChildren: 9.0,
  direction: SpeedDialDirection.up,
  children: [
    SpeedDialChild(
      child: const Icon(Icons.message),
      label: 'Chat',
      onTap: () => print('Chat'),
    ),
    SpeedDialChild(
      child: const Icon(Icons.call),
      label: 'Call',
      onTap: () => print('Call'),
    ),
    SpeedDialChild(
      child: const Icon(Icons.camera_alt),
      label: 'Camera',
      onTap: () => print('Camera'),
    ),
  ],
),

Its children, we will add three SpeedDialChild() function. In this function, we will three icons on the child, label and onTap(). When user tap the the button is expands and show icons.

When we run the application, we ought to get the screen’s output like the underneath screen capture.

Code File:

import 'package:flutter/material.dart';
import 'package:flutter_speed_dial/flutter_speed_dial.dart';
import 'package:flutter_speed_dial_demo/splash_screen.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      debugShowCheckedModeBanner: false,
      home: const Splash(),
    );
  }
}

class SpeedDialDemo extends StatefulWidget {
  const SpeedDialDemo({super.key});

  @override
  State<SpeedDialDemo> createState() => _SpeedDialDemoState();
}

class _SpeedDialDemoState extends State<SpeedDialDemo> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        automaticallyImplyLeading: false,
        centerTitle: true,
        title: const Text('Flutter Speed Dial Demo'),
        backgroundColor: Colors.teal.shade100,
      ),
      body: Center(
          child: Column(
        children: [
          Image.asset(
            "assets/logo.png",
            height: MediaQuery.of(context).size.height * 0.45,
            width: MediaQuery.of(context).size.width * 0.7,
          ),
          const Text(
            'PLease tap the FAB button',
            style: TextStyle(fontSize: 18, fontWeight: FontWeight.w600),
          ),
        ],
      )),
      floatingActionButton: SpeedDial(
        animatedIcon: AnimatedIcons.menu_close,
        backgroundColor: Colors.teal.shade100,
        foregroundColor: Colors.black,
        overlayColor: Colors.white,
        overlayOpacity: 0.5,
        spacing: 12.0,
        spaceBetweenChildren: 9.0,
        direction: SpeedDialDirection.up,
        children: [
          SpeedDialChild(
            child: const Icon(Icons.message),
            label: 'Chat',
            onTap: () => print('Chat'),
          ),
          SpeedDialChild(
            child: const Icon(Icons.call),
            label: 'Call',
            onTap: () => print('Call'),
          ),
          SpeedDialChild(
            child: const Icon(Icons.camera_alt),
            label: 'Camera',
            onTap: () => print('Camera'),
          ),
        ],
      ),
    );
  }
}

---

Conclusion:

In the article, I have explained the spead dial in a flutter; you can modify this code according to your choice. This was a small introduction to speed dial On User Interaction from my side, and it’s working using Flutter.

I hope this blog will provide you with sufficient information on Trying the Speed Dial in your flutter projects. We will show you what the Introduction is. Make a demo program for working on speed dial Using the flutter_speed_dial package in your flutter applications. So please try it.

❤ ❤ Thanks for reading this article ❤❤

If I got something wrong? Let me know in the comments. I would love to improve.

Clap 👏 If this article helps you.

---

Feel free to connect with us:
And read more articles from FlutterDevs.com.

FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter-related queries.

We welcome feedback and hope you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.

---