How to Make Floating Action Button Movable With Dragging in Flutter

In Flutter, the Floating Action Button is not draggable by default. In this example, we are going to show you the best and easiest way to make a Floating Action Button Movable in Flutter App. See the example below to learn how to make the Floating Action button Draggable.

 First, Add draggable_fab Flutter Package in your dependency by adding following line in pubspec.yaml file.

dependencies:
  flutter:
    sdk: flutter
  draggable_fab: ^0.1.1

Draggable FloatingActionButton Widget:

import 'package:draggable_fab/draggable_fab.dart';

DraggableFab(
  child: FloatingActionButton(
    onPressed: (){
        //action after pressing this button
    },
    child: Icon(Icons.add),
  ),
)

The Output Look Like This:

Full Flutter Dart Code of Above Output:

import 'package:draggable_fab/draggable_fab.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: Scaffold(
        appBar: AppBar(
            title:Text("Draggable FloatingActionButton"),
            backgroundColor: Colors.redAccent,
        ),
        floatingActionButton: DraggableFab(
            child: FloatingActionButton(
              onPressed: (){
                 //action after pressing this button
              },
              child: Icon(Icons.add),
            ),
          ),
        body: Container(
           child: Center(
             child:Text("Draggable FloatingActionButton"),
           )
        )
      )
    );
  }
}

In this way, you can drag feature on FloatingActionButton() widget to make it movable from one place to another place.