flutter_expandable_menu
A new Flutter package which helps developers in creating Expandable Menu.
Getting Started
| With Dark Background | Transparent Background |
|---|---|
 |
 |
Usage
To use this package :
- add the dependency to your pubspec.yaml file.
dependencies:
flutter:
sdk: flutter
flutter_expandable_menu: ^0.0.1
Quick Start:
In order to use Expandable Menu Widget in your Application you will have to Put this widget inside the Stack Widget as below.
Stack(
children: <Widget>[
Center(
child: Text(
centerText,
style: TextStyle(color: Colors.black),
),
),
FlutterExpandableMenu(
menuList: floatMenuList,
callback: this,
backgroundColor: Colors.transparent,
menuBackgroundColor: Colors.black,
menuIcon: AnimatedIcons.menu_close,
menuAlignment: Alignment.center,
outerTransitionDuration: Duration(milliseconds: 300),
menusTransitionDuration: Duration(milliseconds: 500),
menusTransitionDelay: Duration(milliseconds: 200),
),
],
)
Example – How to use:
class _RoundMenuState extends State<RoundMenu>
with TickerProviderStateMixin
implements FloatingMenuCallback {
String centerText = "Home";
final List<FloatingMenuItem> floatMenuList = [
FloatingMenuItem(
id: 1, icon: Icons.favorite, backgroundColor: Colors.deepOrangeAccent),
FloatingMenuItem(id: 2, icon: Icons.map, backgroundColor: Colors.brown),
FloatingMenuItem(id: 3, icon: Icons.email, backgroundColor: Colors.indigo),
FloatingMenuItem(id: 4, icon: Icons.event, backgroundColor: Colors.pink),
FloatingMenuItem(id: 5, icon: Icons.print, backgroundColor: Colors.green),
FloatingMenuItem(
id: 6, icon: Icons.home, backgroundColor: Colors.deepPurple),
FloatingMenuItem(
id: 7, icon: Icons.location_on, backgroundColor: Colors.blueAccent),
];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Round Menu'),
leading: new IconButton(
icon: new Icon(Icons.arrow_back, color: Colors.black),
onPressed: () => Navigator.of(context).pop(),
),
),
body: Stack(
children: <Widget>[
Center(
child: Text(
centerText,
style: TextStyle(color: Colors.black),
),
),
FlutterExpandableMenu(
menuList: floatMenuList,
callback: this,
backgroundColor: Colors.transparent,
menuBackgroundColor: Colors.black,
menuIcon: AnimatedIcons.menu_close,
menuAlignment: Alignment.center,
outerTransitionDuration: Duration(milliseconds: 300),
menusTransitionDuration: Duration(milliseconds: 500),
menusTransitionDelay: Duration(milliseconds: 200),
),
],
),
);
}
@override
void onMenuClick(FloatingMenuItem floatingMenuItem) {
if (floatingMenuItem != null) {
print("onMenuClicked : " + floatingMenuItem.id.toString());
switch (floatingMenuItem.id) {
case 1:
{
centerText = "Favorite";
}
break;
case 2:
{
centerText = "Map";
}
break;
case 3:
{
centerText = "Email";
}
break;
case 4:
{
centerText = "Event";
}
break;
case 5:
{
centerText = "Print";
}
break;
case 6:
{
centerText = "Home";
}
break;
case 7:
{
centerText = "Location";
}
break;
}
setState(() {});
}
}
}
Source github Url : https://github.com/UttamPanchasara/FlutterExpandableMenu
