GF Drawer

The GFDrawer component is a navigation drawer that slides in from the side of the current view. GFDrawer can be the perfect option to provide common navigation options.

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.
import 'package:getflutter/getflutter.dart';
​
GFDrawer(
  child: ListView(
    padding: EdgeInsets.zero,
    children: <Widget>[
      ListTile(
        title: Text('Item 1'),
        onTap: null,
      ),
      ListTile(
         title: Text('Item 2'),
         onTap: null,
      ),
    ],
  ),
),
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.
  import 'package:getflutter/getflutter.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,
            ),
          ],
        ),
      ),
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 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]
​

GF Typography

GF Accordion

Last updated 4 months ago

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.

Name	Description
decoration	defines the background color of the drawer header
margin	refers to 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]