Flutter Drawer - A sliding widget that generally contains important links of the application.

Flutter Drawer is a side screen widget which is invisible to you mobile app. Generally it might occupies half of the screen when displayed.‌

Flutter Drawer Widget:

Flutter uses a drawer widget to create a slide able left menu . We can customize the menu layout by using its property . Now a days tabs are consuming more space, thats the reason people are becoming more familiar with drawer and it also become the primary navigation method.

In Flutter, we can define drawer inside scaffold. Therefore before adding a navigation drawer we need to define a Scaffold.When we creating a sample flutter app, it comes with the default scaffold.

GetWidget Drawer Widget for Flutter:

It allows to speed up your Flutter app development by 20-30%. It has almost all widget that allows you to enhance your Flutter UI design and speed up flutter development with fully customizable features.

Now here is i am going to talk about what is GetWidget Drawer widget and how we implement this on Flutter app to build awesome Flutter Drawer widget for an app.

GetWidget Drawer is not only a simple sidebar . we can customize it according to us.

Basic GFDrawer:

Basic GFDrawer will slides in and out with having a container body.The appearance of the GFDrawer can be customized using the GFDrawer properties. we can use the below code to build the Flutter Drawer Widget.

import 'package:getwidget/getwidget.dart';

GFDrawer(
  child: ListView(
    padding: EdgeInsets.zero,
    children: <Widget>[
      ListTile(
        title: Text('Item 1'),
        onTap: null,
      ),
      ListTile(
         title: Text('Item 2'),
         onTap: null,
      ),
    ],
  ),
),

GFDrawer Header:

Header is a simple widget where we can use any component to display and modify according to us. The given code of a basic GFDrawerHeader with GFDrawer is as shown below that help you to build a Flutter Drawer Header Widget.

import 'package:getwidget/getwidget.dart';    

      GFDrawer(
        child: ListView(
          padding: EdgeInsets.zero,
          children: <Widget>[
            GFDrawerHeader(
              currentAccountPicture: GFAvatar(
                radius: 80.0,
                backgroundImage: NetworkImage("https://cdn.pixabay.com/photo/2017/12/03/18/04/christmas-balls-2995437_960_720.jpg"),
              ),
              otherAccountsPictures: <Widget>[
                Image(
                  image: NetworkImage("https://cdn.pixabay.com/photo/2019/12/20/00/03/road-4707345_960_720.jpg"),
                  fit: BoxFit.cover,
                ),
                GFAvatar(
                  child: Text("ab"),
                )
              ],
              child: Column(
                mainAxisAlignment: MainAxisAlignment.start,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  Text('user name'),
                  Text('[email protected]'),
                ],
              ),
            ),
            ListTile(
              title: Text('Item 1'),
              onTap: null,
            ),
            ListTile(
              title: Text('Item 2'),
              onTap: null,
            ),
          ],
        ),
      ),

How to Start:

Now here is the guide about how we should start developing GFDrawer Widget with the use of GetWidget UI Library.

Getting started will guide you how to start building a beautiful flutter application with GetWidget UI library. You have to install the package from pub.dev, import the package in your Flutter project.

Install Package from pub.dev :

https://pub.dev/packages/getwidget

Import full package:

import 'package:getwidget/getwidget.dart';

Note: dependencies: getwidget: ^ 2.0.3

Keep playing with the pre-built UI components.‌

Conclusion:

Here we discuss what GFDrawer is? And how we can use it in our Flutter app through GetWidget Drawer component.

FAQ's:

Q. What are the customizable properties used?

Ans. The customizable properties include the color , gradient , backgroundimage , colorfilter , elevation of Drawer component . Hence customizable properties are full flexible. You can check out all custom properties on GetWidget Drawer Widget Properties.

Q. Can we resize the width of GFDrawer?

Ans: Yes, we can give the size of drawer according to us.