flutter-tutorial

Flutter Scaffold

The Scaffold is a Flutter widget that implements the core visual layout framework of material design. It’s quick to make a general-purpose mobile app, and it comes with practically everything we’ll need to make a working and responsive Flutter app. This widget has the ability to take up the entire device screen. In other words, it is primarily responsible for establishing a foundation for the app screen on which the child widgets can hold and render. Drawer, SnackBar, BottomNavigationBar, AppBar, FloatingActionButton, and many other widgets or APIs are available.

Properties of Scaffold Class

appBar

It displays a horizontal bar which mainly placed at the top of the Scaffold. appBar uses the widget AppBar which has its own properties like elevation, title, brightness, etc.

Widget build(BuildContext context)
{
  return Scaffold(
    appBar: AppBar(
      title: Text('Learn Code Zone'),
    ),

body

It will display the main or primary content in the Scaffold. It is below the appBar and under the floatingActionButton. The widgets inside the body are at the left-corner by default.

Widget build(BuildContext context)
{
  return Scaffold(
    appBar: AppBar(
      title: Text('Learn Code Zone'),
    ),
    body: Center(
      child: Text("Welcome to Learn Code Zone!!!",
        style: TextStyle(
          color: Colors.black,
          fontSize: 40.0,
        ),
      ),
    ),

floatingActionButton

FloatingActionButton is a button that is placed at the right bottom corner by default. FloatingActionButton is an icon button that floats over the content of the screen at a fixed place. If we scroll the page its position won’t change, it will be fixed.

Widget build(BuildContext context)
{
  return Scaffold(
      appBar: AppBar(title: Text('Learn Code Zone')),
      body:  Center(
        child: Text("Welcome to Learn Code Zone!!!",
          style: TextStyle(
            color: Colors.black,
            fontSize: 40.0,
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton (
          elevation: 10.0,
          child: Icon(Icons.add),
          onPressed: (){
        // action on button press
          }
      );
}

Here the elevation property is used to give a shadow effect to the button. Icon is used to put the icon of the button using some preloaded icons in flutter SDK. The onPressed() is a function that will be called when the button is pressed and the statements inside the function will be executed.

drawer

drawer is a slider menu or a panel which is displayed at the side of the Scaffold. The user has to swipe left to right or right to left according to the action defined to access the drawer menu. In the Appbar, an appropriate icon for the drawer is set automatically at a particular position. The gesture to open the drawer is also set automatically. It is handled by the Scaffold.

drawer: Drawer(
          child: ListView(
        children: const <Widget>[
          DrawerHeader(
            decoration: BoxDecoration(
              color: Colors.green,
            ),
            child: Text(
              'Learn code zone',
              style: TextStyle(
                color: Colors.green,
                fontSize: 24,
              ),
            ),
          ),
          ListTile(
            title: Text('Item 1'),
          ),
          ListTile(
            title: Text('Item 2'),
          ),
        ],
      ),
    ),

As a parent widget we took ListView and inside it, we divided the panel into two parts, Header and Menu.DrawerHeader is used to modify the header of the panel. In header we can display icon or details of user according to the application. We have used ListTile to add the items to the menu.

bottomNavigationBar

bottomNavigationBar is like a menu at the bottom of the Scaffold. We have seen this navigationbar in most of the applications. We can add multiple icons or texts or both in the bar as items.

bottomNavigationBar
    : BottomNavigationBar(
          currentIndex : 0,
          fixedColor
          : Colors.green,
            items
          : [
              BottomNavigationBarItem(
                  title
                  : Text("Home"),
                    icon
                  : Icon(Icons.home), ),
              BottomNavigationBarItem(
                  title
                  : Text("Search"),
                    icon
                  : Icon(Icons.search), ),
              BottomNavigationBarItem(
                  title
                  : Text("Profile"),
                    icon
                  : Icon(Icons.account_circle), ),
          ],
            onTap
          : (int indexOfItem){
 
          }),

RECOMMENDED ARTICLES





Leave a Reply

Your email address will not be published.