Tughra/draggable_expandable_fab

Expandable Draggable Fab

This Flutter package provides a Expandable and Draggable Floating Button with animation.

💻 Installation

In the dependencies: section of your pubspec.yaml, add the following line:

dependencies:
  draggable_expandable_fab: <latest version>

To use the latest changes:

  draggable_expandable_fab:
    git:
      url: https://github.com/Tughra/draggable_expandable_fab.git
      ref: master

❔ Usage

Import this class

import 'package:draggable_expandable_fab/draggable_expandable_fab.dart';

Replace Scaffold's parameters with these to better usage.

      floatingActionButtonAnimator: NoScalingAnimation(),
      floatingActionButtonLocation: ExpandableFloatLocation(),

Simple Implementation

Scaffold(
      floatingActionButtonAnimator: NoScalingAnimation(),
      floatingActionButtonLocation: ExpandableFloatLocation(),
      floatingActionButton: ExpandableDraggableFab(childrenCount: 3,
      distance: 100,// Animatiion distance during open and close. 
      children: [
        FloatingActionButton(onPressed: (){}),
        FloatingActionButton(onPressed: (){}),
        FloatingActionButton(onPressed: (){}),
      ],),
      body: Container(),
    );

Full Implementation

   final Size _size = MediaQuery.of(context).size;
    return Scaffold(
      floatingActionButtonAnimator: NoScalingAnimation(),
      floatingActionButtonLocation: ExpandableFloatLocation(),
      floatingActionButton: ExpandableDraggableFab(childrenCount: 3,
        onTab: (){
        debugPrint("Tab");
        },
        childrenTransition: ChildrenTransition.fadeTransation,
        initialOpen: false,
        childrenBoxDecoration: const BoxDecoration(color: Colors.red),
        enableChildrenAnimation: true,
        curveAnimation: Curves.linear,
        reverseAnimation: Curves.linear,
        childrenType: ChildrenType.columnChildren,
        closeChildrenRotate: false,
        childrenAlignment: Alignment.topRight,
        initialDraggableOffset: Offset(_size.width-90,_size.height-100),
      distance: 100,// Animation distance during open and close.
      children: [
        FloatingActionButton(onPressed: (){}),
        FloatingActionButton(onPressed: (){}),
        FloatingActionButton(onPressed: (){}),
      ],),
      body: Container(),
    );