floating_action_bubble 1.1.2

Flutter Android iOS web

A animated menu using a floating action button , the aesthetic of the menu items are fully customisable

Floating Action Bubble #

Pub Pull Requests are welcome Codemagic build status

A Flutter package to create a animated menu using a Floating Action Button.

Showcase

Installation #

Just add floating_action_bubble to your pubspec.yml file

dependencies:
  floating_action_bubble: 1.0.9

Example #

class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin{

  Animation<double> _animation;
  AnimationController _animationController;

  @override
  void initState(){
        
    _animationController = AnimationController(
      vsync: this,
      duration: Duration(milliseconds: 260),
    );

    final curvedAnimation = CurvedAnimation(curve: Curves.easeInOut, parent: _animationController);
    _animation = Tween<double>(begin: 0, end: 1).animate(curvedAnimation);
    
    super.initState();


  }
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      
      floatingActionButtonLocation: FloatingActionButtonLocation.endFloat,
      
      //Init Floating Action Bubble 
      floatingActionButton: FloatingActionBubble(
        // Menu items
        items: <Bubble>[

          // Floating action menu item
          Bubble(
            title:"Settings",
            iconColor :Colors.white,
            bubbleColor : Colors.blue,
            icon:Icons.settings,
            titleStyle:TextStyle(fontSize: 16 , color: Colors.white),
            onPress: () {
              _animationController.reverse();
            },
          ),
          // Floating action menu item
          Bubble(
            title:"Profile",
            iconColor :Colors.white,
            bubbleColor : Colors.blue,
            icon:Icons.people,
            titleStyle:TextStyle(fontSize: 16 , color: Colors.white),
            onPress: () {
              _animationController.reverse();
            },
          ),
          //Floating action menu item
          Bubble(
            title:"Home",
            iconColor :Colors.white,
            bubbleColor : Colors.blue,
            icon:Icons.home,
            titleStyle:TextStyle(fontSize: 16 , color: Colors.white),
            onPress: () {
              _animationController.reverse();
            },
          ),
        ],

        // animation controller
        animation: _animation,

        // On pressed change animation state
        onPress: _animationController.isCompleted
            ? _animationController.reverse
            : _animationController.forward,
        
        // Floating Action button Icon color
        iconColor: Colors.blue,

        // Flaoting Action button Icon 
        icon: AnimatedIcons.add_event,
      )
    );
  }

}

You can check for a more complete example in the example directory.

Customize #

You can customize the widget appareance using the following properties:

PropertyDescription
fabColorSets the FAB color
fabIconSets the FAB icon
BubbleTitleSets the menu item title
BubbleTitleStyleSets the menu item title style
BubbleIconSets the menu item icon
BubbleIconColorSets the menu item icon color
BubbleColorSets the menu item color
animationAllows to animated the menu items

Contributing #

If you want to contribute to this project, please submit a PR 😁

36
likes
100
pub points
88%
popularity

A animated menu using a floating action button , the aesthetic of the menu items are fully customisable

Repository (GitHub)
View/report issues

Documentation

API reference

Uploader

darshanm806@gmail.com

License

MIT (LICENSE)

Dependencies

flutter

More

Packages that depend on floating_action_bubble