Neat little tricks for Scaffold in Flutter.

This document provides a detailed understanding for Flutter beginners to understand whats are Scaffolds and how they can make their apps look good visually by using Scaffold and its properties.

Understanding Scaffold :

Scaffold helps you implementing a basic layout structure for visual representation of the app.The Scaffold class provides APIs for showing AppBars, Drawers and Bottom Sheets.

Getting Started :

The Scaffold has three main parts and are optional. Your application design may have these fields optional as per the system design.

The three main parts of Scaffold are :

1. App Bar
2. Drawer
3. Bottom sheet.

Let us understand each concept step by step. Let’s create a Flutter Project named “scaffold_basics” and clear the default code until we’re left with this :

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Scaffold Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("Scaffold Demo"),
        centerTitle: true,
      ),
      body: new Center(
      ),
    );
  }
}

We’ll go from top to bottom when recreating the UI to make it simpler.

So first up,

The AppBar

This is the AppBar of the design:

This is the AppBar of the design:

It consists of a title.

Let’s try to code the appBar:

appBar: new AppBar(
  title: new Text("Scaffold Demo", 
  style: TextStyle(fontSize: 16.0),
                  ),

We can change the size of the AppBar by using PreferredSizeWidget.

appBar: PreferredSize(
   preferredSize: Size.fromHeight(50.0), // here the desired height
    child: AppBar(title: Text('Scaffold Demo'),
),

Re-sizing the AppBar.

We can change the Color of the AppBar using the background color property :

backgroundColor: Colors.deepOrange,

Change in background color.

2. Drawer : Drawer is a vertical panel that is typically displayed to the left of the body (and often hidden on phones) using the drawer property.To add a drawer icon, simply add :

drawer: Drawer(),

to the Scaffold. This not only adds a drawer icon to your AppBar, but also adds a fully functional drawer.

Drawer example.

3. Bottom Sheets : It is an overlay typically shown near the bottom of the app. A bottom sheet can either be persistent, in which case it is shown using the ScaffoldState.showBottomSheet method, or modal, in which case it is shown using the showModalBottomSheet function.

Modal Bottom Sheets : When a Modal Bottom Sheet is displayed, it acts as a blocking widget — this means that it stops the user from interacting with other content within your application. This can be seen as an alternative to displaying some form of menu or dialog to the user. Pressing back or touching outside of the bottom sheet will dismiss it from view.

We can create and show a bottom sheet by using the showModalBottomSheet function, when this is done the internals of the class use the Navigator class to push this sheet as a route onto the navigator for the application.

showModalBottomSheet<void>(context: context, 
  builder: (BuildContext context) {
   return new Column(
      mainAxisSize: MainAxisSize.min,
      children: <Widget>[
      new ListTile(
          leading: new Icon(Icons.music_note),
          title: new Text('Music'),
          onTap: () => ...,),
       new ListTile(
          leading: new Icon(Icons.photo_album),
          title: new Text('Photos'),
          onTap: () => ...,),
       new ListTile(
         leading: new Icon(Icons.videocam),
         title: new Text('Video'),
         onTap: () => ...,),],
);});});

Modal Bottom Sheet.

Persistent Bottom Sheet :

These sheets can be used to display context aware content and will remain in place whilst the user is navigating around. Press back or dragging the bottom sheet downwards will pop the sheet back down until it is next prompted to be shown by the user. However, at this point it is still always kept in view ready for the user to pop back open again.

When we want to use the persistent bottom sheet we need to do things a little bit different. First of all we need to create a new GlobalKey instance to provide us with access to our Scaffold which will be used to display our persistent bottom sheet.

final GlobalKey<ScaffoldState> _scaffoldKey = new  GlobalKey<ScaffoldState>();

We then need to assign this key to our Scaffold like so:

return new Scaffold(
key: _scaffoldKey,
....

And then we can use the Scaffold key to retrieve the current state and show our persistent bottom sheet:

_scaffoldKey.currentState.showBottomSheet<Null>((BuildContext context) {
 return new Container(
child: new Column(
 mainAxisSize: MainAxisSize.min,
  children: <Widget>[
    new Padding( padding: const EdgeInsets.all(16.0),
     child: new Text('Persistent header for bottom bar!', textAlign: TextAlign.left,)),
          new Text('Then here there will likely be some other content ''which will be displayed within the bottom bar', textAlign: TextAlign.left,),],
));});

We need this additional setup as the persistent bottom sheet works a little differently than the modal bottom sheet. The modal bottom sheet is essentially a blocking dialog, so it can just be displayed on the screen to the user. But because the persistent bottom sheet needs to slide in and out of view, complimenting the current context, it needs to be aware of the Scaffold in which it is currently being displayed in.

Persistent Bottom Sheet

Floating Action Button :

A floating action button is a circular icon button that hovers over content to promote a primary action in the application. Floating action buttons are most commonly used in the Scaffold.floatingActionButton field.

Use at most a single floating action button per screen. Floating action buttons should be used for positive actions such as “create”, “share”, or “navigate”.

If the onPressed callback is null, then the button will be disabled and will not react to touch.

floatingActionButton: new FloatingActionButton( 
    elevation: 0.0, 
    child: new Icon(Icons.check), 
    backgroundColor: new Color(0xFFE57373), 
    onPressed: (){} 
) );

Floating Action Button

Floating Action Button Location :

You can adjust the location of the floating action button as :

floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,

This helps you adjusting the location of the floating button at the center.

Floating Action Button : Center

Persistent Footer Button :

A set of buttons that are displayed at the bottom of the scaffold.

Typically this is a list of FlatButton widgets. These buttons are persistently visible, even if the body of the scaffold scrolls.

These widgets will be wrapped in a ButtonBar.

The persistentFooterButtons are rendered above the bottomNavigationBar but below the body.

bottomNavigationBar: new BottomNavigationBar(
        items: [
          new BottomNavigationBarItem(
            icon: new Icon(Icons.add),
            title: new Text("Add"),
          ),
          new BottomNavigationBarItem(
            icon: new Icon(Icons.edit),
            title: new Text("Edit"),
          ),
          new BottomNavigationBarItem(
            icon: new Icon(Icons.delete),
            title: new Text("Delete"),
          ),
        ],
      ),

Thank you for reading this document. Feel free to mention your views about this document. Be sure to leave a few claps if you enjoyed it, and see you in the next one.

Happy Fluttering!