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

It is the other primary and required property of this widget, which will display the main content in the Scaffold. It signifies the place below the appBar and behind the floatingActionButton & drawer. The widgets inside the body are at the left-corner by default.

return Scaffold(
	appBar: AppBar(title:  Text('This is appBar widget')),
	body: const Center(
	child: Text(
		"This is body widget",
		style: TextStyle(
		color: Colors.black,
		fontSize: 24.0,
		),
	),
	),
);

floatingActionButton

It is a button displayed at the bottom right corner and floating above the body. It is a circular icon button that floats over the content of a screen at a fixed place to promote a primary action in the application. While scrolling the page, its position won't be changed. Elevation property is used to give a shadow effect to the button.

return Scaffold(
    floatingActionButton: FloatingActionButton(
      elevation: 6.0,
      child: const Icon(Icons.add),
      onPressed: () {
     		print('This is Floating Action Button widget');  
      },
    ),
  );

drawer

It is a slider panel or menu that is displayed at the side of the body. Drawer is accessed via a hamburger icon in the app bar. The gesture is also set automatically to open the drawer. Generally, It is hidden on the mobile devices, but the user can swipe it left to right or right to left to access the drawer menu. It uses the Drawer widget properties slides in a horizontal direction from the Scaffold edge to show navigation links in the application.

drawer: Drawer(
child: ListView(
	children: const <Widget>[
	DrawerHeader(
		decoration: BoxDecoration(
		color: Colors.red,
		),
		child: Text(
		'This is Drawer widget',
		style: TextStyle(
			color: Colors.blue,
			fontSize: 16,
		),
		),
	),
	ListTile(
		title: Text('ListTile 1'),
	),
	ListTile(
		title: Text('ListTile 2'),
	),
	],
),
),
 

bottomNavigationBar

A navigation bar typically placed at the bottom of the screen. It allows users to switch between primary destinations in the app. This property allows the developer to add multiple icons or texts in the bar as items. It should be rendered below the body and persistentFooterButtons. It can be seen in most of the mobile applications.

bottomNavigationBar: BottomNavigationBar(  
  currentIndex: 0,  
  fixedColor: Colors.blue,  
  items: [  
    BottomNavigationBarItem(  
      title: Text("Home"),  
      icon: Icon(Icons.home),  
    ),  
    BottomNavigationBarItem(  
      title: Text("Search"),  
      icon: Icon(Icons.search),  
    ),  
    BottomNavigationBarItem(  
      title: Text("User Profile"),  
      icon: Icon(Icons.account_circle),  
    ),  
  ],  
  onTap: (int itemIndex){  
    setState(() {  
      _currentIndex = itemIndex;  
    });  
  },  
),  

resizeToAvoidBottomInset

The bottom property defines the onscreen keyboard height. If it is true, the body and the Scaffold's floating widgets should adjust their size themselves to avoid the onscreen keyboard.

endDrawer

The endDrawer property takes in a widget as the parameter. It is similar to the Drawer, except the fact it opens at the right side of the screen by default. It can be swiped right to left or left to right.

persistentFooterButton

It is a list of buttons that are displayed at the bottom of the Scaffold widget. These property items are always visible; even we have scroll the body of the Scaffold. They are rendered above the bottomNavigationBar and below the body.

persistentFooterButtons: <Widget>[  
  RaisedButton(  
    onPressed: () {},  
    color: Colors.green,  
    child: Icon(  
      Icons.add,  
      color: Colors.white,  
    ),  
  ),  
  RaisedButton(  
    onPressed: () {},  
    color: Colors.green,  
    child: Icon(  
      Icons.clear,  
      color: Colors.white,  
    ),  
  ),  
],  

backgroundColor

It is used to set the background color of the whole Scaffold widget.

backgroundColor: Colors.red

floatingActionButtonLocation

It is used to determine the position of the floatingActionButton. Generally, It is positioned at the bottom right corner of the screen. It contains predefined constants, such as centerDocked, centerFloat, endDocked, endFloat, etc.

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

Flutter Scaffold

Flutter Drawer

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

class _MyHomePageState extends State<MyHomePage> {
  int _selectedIndex = 0;

  final List<Widget> _pages = [
    NewsFeed(), // Replace with your NewsFeed widget
    Categories(), // Replace with your Categories widget
    Profile(), // Replace with your Profile widget
  ];

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          toolbarHeight: 56.0,
          backgroundColor: Color(0xff3555c0),
          leading: SvgPicture.asset(
            'assets/image/code_capp1.svg',
            fit: BoxFit.fitWidth,
          ), //remove this line
          title: Text('Code Cappuccino', style: TextStyle(color: Colors.white)),
          elevation: 4.0,
        ),
        body: _pages[_selectedIndex],
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            // Add your onPressed action here
          },
          child: Icon(Icons.add),
          backgroundColor: Colors.blue,
        ),
        floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
        endDrawer: Drawer(
          child: ListView(
            padding: EdgeInsets.zero,
            children: <Widget>[
              DrawerHeader(
                decoration: BoxDecoration(
                  color: Colors.blue,
                ),
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Icon(Icons.draw_sharp, size: 24.0),
                    Text(
                      'Drawer Header',
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: 24,
                      ),
                    ),
                  ],
                ),
              ),
              ListTile(
                title: Text('ListTile 1'),
                onTap: () {
                  // Add your drawer item 1 action here
                },
              ),
              ListTile(
                title: Text('ListTile 2'),
                onTap: () {
                  // Add your drawer item 2 action here
                },
              ),
              ListTile(
                title: Text('ListTile 3'),
                onTap: () {
                  // Add your drawer item 3 action here
                },
              ),
            ],
          ),
        ),
        bottomNavigationBar: BottomNavigationBar(
          selectedItemColor: Colors.blue,
          unselectedItemColor: Colors.grey,
          currentIndex: _selectedIndex,
          onTap: _onItemTapped,
          items: const [
            BottomNavigationBarItem(
              icon: Icon(Icons.rss_feed),
              label: 'News',
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.category),
              label: 'Categories',
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.person),
              label: 'Profile',
            ),
          ],
        ),
      ),
    );
  }
}

// Placeholder widgets for NewsFeed, Categories, and Profile
class NewsFeed extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(child: Text('News Feed'));
  }
}

class Categories extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(child: Text('Categories'));
  }
}

class Profile extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(child: Text('Profile'));
  }
}