Question #321EasyWidgets & UI

What is the purpose of the scaffold widget in Flutter?

#widget#scaffold#material

Answer

Overview

text
Scaffold
is the fundamental layout structure for a Material Design app screen in Flutter. It provides a standard visual structure and implements common Material Design patterns like AppBar, Drawer, SnackBars, and FABs.

Basic Structure

dart
Scaffold(
  appBar: AppBar(
    title: Text('My App'),
  ),
  body: Center(child: Text('Hello, World!')),
  floatingActionButton: FloatingActionButton(
    onPressed: () {},
    child: Icon(Icons.add),
  ),
)

All Scaffold Properties

PropertyTypeDescription
text
appBar
text
PreferredSizeWidget?
Top navigation bar
text
body
text
Widget?
Main content area
text
floatingActionButton
text
Widget?
FAB button
text
floatingActionButtonLocation
enumFAB position
text
drawer
text
Widget?
Navigation drawer (left)
text
endDrawer
text
Widget?
Drawer from right
text
bottomNavigationBar
text
Widget?
Navigation at bottom
text
bottomSheet
text
Widget?
Persistent bottom sheet
text
backgroundColor
text
Color?
Background color
text
resizeToAvoidBottomInset
text
bool
Resize when keyboard appears
text
extendBody
text
bool
Body extends behind bottom bar
text
extendBodyBehindAppBar
text
bool
Body goes behind AppBar

Full Example

dart
Scaffold(
  backgroundColor: Colors.grey[100],
  appBar: AppBar(
    title: Text('Dashboard'),
    actions: [
      IconButton(icon: Icon(Icons.notifications), onPressed: () {}),
    ],
  ),
  drawer: Drawer(
    child: ListView(
      children: [
        DrawerHeader(child: Text('Menu')),
        ListTile(title: Text('Home'), onTap: () {}),
        ListTile(title: Text('Profile'), onTap: () {}),
      ],
    ),
  ),
  body: Center(child: Text('Main Content')),
  bottomNavigationBar: BottomNavigationBar(
    items: [
      BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'),
      BottomNavigationBarItem(icon: Icon(Icons.search), label: 'Search'),
      BottomNavigationBarItem(icon: Icon(Icons.person), label: 'Profile'),
    ],
  ),
  floatingActionButton: FloatingActionButton(
    onPressed: () {},
    child: Icon(Icons.add),
  ),
  floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
)

Showing SnackBar

dart
ScaffoldMessenger.of(context).showSnackBar(
  SnackBar(
    content: Text('Action completed!'),
    action: SnackBarAction(label: 'Undo', onPressed: () {}),
  ),
)

Key Point:

text
Scaffold
handles system UI overlaps (status bar, navigation bar), keyboard behavior, and the Material visual layer. Every screen in a Material Flutter app should typically have a
text
Scaffold
at its root.

Previous
What is the difference between padding and margin in Flutter?
Next
What is the purpose of the SingleChildScrollView widget in Flutter?

Related Questions

#24

Diff between column and Listview

Easy
#39

Diff between flexible and expanded?

Easy
#83

What is the difference between sizedbox and container ?

Easy
#2

Use pagination in the list and use `ListView.builder` instead of `ListView`.

Medium
#4

**Async state:** `FutureBuilder` / `StreamBuilder`.

Medium