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_VERSIONImport 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,
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