Download this source code for
5 USD


Download this source code for
5 USD


Download this source code for
5 USD


Download this source code for
5 USD

kf drawer

flutter side menu (drawer).

drawer_demo

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

Download this source code for
5 USD


Download this source code for
5 USD


Download this source code for
5 USD


Download this source code for
5 USD

Comments are closed.