Flutter drawer dynamic ready side menu
kf_drawer
Flutter side menu (Drawer).
Getting Started
Use KFDrawer
widget as Scaffold
's body with items property (List<KFDrawerItem>
)
you should define onPressed on KFDrawerItem
KFDrawer
properties
- controller (optional)
- header
- footer
- items (optional if controller defined)
- decoration
or set drawer items with controller (KFDrawerController
)
define page property on KFDrawerItem
KFDrawerController
properties
- initialPage
- items
Drawer page widget should extend KFDrawerContent
widget
You can use ClassBuilder
for string based class init
Example
class MainWidget extends StatefulWidget {
@override
_MainWidgetState createState() => _MainWidgetState();
}
class _MainWidgetState extends State<MainWidget> {
KFDrawerController _drawerController;
@override
void initState() {
super.initState();
_drawerController = KFDrawerController(
initialPage: ClassBuilder.fromString('MainPage'),
items: [
KFDrawerItem.initWithPage(
text: Text('MAIN', style: TextStyle(color: Colors.white)),
icon: Icon(Icons.home, color: Colors.white),
page: MainPage(),
),
KFDrawerItem.initWithPage(
text: Text(
'CALENDAR',
style: TextStyle(color: Colors.white),
),
icon: Icon(Icons.calendar_today, color: Colors.white),
page: CalendarPage(),
),
KFDrawerItem.initWithPage(
text: Text(
'SETTINGS',
style: TextStyle(color: Colors.white),
),
icon: Icon(Icons.settings, color: Colors.white),
page: ClassBuilder.fromString('SettingsPage'),
),
],
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: KFDrawer(
controller: _drawerController,
header: Align(
alignment: Alignment.centerLeft,
child: Container(
padding: EdgeInsets.symmetric(horizontal: 16.0),
width: MediaQuery.of(context).size.width * 0.6,
child: Image.asset(
'assets/logo.png',
alignment: Alignment.centerLeft,
),
),
),
footer: KFDrawerItem(
text: Text(
'SIGN IN',
style: TextStyle(color: Colors.white),
),
icon: Icon(
Icons.input,
color: Colors.white,
),
onPressed: () {
Navigator.of(context).push(CupertinoPageRoute(
fullscreenDialog: true,
builder: (BuildContext context) {
return AuthPage();
},
));
},
),
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: [Color.fromRGBO(255, 255, 255, 1.0), Color.fromRGBO(44, 72, 171, 1.0)],
tileMode: TileMode.repeated,
),
),
),
);
}
}