pop_bottom_menu 1.0.0 pop_bottom_menu: ^1.0.0 copied to clipboard
A bottom sheet menu inspired from instagram
Pop Bottom Menu #
A flutter copy of the bottom sheet menu you can find on Instagram.
How to use #
After adding the dependancy to your pubspec.yaml
, import it in your class :
import 'package:pop_bottom_menu/pop_bottom_menu.dart';
Return the PopBottomMenu()
in the builder of a showModalBottomSheet
like that :
(don't forget to add backgroundColor: Colors.transparent
)
void _showMenu() {
showModalBottomSheet(
backgroundColor: Colors.transparent,
context: context,
builder: (context) {
return PopBottomMenu(
title: TitlePopBottomMenu(
label: "yofardev",
),
items: [
ItemPopBottomMenu(
onPressed: () => print("friend list"),
label: "Add to Close Friends List",
icon: Icon(
Icons.star,
color: Colors.grey,
),
),
ItemPopBottomMenu(
onPressed: () => print("notifications"),
label: "Notifications",
icon: Icon(
Icons.navigate_next,
color: Colors.grey,
),
),
ItemPopBottomMenu(
onPressed: () => print("mute"),
label: "Mute",
icon: Icon(
Icons.navigate_next,
color: Colors.grey,
),
),
ItemPopBottomMenu(
onPressed: () => print("unfollow"),
label: "Unfollow",
),
],
);
},
);
}
}
Then just call the function from where you want, like from a button :
class PopBottomMenuExample extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Padding(
padding: const EdgeInsets.all(20),
child: Container(
color: Colors.blue,
width: double.infinity,
child: FlatButton(
onPressed: () => _showMenu(),
child: Text("Open Pop Bottom Menu",
style: TextStyle(
fontWeight: FontWeight.bold, color: Colors.white)),
),
),
),
);
}
To close the menu, use Navigator.of(context).pop()