flutter_boom_menu 1.0.2

  • Readme
  • Changelog
  • Example
  • Installing
  • 93

Flutter Boom Menu #

Usage #

The BoomMenu widget is built to be placed in the Scaffold.floatingActionButton argument, replacing the FloatingActionButton widget. It's not possible to set its position with the Scaffold.floatingActionButtonLocation argument, but it's possible to set right/bottom margin with the marginRight and marginBottom arguments (default to 16) to place the button anywhere in the screen. Using the Scaffold.bottomNavigationBar the floating button will be always placed above the bar, so the BottomAppBar.hasNotch should be always false.

Title

Every child button can have a Icon,Title, SubTitle which can be customized providing by yourself. If the Title parameter is not provided the title will be not rendered.

The package will handle the animation by itself.

alt text

Example Usage ( complete with all params ):

Widget build(BuildContext context) {
    return Scaffold(
        floatingActionButton: BoomMenu(
      animatedIcon: AnimatedIcons.menu_close,
      animatedIconTheme: IconThemeData(size: 22.0),
      //child: Icon(Icons.add),
      onOpen: () => print('OPENING DIAL'),
      onClose: () => print('DIAL CLOSED'),
      scrollVisible: scrollVisible,
      overlayColor: Colors.black,
      overlayOpacity: 0.7,
      children: [
        MenuItem(
          child: Icon(Icons.accessibility, color: Colors.black),
          title: "Profiles",
          titleColor: Colors.white,
          subtitle: "You Can View the Noel Profile",
          subTitleColor: Colors.white,
          backgroundColor: Colors.deepOrange,
          onTap: () => print('FIRST CHILD'),
        ),
        MenuItem(
          child: Icon(Icons.brush, color: Colors.black),
          title: "Profiles",
          titleColor: Colors.white,
          subtitle: "You Can View the Noel Profile",
          subTitleColor: Colors.white,
          backgroundColor: Colors.green,
          onTap: () => print('SECOND CHILD'),
        ),
        MenuItem(
          child: Icon(Icons.keyboard_voice, color: Colors.black),
          title: "Profile",
          titleColor: Colors.white,
          subtitle: "You Can View the Noel Profile",
          subTitleColor: Colors.white,
          backgroundColor: Colors.blue,
          onTap: () => print('THIRD CHILD'),
        ),
        MenuItem(
          child: Icon(Icons.ac_unit, color: Colors.black),
          title: "Profiles",
          titleColor: Colors.white,
          subtitle: "You Can View the Noel Profile",
          subTitleColor: Colors.white,
          backgroundColor: Colors.blue,
          onTap: () => print('FOURTH CHILD'),
        )
      ],
    ),
    );
}

Issues & Feedback #

Please file an issue to send feedback or report a bug. Thank you!

Contributing #

Every pull request is welcome.

1.0.2 #

  • Now user can handle the body of scaffold widget.
  • Improved Performance

1.0.1 #

  • Now user can handle the body of scaffold widget.

1.0.0 #

  • Now user can set alignment and padding to FAB.
  • A better way of handling vertical overflows any MenuItem number is now supported.

0.0.2 #

  • Fix Some Bugs.

0.0.2 #

  • Fix Some Bugs.

0.0.1 #

  • Initial release.

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';

import 'package:flutter_boom_menu/flutter_boom_menu.dart';

void main() {
  runApp(MaterialApp(home: MyApp(), title: 'Boom Menu Example'));
}

class MyApp extends StatefulWidget {
  @override
  MyAppState createState() => MyAppState();
}

class MyAppState extends State<MyApp> with TickerProviderStateMixin {
  ScrollController scrollController;
  bool scrollVisible = true;

  @override
  void initState() {
    super.initState();

    scrollController = ScrollController()
      ..addListener(() {
        setDialVisible(scrollController.position.userScrollDirection == ScrollDirection.forward);
      });
  }

  void setDialVisible(bool value) {
    setState(() {
      scrollVisible = value;
    });
  }

  Widget buildBody() {
    return ListView.builder(
      controller: scrollController,
      itemCount: 30,
      itemBuilder: (ctx, i) => ListTile(title: Text('Item $i')),
    );
  }

