adaptive_navrail

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