Flutter – KF Drawer

In many Android Applications, you may see Sidebar which has some items that perform some tasks like showing the profile UI, and displaying the About us page, In the application world it is called Drawer. Drawer is the side navigation bar that is used to access the different pages of the Application. It is represented by three horizontal parallel lines on the upper end of the scaffold. It has a horizontal movement from the edge of the Scaffold that navigates the link to different routes in the flutter app. In this Project, we are going to see the Customizable Drawer called KF Drawer, Which has a beautiful user interface. A sample video is given below to get an idea about what we are going to do in this article. 

Use KFDrawer widget as Scaffold’s body with items property (List<KFDrawerItem>) 

Properties of KF Drawer:

1. KFDrawer properties
2. controller (optional)
3. header
4. footer
5. items (optional if controller defined)
6. decoration

Step by Step Implementation

Step 1: Create a New Project in Android Studio

To set up Flutter Development on Android Studio please refer to Android Studio Setup for Flutter Development, and then create a new project in Android Studio please refer to Creating a Simple Application in Flutter.

Step 2: Add the Dependency in the pubspec.yaml file

You can add the dependency from the bash or copy-paste the plugin.

flutter pub add kf_drawer 

This will add something like this

Don’t forget to get the packages.

Note: When you are adding the dependency, the version of the plugin may be changed.

Step 3: Import the Plugin into the main.dart file

Dart

import 'package:kf_drawer/kf_drawer.dart';

Step 4: Call the initState method to handle the tabs of the drawer

Here we are creating a KFDrawerController widget.

Properties: initialPage, items 

Dart

void initState() {
  super.initState();
  _drawerController = KFDrawerController(
    initialPage: Page1(), // initial page of the app
    items: [ // drawer items
      KFDrawerItem.initWithPage(
        text: Text('Page1', style: TextStyle(color: Colors.white)),
        icon: Icon(Icons.home, color: Colors.white),
        page: Page1(),
      ),
      KFDrawerItem.initWithPage(
        text: Text('Page2', style: TextStyle(color: Colors.white)),
        icon: Icon(Icons.home, color: Colors.white),
        page: Page2(),
      ),
    ],
  );
}

Below is the full code.

Code Example

Dart

import 'package:flutter/material.dart';
import 'package:kf_drawer/kf_drawer.dart';

void main() {
  runApp(KFDrawerRun());
}

class KFDrawerRun extends StatelessWidget {
  const KFDrawerRun({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MainWidget(),
    );
  }
}

class MainWidget extends StatefulWidget {
  MainWidget({Key? key}) : super(key: key);

  @override
  _MainWidgetState createState() => _MainWidgetState();
}

class _MainWidgetState extends State<MainWidget> with TickerProviderStateMixin {
  late KFDrawerController _drawerController;

  @override
  void initState() {
    super.initState();
    _drawerController = KFDrawerController(
      initialPage: Page1(),
      items: [
        KFDrawerItem.initWithPage(
          text: Text('Page1', style: TextStyle(color: Colors.white)),
          icon: Icon(Icons.home, color: Colors.white),
          page: Page1(),
        ),
        KFDrawerItem.initWithPage(
          text: Text('Page2', style: TextStyle(color: Colors.white)),
          icon: Icon(Icons.home, color: Colors.white),
          page: Page2(),
        ),
      ],
    );
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner:false,
      home:Scaffold(
      body: KFDrawer(
       borderRadius: 30.0,
       shadowBorderRadius: 30.0,
       menuPadding: EdgeInsets.all(5.0),
       scrollable: true,
        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/gfg.png',
              alignment: Alignment.centerLeft,
            ),
          ),
        ),
        footer: KFDrawerItem(
          text: Text(
            'SIGN IN',
            style: TextStyle(color: Colors.white),
          ),
          icon: Icon(
            Icons.input,
            color: Colors.white,
          ),
        ),
        decoration: BoxDecoration(
          gradient: LinearGradient(
            begin: Alignment.topLeft,
            end: Alignment.bottomRight,
            colors: [Color.fromARGB(255, 114, 234, 106), Color.fromRGBO(44, 72, 171, 1.0)],
            tileMode: TileMode.repeated,
          ),
        ),
       ),
      ),
    );
  }
}
class Page1 extends KFDrawerContent {
  @override
  Page1State createState() => Page1State();
}

class Page1State extends State<Page1> {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Center(
        child: Column(
          children: <Widget>[
            Row(
              children: [
                ClipRRect(
                  borderRadius: BorderRadius.all(Radius.circular(32.0)),
                  child: Material(
                    shadowColor: Colors.transparent,
                    color: Colors.transparent,
                    child: IconButton(
                      icon: Icon(
                        Icons.menu,
                        color: Colors.black,
                      ),
                      onPressed: widget.onMenuPressed,
                    ),
                  ),
                ),
              ],
            ),
            Expanded(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Text('Page1'),
                ],
              ),
            ),
          ],
        ),
      ),
    );

  }
}
class Page2 extends KFDrawerContent {
  @override
  Page2State createState() => Page2State();
}

class Page2State extends State<Page2> {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Center(
        child: Column(
          children: <Widget>[
            Row(
              children: [
                ClipRRect(
                  borderRadius: BorderRadius.all(Radius.circular(32.0)),
                  child: Material(
                    shadowColor: Colors.transparent,
                    color: Colors.transparent,
                    child: IconButton(
                      icon: Icon(
                        Icons.menu,
                        color: Colors.black,
                      ),
                      onPressed: widget.onMenuPressed,
                    ),
                  ),
                ),
              ],
            ),
            Expanded(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Text('Page2'),
                ],
              ),
            ),
          ],
        ),
      ),
    );
    }
}

Output UI:

Drawer

Output: