Scaffold: What It Is, Structure and Widgets in Flutter

What is Scaffold in Flutter

Scaffold is a layout widget from the Material Design library that forms the basic visual structure of a screen. It implements the standard Material application pattern: top bar, screen body, side menu and floating buttons. Unlike Container, which simply sets dimensions and style, Scaffold manages the entire screen as a unified system.

Every Flutter application built with Material Design starts with MaterialApp, inside which each screen is wrapped in a Scaffold. It is Scaffold that ensures correct display of AppBar on all devices, taking into account SafeArea for iPhone X and above. It is also responsible for z-order: Drawer appears above body, and SnackBar appears above the entire interface, but below dialog windows.

According to the official Flutter API Reference (2026), Scaffold is a mandatory requirement for the correct operation of widgets such as SnackBar, BottomSheet and PersistentBottomSheet. Without Scaffold, these components throw an exception because they depend on InheritedWidget Scaffold.of to access the Scaffold context. Therefore, placing any content directly in Container instead of Scaffold is a common mistake among beginner developers, leading to loss of Material functionality.

Scaffold in the widget hierarchy

In a typical Flutter application, Scaffold is located inside MaterialApp, usually under WidgetsApp or CupertinoApp in cross-platform development. MaterialApp creates Navigator and theme, while Scaffold defines the structure of the current screen. Each screen can have its own Scaffold with unique AppBar, Drawer and BottomNavigationBar, allowing flexible customization of the interface for a specific page.

For deep customization, Scaffold can be combined with NestedScrollView — this allows implementing complex scroll effects, such as a collapsing AppBar with a parallax effect. However, in most cases the standard Scaffold with its properties is sufficient for building a production-ready screen.

Scaffold Structure: Key Parts of the Framework

Scaffold consists of several mandatory and optional zones, each responsible for a specific part of the interface. Let's look at each part individually to understand how they interact with each other.

AppBar — top bar

AppBar is the top bar of the screen that displays the title, navigation button and actions. It automatically gets the correct height of 56dp and takes into account SafeArea for devices with a notch. You can embed TabBar in AppBar for switching tabs using the bottom property.

Drawer — side menu

Drawer is a panel that slides out from the left and provides navigation through application sections. Scaffold automatically adds a hamburger icon to the AppBar if the drawer property is set. Drawer can contain DrawerHeader, ListView with menu items and user information.

BottomNavigationBar — bottom navigation

BottomNavigationBar is a panel at the bottom of the screen for switching between main sections. It contains 2 to 5 icons with labels and supports Material 3 with active indication via NavigationBar. Scaffold positions it at the bottom of the screen, automatically shifting the body up so that content is not overlapped.

FloatingActionButton — floating action button

FloatingActionButton is a round button placed in the bottom right corner of the screen. It is used for the main action on the screen, such as adding a new entry or sending a message. Scaffold supports multiple FABs with extended animation through extended properties.

Body — main content

Body is the central area of the screen where the main content is placed. Any widget can serve as body: Column, ListView, GridView, Stack or a custom composition. Scaffold automatically calculates the body height taking into account AppBar, BottomNavigationBar and SafeArea, eliminating the need for manual size adjustment.

Main Scaffold Properties

Scaffold provides more than 30 properties for customizing the appearance and behavior of the screen. Among them are both mandatory (body) and optional ones that control margins, background and keyboard state. Understanding each property helps to precisely configure the interface according to design requirements.

The resizeToAvoidBottomInset property is especially important when working with forms: when set to true (default), Scaffold automatically shrinks the body when the keyboard appears, keeping the input field visible. This eliminates the need to write custom keyboard listeners. For custom scenarios with SingleChildScrollView, the property can be disabled.

Example of Using Scaffold in an Application

Let's look at a practical example of Scaffold with a full set of Material components. The code creates a screen with AppBar, Drawer, BottomNavigationBar, FloatingActionButton and SnackBar — a typical mobile application structure in Flutter.

class MainScreen extends StatefulWidget {
  const MainScreen({super.key});

  @override
  State<MainScreen> createState() => _MainScreenState();
}

class _MainScreenState extends State<MainScreen> {
  int selectedIndex = 0;

  final List<Widget> pages = [
    const HomePage(),
    const SearchPage(),
    const ProfilePage(),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('My App'),
        actions: [
          IconButton(icon: const Icon(Icons.search), onPressed: () {}),
        ],
      ),
      body: pages[selectedIndex],
      drawer: Drawer(
        child: ListView(
          children: [
            const DrawerHeader(child: Text('Menu')),
            ListTile(title: const Text('Settings'), onTap: () {}),
          ],
        ),
      ),
      bottomNavigationBar: NavigationBar(
        selectedIndex: selectedIndex,
        onDestinationSelected: (int index) {
          setState(() => selectedIndex = index);
        },
        destinations: const [
          NavigationDestination(icon: Icon(Icons.home), label: 'Home'),
          NavigationDestination(icon: Icon(Icons.search), label: 'Search'),
          NavigationDestination(icon: Icon(Icons.person), label: 'Profile'),
        ],
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          ScaffoldMessenger.of(context).showSnackBar(
            const SnackBar(content: Text('Action completed')),
          );
        },
        child: const Icon(Icons.add),
      ),
    );
  }
}

The example uses NavigationBar from Material 3 instead of the deprecated BottomNavigationBar. Scaffold automatically links all parts: when Drawer opens, SnackBar hides; when switching tabs, body updates; and FloatingActionButton stays in place. ScaffoldMessenger ensures SnackBar display even with multiple Scaffolds in the hierarchy.

Scaffold and Material 3: Configuration Features

Material 3 (M3) is the evolution of Material Design introduced by Google in 2023. Scaffold in M3 received several changes: a new NavigationBar widget instead of BottomNavigationBar, support for Dynamic Color through ColorScheme.fromSeed and updated recommendations for margins and component heights. Switching to M3 does not require replacing Scaffold — just update the application theme.

To enable Material 3 in a project, you need to set useMaterial3: true in ThemeData. Scaffold automatically adapts the visual style: margins become larger (24dp instead of 16dp), colors are recalculated from the seed color, and FloatingActionButton gets larger sizes with rounded corners. At the same time, all existing Scaffold properties remain functional.

According to Material Design 3 Specification (2026), it is recommended to use NavigationBar with three to five items instead of BottomNavigationBar. Scaffold supports both options, but NavigationBar provides better support for adaptability and Material You on Pixel devices.

Configuring Scaffold for Material 3

For correct operation of Scaffold with M3, it is enough to update the theme and replace BottomNavigationBar with NavigationBar. Colors will be automatically calculated through ColorScheme.fromSeed, and Scaffold will adjust margins to the new standards. If necessary, you can override backgroundColor directly.