Animated Drawer Menu in Flutter
A beautifully animated drawer menu in flutter. Easy to implement and easy to use. Follow the steps to implement this drawer menu.
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
Demo

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, ), ), ), ); } }
Credits:
This is developed by qqmikey
Download this project from the below link.
https://github.com/qqmikey/kf_drawer/archive/refs/heads/master.zip
You can visit original source page from the below link:
https://github.com/qqmikey/kf_drawer