Flutter Scaffold

The Scaffold widget in Flutter provides a framework for implementing basic material design layout structure. This widget is able to occupy the whole device screen. It is mainly responsible for creating a base to the app screen on which the child widgets hold on and render on the screen.

It serves as a container for the major structural components of a material design app, such as app bars, drawers, floating action buttons, and bottom navigation bars. The Flutter Scaffold class is a shortcut to set up the look and design of our app that allows us not to build the individual visual elements manually.

Constructor

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,  
})   

Properties of Flutter Scaffold

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, actions, brightness, etc.

return Scaffold(
	appBar: AppBar(
	title: const Text('This is appBar widget'),
	),

body

floatingActionButton

drawer

bottomNavigationBar

resizeToAvoidBottomInset

endDrawer

persistentFooterButton

backgroundColor

floatingActionButtonLocation

Practice with Scaffold widget

Flutter Scaffold Example 1

Flutter Scaffold

Flutter Drawer

class ScaffoldExample1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        backgroundColor: Colors.white,
        floatingActionButtonLocation: FloatingActionButtonLocation.endFloat,
        floatingActionButtonAnimator: FloatingActionButtonAnimator.scaling,
        appBar: AppBar(
          backgroundColor: Color(0xff3555c0),

          title: Text('Code Cappuccino', style: TextStyle(color: Colors.white)),
          actions: [
            IconButton(
              icon: Icon(Icons.search),
              onPressed: () {
                // Handle search button press
              },
            ),
            IconButton(
              icon: Icon(Icons.settings),
              onPressed: () {
                // Handle settings button press
              },
            ),
          ],
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              const Text(
                'Hello, Scaffold!',
                style: TextStyle(fontSize: 24.0),
              ),
              SizedBox(height: 16.0),
              ElevatedButton(
                onPressed: () {
                  // Handle button press
                },
                child: Text('Click Me'),
              ),
              const SizedBox(height: 16.0),
              TextField(
                decoration: InputDecoration(
                  labelText: 'Enter your name',
                  border: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(8.0),
                  ),
                ),
              ),
            ],
          ),
        ),
        floatingActionButton: FloatingActionButton(
          child: Icon(Icons.add),
          onPressed: () {
            // Handle floating action button press
          },
        ),
        drawer: Drawer(
          child: ListView(
            padding: EdgeInsets.zero,
            children: [
              DrawerHeader(
                decoration: BoxDecoration(
                  color: Theme.of(context).primaryColor,
                ),
                child: const Center(
                  child: Text(
                    'Drawer Menu',
                    style: TextStyle(
                      color: Colors.white,
                      fontSize: 18.0,
                    ),
                  ),
                ),
              ),
              ListTile(
                title: Text('Item 1'),
                onTap: () {
                  // Handle item 1 tap
                  Navigator.pop(context); // Close drawer
                },
              ),
              ListTile(
                title: Text('Item 2'),
                onTap: () {
                  // Handle item 2 tap
                  Navigator.pop(context); // Close drawer
                },
              ),
              ListTile(
                title: Text('Item 3'),
                onTap: () {
                  // Handle item 2 tap
                  Navigator.pop(context); // Close drawer
                },
              ),
            ],
          ),
        ),
        persistentFooterButtons: [
          Padding(
            padding: const EdgeInsets.all(16.0),
            child: Center(
              child: ElevatedButton(
                onPressed: () {
                  // Handle button press
                },
                child: Text('Persistent Footer Button'),
              ),
            ),
          ),

        ],
      ),
    );
  }
}

Flutter Scaffold Example 2