flutter
/

Flutter Scaffold Widget Tutorial for Beginners

Last Sync: Today

On this page

10
0%
5 min read
Remaining
5 minleft

Click any section to jump — progress syncs automatically

flutter

Flutter Scaffold Widget Tutorial for Beginners

What is Scaffold in Flutter?

Scaffold is a widget that provides a consistent, high‑level structure for a screen that follows Material Design guidelines. It acts as a container for common visual components like an app bar, a body (main content), a floating action button, a drawer, a bottom navigation bar, and a persistent footer. Almost every screen in a Material App will use a Scaffold as its root widget.

Basic Usage

The simplest Scaffold contains just a body. But you'll usually add an appBar as well. Here's the most basic example:

DARTRead-only
1
Scaffold(
  appBar: AppBar(
    title: Text('My App'),
  ),
  body: Center(
    child: Text('Hello, Flutter!'),
  ),
)

This creates a screen with a standard app bar at the top and a centered text in the main area.

Key Properties of Scaffold

Scaffold offers many properties to build rich interfaces. Here are the most important ones:

  • appBar: An AppBar displayed at the top of the screen. Typically contains a title, navigation icon, and actions.
  • body: The primary content of the screen. Usually a widget like Center, Column, ListView, or Container.
  • floatingActionButton: A circular button that hovers over the body, used for primary actions. Often paired with floatingActionButtonLocation.
  • drawer: A slide‑out panel from the left edge (or right, depending on locale) for navigation. Provide a Drawer widget.
  • endDrawer: Similar to drawer but slides from the right.
  • bottomNavigationBar: A bar at the bottom of the screen with icons and labels for top‑level navigation.
  • bottomSheet: A persistent sheet anchored to the bottom of the screen.
  • backgroundColor: The background color of the body area (defaults to ThemeData.scaffoldBackgroundColor).
  • resizeToAvoidBottomInset: Whether the body should resize when the keyboard appears (default true).
  • drawerScrimColor: The color of the scrim that shades the rest of the screen when the drawer is open.
  • floatingActionButtonLocation: Controls where the FAB is placed (e.g., FloatingActionButtonLocation.centerFloat).

Adding a Floating Action Button

A Floating Action Button (FAB) is a common way to trigger a primary action. Add it via floatingActionButton and optionally set its location.

DARTRead-only
1
Scaffold(
  appBar: AppBar(title: Text('FAB Example')),
  body: Center(child: Text('Press the + button')),
  floatingActionButton: FloatingActionButton(
    onPressed: () {
      // Add your action
    },
    child: Icon(Icons.add),
  ),
  floatingActionButtonLocation: FloatingActionButtonLocation.endFloat,
)

Using a Drawer

A drawer slides in from the left and typically contains navigation options. Provide a Drawer widget as the drawer property.

DARTRead-only
1
Scaffold(
  appBar: AppBar(title: Text('Drawer Example')),
  drawer: Drawer(
    child: ListView(
      padding: EdgeInsets.zero,
      children: [
        DrawerHeader(
          decoration: BoxDecoration(color: Colors.blue),
          child: Text('Menu', style: TextStyle(color: Colors.white, fontSize: 24)),
        ),
        ListTile(
          leading: Icon(Icons.home),
          title: Text('Home'),
          onTap: () {
            Navigator.pop(context); // close drawer
            // navigate to home
          },
        ),
        ListTile(
          leading: Icon(Icons.settings),
          title: Text('Settings'),
          onTap: () {
            Navigator.pop(context);
            // navigate to settings
          },
        ),
      ],
    ),
  ),
  body: Center(child: Text('Swipe from left to open drawer')),
)

Adding a Bottom Navigation Bar

For switching between different sections of your app, use a BottomNavigationBar.

DARTRead-only
1
Scaffold(
  appBar: AppBar(title: Text('Bottom Nav Example')),
  body: Center(child: Text('Home Page')),
  bottomNavigationBar: BottomNavigationBar(
    items: const [
      BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'),
      BottomNavigationBarItem(icon: Icon(Icons.search), label: 'Search'),
      BottomNavigationBarItem(icon: Icon(Icons.person), label: 'Profile'),
    ],
    currentIndex: 0,
    onTap: (index) {
      // handle navigation
    },
  ),
)

