How to create Animated Expandable Floating Action button like below, without 3rd party Library?

user_5174125 0
Viewed 127

I'm struggling to build the animated floating action button below. Please help me with some working solution. I have tried using Expandable FAB button code from flutter.dev website and tried with some plugins and Animated container with stack. But it's still no use.

Please help me guys.

enter image description here

flutter-animation flutter-layout flutter animation
1 Answers

I have used a packages called flutter_speed_dial that gets this done
https://pub.dev/packages/flutter_speed_dial

This is an example that you can see it and check it for yourself

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

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

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Home(),
    );
  }
}

class Home extends StatefulWidget{
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
 
  @override
  Widget build(BuildContext context) {
    return  Scaffold(
          appBar: AppBar( 
             title: Text("Speed Dial Floating Action Menu"),
             backgroundColor: Colors.deepOrangeAccent,
          ),
          floatingActionButton: SpeedDial(
            direction: SpeedDialDirection.left,
            icon: Icons.menu, //icon on Floating action button
            activeIcon: Icons.close, //icon when menu is expanded on button
            backgroundColor: Colors.deepOrangeAccent, //background color of button
            foregroundColor: Colors.white, //font color, icon color in button
            activeBackgroundColor: Colors.deepPurpleAccent, //background color when menu is expanded
            activeForegroundColor: Colors.white,
            visible: true,
            closeManually: false,
            curve: Curves.bounceIn,
            overlayColor: Colors.black,
            overlayOpacity: 0.5, //background layer opacity
            onOpen: () => print('OPENING DIAL'), // action when menu opens
            onClose: () => print('DIAL CLOSED'), //action when menu closes

            elevation: 8.0, //shadow elevation of button
            shape: CircleBorder(), //shape of button
            
            children: [
              SpeedDialChild( //speed dial child
                child: Icon(Icons.accessibility),
                backgroundColor: Colors.red,
                foregroundColor: Colors.white,
                label: 'First Menu Child',
                labelStyle: TextStyle(fontSize: 18.0),
                onTap: () => print('FIRST CHILD'),
                onLongPress: () => print('FIRST CHILD LONG PRESS'),
              ),
              SpeedDialChild(
                child: Icon(Icons.brush),
                backgroundColor: Colors.blue,
                foregroundColor: Colors.white,
                label: 'Second Menu Child',
                labelStyle: TextStyle(fontSize: 18.0),
                onTap: () => print('SECOND CHILD'),
                onLongPress: () => print('SECOND CHILD LONG PRESS'),
              ),
              SpeedDialChild(
                child: Icon(Icons.keyboard_voice),
                foregroundColor: Colors.white,
                backgroundColor: Colors.green,
                label: 'Third Menu Child',
                labelStyle: TextStyle(fontSize: 18.0),
                onTap: () => print('THIRD CHILD'),
                onLongPress: () => print('THIRD CHILD LONG PRESS'),
              ),

              //add more menu item children here
            ],
          ),

          body: Container()
       );
  }
}
user_186205590
Related