How to Make Draggable and Expandable Floating Action Menu in Flutter

In this example, we are going to make a draggable and expandable vertical Floating Action Button (FAB) menu in Flutter. Floating Action Button menus are important components for your app to integrate which helps to make the app more beautiful and interactive. See the example below to make a draggable and expandable floating action button in the Flutter app.

First, add floatingpanel Futter package in your dependency by adding the following lines in pubspec.yaml file.

dependencies:
  flutter:
    sdk: flutter
  floatingpanel: ^1.1.3

To Make Draggable and Expandable Floating Action Button (FAB) menu:

import 'package:floatingpanel/floatingpanel.dart';

Stack(
  children: [
    Container( 
        child: Center( 
          child: Text("Your content here"),
          //add contents here  
        ),
    ),
    
    FloatBoxPanel(
        backgroundColor: Colors.redAccent,
        panelIcon: Icons.menu,
        onPressed: (index){
          //onpress action which gives pressed button index
          print(index);
          if(index == 0){
              print("Message Button Pressed");
          }else if(index == 1){
              print("Camera Button Pressed");
          }else if(index == 2){
              print("Play Button Pressed");
          }
        },
        buttons: [
            // Add Icons to the buttons list.
            Icons.message,
            Icons.photo_camera,
            Icons.video_library
            //add more buttons here 
        ]
    ),
])

This code will generate a movable Floating action button, when you click on button, it will expand with its menu buttons. 

The output of the Above Code:

Full Dart Code:

import 'package:floatingpanel/floatingpanel.dart';
import 'package:flutter/material.dart';
void main() {
  runApp(MyApp());
}

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

//we create different calss for home, other wise you will get 
//error while getting MediaQuery values. 
class Home extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Scaffold(
          appBar: AppBar(
              title:Text("Draggable FloatingActionButton Menu"),
              backgroundColor: Colors.redAccent,
          ),
          body: Container(
            child: Stack(
                children: [
                  Container( 
                     child: Center( 
                       child: Text("Draggable FloatingActionButton Menu"),
                     ),
                  ),
                  
                  FloatBoxPanel(
                      positionTop: MediaQuery.of(context).size.height - 200,
                      positionLeft: MediaQuery.of(context).size.width - 120,
                      //initial position to bottom right aligned 

                      backgroundColor: Colors.redAccent,
                      panelIcon: Icons.menu,
                      onPressed: (index){
                        //onpress action which gives pressed button index
                        print(index);
                        if(index == 0){
                           print("Message Button Pressed");
                        }else if(index == 1){
                           print("Camera Button Pressed");
                        }else if(index == 2){
                           print("Play Button Pressed");
                        }
                      },
                      buttons: [
                          // Add Icons to the buttons list.
                          Icons.message,
                          Icons.photo_camera,
                          Icons.video_library
                      ]
                  ),
            ])
          )
      );
  }
}

In this way, you can make movable and expandable floating action button (FAB) menu in Flutter app.