Speed Dial in Flutter - FAB

A floating action button is a primary action button that has a fixed position in an app and does not change the screen's contents. Speed dial is a transition type of FAB that emits many entities as an FAB action on the same screen.

Floating action different type:

Speed Dial
Menu
Sub-surfaces
New screen

In this article, you will learn how to create your FAB in Flutter. So let’s take FAB widget example of the FAB in Flutter of Mobile application.

Video example of FAB mentioned below

Add package in pubspec.yaml

 dev_dependencies:
   flutter_test:
     sdk: flutter
   flutter_speed_dial:

Creating an Speed dial :

 SpeedDial(
   animatedIcon: AnimatedIcons.menu_close,
   animatedIconTheme: IconThemeData(size: 28.0),
   backgroundColor: Colors.blue[900],
   visible: true,
   curve: Curves.bounceInOut,
   children: [
     SpeedDialChild(
       child: Icon(Icons.chrome_reader_mode, color: Colors.white),
       backgroundColor: Colors.blue,
       onTap: () => print('Pressed Read Later'),
       label: 'Read',
       labelStyle:
       TextStyle(fontWeight: FontWeight.w500, color: Colors.white),
       labelBackgroundColor: Colors.blue,
     ),
     SpeedDialChild(
       child: Icon(Icons.create, color: Colors.white),
       backgroundColor: Colors.blue,
       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.blue,
       onTap: () => print('Pressed Code'),
       label: 'Code',
       labelStyle:
       TextStyle(fontWeight: FontWeight.w500, color: Colors.white),
       labelBackgroundColor: Colors.black,
     ),
   ],
 );

Step-by-Step Implementation

Step 1: Create a New Project in Android Studio (File >new flutter project).

Step 2: Adding material package

Import method the runApp method in the main function call first while run the application.

import 'package:flutter/material.dart';

void main() {

runApp(RunMyApp());

}

Step 3: Creating a stateless widget

We can create a stateless widget that contains MaterialApp widget,AppBar,etc.

class RunMyApp extends StatelessWidget {

const RunMyApp({super.key});

@override

Widget build(BuildContext context) {

return MaterialApp(home);

}

Step 4: Final code of Animatedwidget.


 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.blue[900],
      visible: true,
      curve: Curves.bounceInOut,
      children: [
        SpeedDialChild(
          child: Icon(Icons.chrome_reader_mode, color: Colors.white),
          backgroundColor: Colors.blue,
          onTap: () => print('Pressed Read Later'),
          label: 'Read',
          labelStyle:
          TextStyle(fontWeight: FontWeight.w500, color: Colors.white),
          labelBackgroundColor: Colors.blue,
        ),
        SpeedDialChild(
          child: Icon(Icons.create, color: Colors.white),
          backgroundColor: Colors.blue,
          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.blue,
          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('CandidRoot Solutions'),
          backgroundColor: Colors.blue,
        ),
        body: const SafeArea(
          child: Center(
            child: Text(
              'Welcome to CandidRoot Solutions!',
              style: TextStyle(
                fontSize: 30.0,
                color: Colors.blue,
                fontWeight: FontWeight.bold,
               ),
             ),
           ),
         ),
         floatingActionButton: buildSpeedDial(),
       ),
     );
   }
 }

Output of above example

Happy coding!

in Mobile

365Bloggy July 4, 2024

Speed Dial in Flutter - FAB

Add package in pubspec.yaml

Creating an Speed dial :

Step-by-Step Implementation

Step 1: Create a New Project in Android Studio (File >new flutter project).

Step 2: Adding material package

Step 3: Creating a stateless widget

Step 4: Final code of Animatedwidget.

Output of above example

Share this post

Tags

SUBSCRIBE THIS FORM

Recent Posts

Our blogs

Archive

Follow us