Handling Keyboard with resizeToAvoidBottomInset

By default, when the keyboard appears, Scaffold resizes its body to avoid the keyboard. This is controlled by resizeToAvoidBottomInset (default true). If you set it to false, the body will be overlapped by the keyboard. Usually you want it true.

Common Mistakes Beginners Make

  • Forgetting to return a Scaffold in a route: Every screen (page) should have its own Scaffold as the top‑level widget, not nested inside another Scaffold.
  • Using multiple Scaffolds on one screen: Only one Scaffold per screen. If you need a different layout inside, use other widgets (like Column, Container) but not another Scaffold.
  • Not closing the drawer after navigation: When a user taps a drawer item, you should call Navigator.pop(context) to close the drawer before navigating, unless you want a custom behavior.
  • Misplacing the FloatingActionButton: FAB should be inside the Scaffold, not inside the body; otherwise it might not position correctly.
  • Ignoring resizeToAvoidBottomInset when needed: If you have a text field near the bottom and the keyboard covers it, set resizeToAvoidBottomInset: true (the default) to automatically adjust.
  • Overlooking the drawerScrimColor: The semi‑transparent overlay when the drawer is open can be customized for better UX.

Key Points to Remember

  • Scaffold implements the basic Material Design layout structure.
  • It must be a child of a MaterialApp (directly or indirectly) to inherit theme and navigation.
  • Only one Scaffold per screen – it's the top‑level container for that route.
  • Use appBar, body, floatingActionButton, drawer, and bottomNavigationBar to build full‑featured screens.
  • The body takes all remaining space after the app bar and bottom bar.
  • resizeToAvoidBottomInset helps when the keyboard appears.

Common Interview Questions

  1. What is the purpose of Scaffold in Flutter?
  2. Can you have two Scaffolds on the same screen? Why or why not?
  3. How do you add a drawer to a screen? How do you close it programmatically?
  4. Explain the difference between drawer and endDrawer.
  5. How does resizeToAvoidBottomInset work? When would you set it to false?
  6. What is floatingActionButtonLocation and what are some common options?
  7. How do you change the background color of the body area in a Scaffold?

Try it yourself

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Scaffold Demo'),
        actions: [
          IconButton(icon: Icon(Icons.search), onPressed: () {}),
        ],
      ),
      body: Center(
        child: Text('Hello, Scaffold!'),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {},
        child: Icon(Icons.add),
      ),
      drawer: Drawer(
        child: ListView(
          padding: EdgeInsets.zero,
          children: [
            DrawerHeader(
              decoration: BoxDecoration(color: Colors.blue),
              child: Text('Menu', style: TextStyle(color: Colors.white, fontSize: 24)),
            ),
            ListTile(
              leading: Icon(Icons.home),
              title: Text('Home'),
              onTap: () => Navigator.pop(context),
            ),
            ListTile(
              leading: Icon(Icons.settings),
              title: Text('Settings'),
              onTap: () => Navigator.pop(context),
            ),
          ],
        ),
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: const [
          BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'),
          BottomNavigationBarItem(icon: Icon(Icons.favorite), label: 'Favorites'),
          BottomNavigationBarItem(icon: Icon(Icons.person), label: 'Profile'),
        ],
        currentIndex: 0,
        onTap: (index) {},
      ),
    );
  }
}

Test Your Knowledge

Q1
of 3

What is the primary purpose of the Scaffold widget?

A
To handle network requests
B
To provide a basic Material Design layout structure
C
To manage state
D
To create animations
Q2
of 3

Which property of Scaffold is used to display a slide‑out navigation panel from the left?

A
endDrawer
B
drawer
C
bottomNavigationBar
D
navigationDrawer
Q3
of 3

What does `resizeToAvoidBottomInset` control?

A
Whether the app bar resizes when the keyboard opens
B
Whether the body resizes to avoid the keyboard
C
Whether the floating action button moves up with the keyboard
D
Whether the drawer closes when the keyboard opens

Previous

flutter theme

Next

flutter appbar

Related Content

Need help?

Explore our comprehensive docs or start a chat with our tech experts.