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

KFDrawer control via InheritedWidget

KFDrawer provides menu control from anywhere in the widget tree via a static method:

KFDrawer.of(context)?.open();   // Open drawer
KFDrawer.of(context)?.close();  // Close drawer
KFDrawer.of(context)?.toggle(); // Toggle drawer

Example: menu button for open/close

IconButton(
  icon: Icon(Icons.menu),
  onPressed: () {
    KFDrawer.of(context)?.toggle();
  },
)

Example: change page and close drawer from any widget

onTap: () {
  widget.controller?.page = MyPage();
  KFDrawer.of(context)?.close();
}

• No need to pass callbacks or controllers manually.
• Drawer control is available in any KFDrawer descendant.
• Everything works via Flutter context—clean, modern, convenient.

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,
          ),
        ),
      ),
    );
  }
}