Description:

adaptive navrail

adaptive_navrail #
A Simple Adaptive Navrail with one sub level menu. In expanded state it will use ExpansionTile to group the sub menus. In Navrail state it will show all submenus. You can individually select group of menus to be in expanded state initially.
Getting Started #
Create a menu in json format
const kMenu = [
{
"code": "100",
"title": "Dashboard",
"icon": Icons.dashboard_outlined,
"expanded": false,
"submenu": [],
},
{
"code": "200",
"title": "Master",
"icon": Icons.folder_outlined,
"expanded": true,
"submenu": [
{
"code": "201",
"title": "Sub Menu 1",
"icon": Icons.contact_page_outlined,
},
{
"code": "202",
"title": "Sub Menu 2",
"icon": Icons.email_outlined,
},
]
},
{
"code": "300",
"title": "Categories",
"icon": Icons.folder_outlined,
"expanded": false,
"submenu": [
{
"code": "301",
"title": "Sub Menu 1",
"icon": Icons.category_outlined,
},
{
"code": "302",
"title": "Sub Menu 2",
"icon": Icons.group_outlined,
},
]
}
]
copied to clipboard
Map the JSON menu into Object model
List<DrawerItem> drawerMenu = [];

@override
void initState() {
drawerMenu =
kMenu.map<DrawerItem>((json) => DrawerItem.fromJson(json)).toList();
super.initState();
}
copied to clipboard
Create the instance of AdaptiveNavrail
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(brightness: Brightness.dark),
home: Scaffold(
body: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
AdaptiveNavrail(
isExpanded: true,
isDense: true,
drawerItems: drawerMenu,
onDrawerTap: (value) {
debugPrint('You selected $value');
},
),
Flexible(
child: Column(
children: [
AppBar(
title: const Text('AdaptiveNavrail'),
),
const ListTile(
title: Text('Welcome'),
),
],
))
],
),
),
);
}
copied to clipboard

License

For personal and professional use. You cannot resell or redistribute these repositories in their original state.

Share

• Share on Facebook
• Share on Twitter