Scaffold Class in Flutter

Scaffold Class in Flutter

What is Scaffold ?

  • A Scaffold Widget provides a framework which implements the basic material design visual layout structure of the flutter app. It provides APIs for showing drawers, snack bars and bottom sheets. Have a look at its constructor and the properties it has.

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

  •     import 'package:flutter/material.dart';
    
        class One extends StatefulWidget {
          const One({super.key});
    
          @override
          State<One> createState() => _OneState();
        }
    
        class _OneState extends State<One> {
          @override
          Widget build(BuildContext context) {
            int num = 0;
    
            return Scaffold(
              appBar: AppBar(
    
                title: const Text('Scaffold Class'),
                backgroundColor: Colors.amber,
              ),
              drawer: Drawer(
                child: ListView(
                  padding: const EdgeInsets.all(1),
                  children: <Widget>[
                    Container(
                      height: 50,
                      color: Colors.blue,
                    ),
                    Container(
                      height: 200,
                      width: 200,
                      color: Colors.blue,
                      child: const Padding(
                        padding: EdgeInsets.only(left: 7),
                        child: Text(
                          'Scaffold Menu',
                          style: TextStyle(fontSize: 22),
                        ),
                      ),
                    ),
                    ListTile(
                      title: const Text('Profile'),
                      onTap: () {},
                      leading: const Icon(Icons.person),
                    ),
                    ListTile(
                      title: const Text('Search'),
                      onTap: () {},
                      leading: const Icon(Icons.search),
                    ),
                    ListTile(
                      title: const Text('Setting'),
                      onTap: () {},
                      leading: const Icon(Icons.settings),
                    ),
                  ],
                ),
              ),
              body: Container(
                alignment: Alignment.center,
                height: double.infinity,
                width: double.infinity,
                color: Colors.lightBlueAccent,
                child: const Text(
                  'Scaffold Class One! ',
                  style: TextStyle(fontSize: 25),
                  textAlign: TextAlign.center,
                ),
              ),
              floatingActionButton: FloatingActionButton(
                onPressed: () {
                  num++;
                  print(num);
                },
                shape: const CircleBorder(),
                child: const Icon(Icons.add),
              ),
              bottomNavigationBar: BottomNavigationBar(items: const [
                BottomNavigationBarItem(icon: Icon(Icons.person), label: 'Profile'),
                BottomNavigationBarItem(icon: Icon(Icons.search), label: 'Search'),
                BottomNavigationBarItem(icon: Icon(Icons.settings), label: 'Settings'),
              ]),
            );
          }
        }
    
  • Output :