flutter_fab_dialer 0.1.1

Flutter plugin for using a Fab Dialer / Fab Speed Dial to use it as a menu. It uses material design library as the FAB is originated from Android.

Introduction

This is a Widget build for having an alternative to default menus

There are four types of fab menu items

With text and image associated

  FabMiniMenuItem.withTextWithImage(
          img,
          4.0,
          "Button menu",
          _logCounter,
          "Click me",
          Colors.blue,
          Colors.white,
          true
        ),

With only text associated

  FabMiniMenuItem.withText(
          new Icon(Icons.add),
          Colors.blue,
          4.0,
          "Button menu",
          _incrementCounter,
          "Click me",
          Colors.blue,
          Colors.white,
          true
        )

With no text and image associated

  FabMiniMenuItem.noTextWithImage(
          img,
          4.0,
          "Button menu",
          _incrementCounter,
          false
        )

With no text and no image associated

  FabMiniMenuItem.noText(
          new Icon(Icons.add),
          Colors.blue,
          4.0,
          "Button menu",
          _logCounter,
          false
        )

Usage

Create a list with your desired elements and customize each one

 var _fabMiniMenuItemList = [
      new FabMiniMenuItem.withTextWithImage(
        img,
        4.0,
        "Button menu",
        _logCounter,
        "Click me",
        Colors.blue,
        Colors.white,
        true
      ),

      new FabMiniMenuItem.withText(
        new Icon(Icons.add),
        Colors.blue,
        4.0,
        "Button menu",
        _incrementCounter,
        "Click me",
        Colors.blue,
        Colors.white,
        true
      ),
      new FabMiniMenuItem.noText(
        new Icon(Icons.add),
        Colors.blue,
        4.0,
        "Button menu",
        _logCounter,
        false
      ),

      new FabMiniMenuItem.noTextWithImage(
        img,
        4.0,
        "Button menu",
        _incrementCounter,
        false
      )
    ];

Add the Dialer to your UI

class _MyHomePageState extends State<MyHomePage> {

  //Provides an image of a cat
  static String getNewCatUrl() {
     return 'http://thecatapi.com/api/images/get?format=src&type=jpg&size=small'
         '#${new DateTime.now().millisecondsSinceEpoch}';
   }

   int _counter = 0;

  //Adds value to counter
   void _incrementCounter() {
     setState(() {
       _counter++;
     });
   }

   //Prints the value of the counter
   void _logCounter() {
     setState(() {
       print(_counter);
     });
   }

  @override
   Widget build(BuildContext context) {

     ImageProvider img = new NetworkImage(getNewCatUrl());

    //The list of FabMiniMenuItems that we are going to use
     var _fabMiniMenuItemList = [
       new FabMiniMenuItem.withTextWithImage(
         img,
         4.0,
         "Button menu",
         _logCounter,
         "Click me",
         Colors.blue,
         Colors.white,
         true
       ),

       new FabMiniMenuItem.withText(
         new Icon(Icons.add),
         Colors.blue,
         4.0,
         "Button menu",
         _incrementCounter,
         "Click me",
         Colors.blue,
         Colors.white,
         true
       ),
       new FabMiniMenuItem.noText(
         new Icon(Icons.add),
         Colors.blue,
         4.0,
         "Button menu",
         _logCounter,
         false
       ),

       new FabMiniMenuItem.noTextWithImage(
         img,
         4.0,
         "Button menu",
         _incrementCounter,
         false
       )
     ];

     return new Scaffold(
       appBar: new AppBar(
         title: new Text(widget.title),
       ),
       //Using a Stack will assure that the Dialer will appear at the end of your layout
       body:  new Stack(
         children: <Widget>[
           new Center(
             child: new Column(
               children: <Widget>[
                 new Text('You have pushed the button this many times:'),
                 new Text('$_counter', style: Theme.of(context).textTheme.display1),
               ],
             ),
           ),
           new FabDialer(_fabMiniMenuItemList, Colors.blue, new Icon(Icons.add)),
         ],
       ),
     );
   }
}