This is an easy to implement package for adding Focused Menu to Flutter Applications
Fist install the dependency
dependencies:
focused_menu: CURRENT_VERSIONimport 'package:focused_menu/focused_menu.dart';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"),
),
),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