Flutter Drawer Widget

The GFAppBar automatically displays an appropriate IconButton to show the GFDrawer when a GFDrawer is available in the Scaffold.

Usage

The simple code of a basic GFDrawer is as shown below 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,
      ),
    ],
  ),
),

The look and feel of the GFDrawer can be customized using the GFDrawer properties.

Custom Properties

Name	Description
child	displays the drawer items
color	defines the background color of the drawer
gradient	gradient can be used for transforming gradient shaders without applying the same transform to the entire canvas.
backgroundImage	background image can be added to the drawer
colorFilter	composited layer that applies a color filter to its children
elevation	controls the size of the shadow below the drawer.

GF Drawer Header

The GF Drawer Header component is a header that identifies the app's user. This can be placed inside GFDrawer child.

Usage

The simple code of a basic GFDrawerHeader with GFDrawer is as shown below that help you build an awesome Flutter Drawer Header Widget in your app.

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('user@userid.com'),
                ],
              ),
            ),
            ListTile(
              title: Text('Item 1'),
              onTap: null,
            ),
            ListTile(
              title: Text('Item 2'),
              onTap: null,
            ),
          ],
        ),
      ),

The look and feel of the GFDrawerHeader can be customized using the GFDrawerHeader properties.

Custom Properties

Name	Description
decoration	defines the background color of the drawer header
margin	refers to the margin around the drawer header
child	widget to be placed inside the drawer header, inset by the [padding]
currentAccountPicture	widget placed in the upper-left corner that represents the current user's account
otherAccountsPictures	list of widgets that represent the current user's other accounts
duration	the duration for animations of the [decoration]
curve	the curve for animations of the [decoration]