menu_button 1.2.1

  • Readme
  • Changelog
  • Example
  • Installing
  • 93

menu_button #

pub package

A popup menu button widget with handsome design and easy to use.

Installations #

Add menu_button: ^1.2.1 in your pubspec.yaml dependencies. And import it:

import 'package:menu_button/menu_button.dart';

How to use #

Simply create a MenuButton widget and pass the required params:

MenuButton(
  child: button,// Widget displayed as the button
  items: items,// List of your items
  topDivider: true,
  popupHeight: 200, // This popupHeight is optional. The default height is the size of items
  scrollPhysics: AlwaysScrollableScrollPhysics(), // Change the physics of opened menu (example: you can remove or add scroll to menu)
  itemBuilder: (value) => Container(
    width: 83,
    height: 40,
    alignment: Alignment.centerLeft,
    padding: const EdgeInsets.symmetric(horizontal: 16),
    child: Text(value)
  ),// Widget displayed for each item
  toggledChild: Container(
    color: Colors.white,
    child: button,// Widget displayed as the button,
  ),
  divider: Container(
    height: 1,
    color: Colors.grey,
  ),
  onItemSelected: (value) {
    selectedItem = value;
    // Action when new item is selected
  },
  decoration: BoxDecoration(
    border: Border.all(color: Colors.grey[300]),
    borderRadius: const BorderRadius.all(Radius.circular(3.0)),
    color: Colors.white
  ),
  onMenuButtonToggle: (isToggle) {
    print(isToggle);
  },
)

Here is the widget used for the child, you can use your own custom widget it's just an example.

final Widget button = SizedBox(
  width: 83,
  height: 40,
  child: Padding(
    padding: const EdgeInsets.only(left: 16, right: 11),
    child: Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: <Widget>[
        Flexible(
          child: Text(
            selectedItem,
            style: TextStyle(color: Colors.yellow),
            overflow: TextOverflow.ellipsis,
          ),
        ),
        SizedBox(
          width: 12,
          height: 17,
          child: FittedBox(
            fit: BoxFit.fill,
            child: Icon(
              Icons.arrow_drop_down,
              color: Colors.grey,
            )
          )
        ),
      ],
    ),
  ),
);

For a more detail example please take a look at the example folder.

Example #

Menu button with 3 items:

- #

If something is missing, feel free to open a ticket or contribute!

1.2.1 - 2020-06-16 #

Fix width when MenuButton is on Expanded widget

1.2.0+1 - 2020-06-16 #

MenuButton now display the decoration color everywhere

1.2.0 - 2020-06-16 #

Breaking change

  • Default value of dontShowTheSameItemSelected is now false If you are using it in previous version with its default value please do not forget to add the property to true

1.1.1 - 2020-05-19 #

Adjust offset depending on verticalMenuPadding

1.1.0 - 2020-05-18 #

Add menu button without showing the current item Add a label property if needed

1.0.0 - 2020-05-08 #

Add crossEdge & edgeMargin configuration Update example

0.2.1 - 2020-04-14 #

Define scrollPhysics in MenuButton is now available

0.1.1+1 - 2020-03-25 #

Add onMenuButtonToggle callback to find out if menu button is open or not

0.1.0+1 - 2020-01-20 #

Fix README.md

0.1.0 - 2020-01-20 #

First version of menu_button available

0.0.2 - 2020-01-20 #

Initial version

example/lib/main.dart

import 'package:example/usages/edge-menu-button.dart';
import 'package:example/usages/label-menu-button.dart';
import 'package:example/usages/menu-button-without-showing-same-selected-item.dart';
import 'package:example/usages/normal-menu-button.dart';
import 'package:example/usages/scroll-menu-button.dart';
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Menu Button Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Menu Button Example'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    final ThemeData theme = Theme.of(context);

    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: SingleChildScrollView(
        child: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Padding(
                padding: const EdgeInsets.only(bottom: 12),
                child: NormalMenuButton(
                  theme: theme,
                ),
              ),
              Padding(
                padding: const EdgeInsets.only(bottom: 12),
                child: ScrollPhysicsMenuButton(
                  theme: theme,
                ),
              ),
              Padding(
                padding: const EdgeInsets.only(bottom: 12),
                child: EdgeMenuButton(
                  theme: theme,
                ),
              ),
              Padding(
                padding: const EdgeInsets.only(bottom: 12),
                child: MenuButtonWithoutShowingSameSelectedIitem(
                  theme: theme,
                ),
              ),
              Padding(
                padding: const EdgeInsets.only(bottom: 12),
                child: MenuButtonLabel(
                  theme: theme,
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Use this package as a library

1. Depend on it

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


dependencies:
  menu_button: ^1.2.1

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:menu_button/menu_button.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
86
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 8, 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 not compatible with SDK dart

Because:

  • menu_button that is a package requiring null.

Health issues and suggestions

Document public APIs. (-0.21 points)

36 out of 37 API elements have no dartdoc comment.Providing good documentation for libraries, classes, functions, and other API elements improves code readability and helps developers find and use your API.

Format lib/menu_button.dart.

Run flutter format to format lib/menu_button.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
Dev dependencies
flutter_test