  BoomMenu buildBoomMenu() {
    return BoomMenu(
      animatedIcon: AnimatedIcons.menu_close,
      animatedIconTheme: IconThemeData(size: 22.0),
      //child: Icon(Icons.add),
      onOpen: () => print('OPENING DIAL'),
      onClose: () => print('DIAL CLOSED'),
      scrollVisible: scrollVisible,
      overlayColor: Colors.black,
      overlayOpacity: 0.7,
      children: [
        MenuItem(
//          child: Icon(Icons.accessibility, color: Colors.black, size: 40,),
          child: Image.asset('assets/logout_icon.png', color: Colors.grey[850]),
          title: "Logout",
          titleColor: Colors.grey[850],
          subtitle: "Lorem ipsum dolor sit amet, consectetur",
          subTitleColor: Colors.grey[850],
          backgroundColor: Colors.grey[50],
          onTap: () => print('THIRD CHILD'),
        ),
        MenuItem(
          child: Image.asset('assets/schemes_icon.png', color: Colors.white),
          title: "List",
          titleColor: Colors.white,
          subtitle: "Lorem ipsum dolor sit amet, consectetur",
          subTitleColor: Colors.white,
          backgroundColor: Colors.pinkAccent,
          onTap: () => print('FOURTH CHILD'),
        ),
        MenuItem(
          child: Image.asset('assets/customers_icon.png', color: Colors.grey[850]),
          title: "Team",
          titleColor: Colors.grey[850],
          subtitle: "Lorem ipsum dolor sit amet, consectetur",
          subTitleColor: Colors.grey[850],
          backgroundColor: Colors.grey[50],
          onTap: () => print('THIRD CHILD'),
        ),
        MenuItem(
          child: Image.asset('assets/profile_icon.png', color: Colors.white),
          title: "Profile",
          titleColor: Colors.white,
          subtitle: "Lorem ipsum dolor sit amet, consectetur",
          subTitleColor: Colors.white,
          backgroundColor: Colors.blue,
          onTap: () => print('FOURTH CHILD'),
        )
      ]
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Boom Menu Example')),
      body: buildBody(),
      floatingActionButton: buildBoomMenu(),
    );
  }
}

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  flutter_boom_menu: ^1.0.2

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:flutter_boom_menu/flutter_boom_menu.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
87
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
100
Overall:
Weighted score of the above. [more]
93
Learn more about scoring.

We analyzed this package on Jul 9, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.8.4
  • pana: 0.13.14
  • Flutter: 1.17.5

Analysis suggestions

Package does not support Flutter platform linux

Because:

  • package:flutter_boom_menu/flutter_boom_menu.dart that declares support for platforms: android, ios

Package does not support Flutter platform macos

Because:

  • package:flutter_boom_menu/flutter_boom_menu.dart that declares support for platforms: android, ios

Package does not support Flutter platform web

Because:

  • package:flutter_boom_menu/flutter_boom_menu.dart that declares support for platforms: android, ios

Package does not support Flutter platform windows

Because:

  • package:flutter_boom_menu/flutter_boom_menu.dart that declares support for platforms: android, ios

Package not compatible with SDK dart

Because:

  • flutter_boom_menu that is a package requiring null.

Health suggestions

Format lib/flutter_boom_menu.dart.

Run flutter format to format lib/flutter_boom_menu.dart.

Format lib/src/animated_child.dart.

Run flutter format to format lib/src/animated_child.dart.

Format lib/src/animated_floating_button.dart.

Run flutter format to format lib/src/animated_floating_button.dart.

Format lib/src/boom_menu.dart.

Run flutter format to format lib/src/boom_menu.dart.

Format lib/src/boom_menu_item.dart.

Run flutter format to format lib/src/boom_menu_item.dart.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.1.0 <3.0.0
flutter 0.0.0
Transitive dependencies
collection 1.14.12 1.14.13
meta 1.1.8 1.2.1
sky_engine 0.0.99
typed_data 1.1.6 1.2.0
vector_math 2.0.8 2.1.0-nullsafety
Dev dependencies
flutter_test