README.md

Flutter widget to create focused menu easily 🚀

---

This is an easy to implement package for adding Focused Menu to Flutter Applications

---

Getting Started

Fist install the dependency

Add dependency

dependencies:
  focused_menu: CURRENT_VERSION

Import package

import 'package:focused_menu/focused_menu.dart';

Usage

To Use, simply Wrap the Widget you want to add Focused Menu to, with FocusedMenuHolder:

FocusedMenuHolder(
  menuItems: <FocusedMenuItem>[
    FocusedMenuItem(
      title: Text("This is a button"),
      trailing: Icon(Icons.open_in_new),
      onPressed: () {},
    ),
  ],
  child: CircleAvatar(
    child: Image.asset("assets/images/dp_default.png"),
  ),
),

---

Customizations

In order to customize your focused menu you can change any of the available attributes

FocusedMenuHolder(
  menuOffset: 0,
  controller: _avatarController,
  animateMenuItems: true,
  blurBackgroundColor: Colors.pink,
  blurSize: 20,
  bottomOffsetHeight: 20,
  duration: Duration(milliseconds: 500),
  menuBoxDecoration:
      BoxDecoration(borderRadius: BorderRadius.circular(20)),
  menuItemExtent: 60,
  menuWidth: 200,
  openWithTap: true,
  enableMenuScroll: false,
  toolbarButtons: [
    ToolbarButtonItem(buttonIcon: Icon(Icons.delete,), onPressed: () {}, buttonIconColor: Colors.red),
    ToolbarButtonItem(buttonIcon: Icon(Icons.share), onPressed: () {}, buttonIconColor: Colors.blue),
  ],
  onOpened: () => print('Opened'),
  onClosed: () => print('onClosed'),
  onPressed: () {},
  menuItems: <FocusedMenuItem>[
    FocusedMenuItem(
      backgroundColor: Colors.green,
      title: Text("This is a button"),
      trailing: Icon(Icons.open_in_new),
      onPressed: () {},
    ),
  ],
  child: CircleAvatar(
    child: Image.asset("assets/images/dp_default.png"),
  ),
),

Thanks to all contributors

License

MIT