Tutorials

Snippets

Search

Tags

Subscribe on Youtube

Multi Fab menu in Flutter with unicorndial

Cover image

This tutorial we'll use the unicorndial to create a profile menu like below. It'll show your user icon and animate out some options for logout, settings and home.

Multi Fab example

To start off we'll add the package to pubspec

unicorndial: ^1.1.5

The UnicornDialer will be used in place of the floatingActionButton and we'll supply it with multiple FAB's as it's children. We'll start by creating the children that we want. We'll create a function that returns a List<UnicornButton> that will populate a list type UnicornButton for us.

 List<UnicornButton> _getProfileMenu() {
    List<UnicornButton> children = [];

    // Add Children here

    return children;
 }

We also know that we want all our buttons to be the same so we can make a function called _profileOption that returns a UnicornButton with our option styling. This function will take in the icon we want to show as well as an onPressed function.

Widget _profileOption({IconData iconData, Function onPressed}) {
  return UnicornButton(
      currentButton: FloatingActionButton(
    backgroundColor: Colors.grey[500],
    mini: true,
    child: Icon(iconData),
    onPressed: onPressed,
  ));
}

Let's add three options to our children in the _getProfileMenu function.

List<UnicornButton> _getProfileMenu() {
  List<UnicornButton> children = [];

  // Add Children here
  children.add(_profileOption(iconData: Icons.account_balance, onPressed:() {}));
  children.add(_profileOption(iconData: Icons.settings, onPressed: (){}));
  children.add(_profileOption(iconData: Icons.subdirectory_arrow_left, onPressed: () {}));

  return children;
}

Then we can add the UnicornDialer as the FloatingActionButton and supply it with our children.

  
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: UnicornDialer(
        parentButtonBackground: Colors.grey[700],
        orientation: UnicornOrientation.HORIZONTAL,
        parentButton: Icon(Icons.person),
        childButtons: _getProfileMenu(),
      ),
      body: Center(child: Text('User Profile'),),
    );
  }

I hope you found this useful. Checkout some of the other Snippets for more flutter knowledge.

Also check out

Cover image

A Responsive UI Architecture Solution with Provider

In this tutorial we add state management to our Responsive UI Architecture using Provider.

Link
Cover image

Building a Responsive UI Architecture in Flutter

In this tutorial I show you how to build responsive widgets for Flutter.

Link
Cover image

The Best Flutter Responsive UI Pattern

In this tutorial we go over how you can create a shared widget that provides all the sizing functionality for a responsive UI

Link