Hello Developers,

This tutorial will guide you through the knowledge of Flutter Scaffold. Let me explain first.

The scaffold is a widget that gives the flutter a structure. The scaffold widget lets us implement many useful visual components. Some of the components are the app bar, bottom navigation bar, navigation drawer, floating action button, bottom sheets, and many more. It also helps us give the app some styling such as background color.

const Scaffold({  
  Key key,  
  this.appBar,  
  this.body,  
  this.floatingActionButton,  
  this.floatingActionButtonLocation,  
  this.persistentFooterButtons,  
  this.drawer,  
  this.endDrawer,  
  this.bottomNavigationBar,  
  this.bottomSheet,  
  this.floatingActionButtonAnimator,  
  this.backgroundColor,  
  this.resizeToAvoidBottomPadding = true,  
  this.primary = true,  
})

We can easily say that Scaffold is the skeleton of the view. It occupies the whole device screen. To show the app bar of a view we can declare the AppBar widget as a property of Scaffold. An AppBar is a horizontal bar that sits on the very top of the screen. An AppBar contains a title property where we can call the Text widget which will show the title of the screen. We can also give some styling of the text. AppBar also has some other properties like elevation, background color, foreground color, leading widget, etc.

Widget build(BuildContext context) {
   return Scaffold(
     appBar: AppBar(title: const Text('Scaffold Example')),
     body: const Center(
       child: Text(
         "Hello World!",
         style: TextStyle(
           color: Colors.black,
           fontSize: 50,
           fontWeight: FontWeight.bold,
         ),
       ),
     ),
   );
 }

The most important property of the Scaffold is the body. The body holds the main contents of the screen. In the body property, we can define a lot of widgets like Column, SafeArea, Container, and SingleChildScrollView which acts like the parent of all other widgets. We define other data visualization and functional widgets like Text, Image, and ElevatedButton as the child of the widgets mentioned in the previous line.

The bottom navigation bar acts like a menu for the screen. It sits on the bottom of the screen. We can define some icon buttons and by pressing those buttons we can call functions. Nowadays most apps use this bottom navigation bar to make the app easier to interact with.

bottomNavigationBar: BottomNavigationBar(
        currentIndex: 0,
        items: const [
          BottomNavigationBarItem(
            label: "Home",
            icon: Icon(Icons.home_rounded),
          ),
          BottomNavigationBarItem(
            label: "Search",
            icon: Icon(Icons.search),
          ),
          BottomNavigationBarItem(
            label: "Profile",
            icon: Icon(Icons.account_circle),
          ),
        ],
        onTap: (int index) {}),

The drawer is a slidable side panel of the app that contains drawer menus. These drawer menus help us to navigate between screens of the app. Almost all the apps contain multiple screens. The drawer makes it easier to navigate between them. The drawer can be swiped from the left or right side of the screen.

drawer: Drawer(
  child: ListView(
    children: const <Widget>[
      DrawerHeader(
        decoration: BoxDecoration(
          color: Colors.blue,
        ),
        child: Text(
          'Header',
          style: TextStyle(
            color: Colors.white,
            fontSize: 20,
          ),
        ),
      ),
      ListTile(
        title: Text('Item 1'),
        onTap: () {},
      ),
      ListTile(
        title: Text('Item 2'),
        onTap: () {},
      ),
    ],
  ),
),

A floating action button is a button that usually floats on the bottom right corner of the screen. In the on-pressed property of the Floating action button, we can trigger a function that can start certain events of the app.

Scaffold(
      appBar: AppBar(
        title: const Text('Floating Action Button'),
      ),
      body: const Center(child: Text('Press the button below!')),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // Add your onPressed code here!
        },
        backgroundColor: Colors.green,
        child: const Icon(Icons.navigation),
      ),
    );

Hope this might help you in the journey of Flutter Development.

Read More: Want to know about Flutter Container?