# 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] |