adaptive_navrail 0.0.7 adaptive_navrail: ^0.0.7 copied to clipboard
Adaptive Navigation Rail
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,
},
]
}
]
Map the JSON menu into Object model
List<DrawerItem> drawerMenu = [];
@override
void initState() {
drawerMenu =
kMenu.map<DrawerItem>((json) => DrawerItem.fromJson(json)).toList();
super.initState();
}
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'),
),
],
))
],
),
),
);
}