# Flutter Drawer Widget

GW Drawer

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]
Last Updated: 10/23/2020, 4:54:08 PM