Scaffold: что это, структура и виджеты Flutter

Что такое Scaffold во Flutter

Scaffold — это виджет-компоновщик из библиотеки Material Design, который формирует базовую визуальную структуру экрана. Он реализует стандартный паттерн приложения Material: верхняя панель, тело экрана, боковое меню и плавающие кнопки. В отличие от Container, который просто задаёт размеры и стиль, Scaffold управляет целым экраном как единой системой.

Каждое Flutter-приложение, построенное по Material Design, начинается с MaterialApp, внутри которого каждый экран оборачивается в Scaffold. Именно Scaffold обеспечивает корректное отображение AppBar на всех устройствах, учитывая SafeArea для iPhone X и выше. Он также отвечает за z-порядок: Drawer отображается поверх body, а SnackBar — поверх всего интерфейса, но ниже диалоговых окон.

По данным официального Flutter API Reference (2026), Scaffold является обязательным условием для корректной работы таких виджетов, как SnackBar, BottomSheet и PersistentBottomSheet. Без Scaffold эти компоненты выбрасывают исключение, поскольку они зависят от InheritedWidget Scaffold.of для доступа к контексту Scaffold. Поэтому размещение любого контента напрямую в Container вместо Scaffold — распространённая ошибка начинающих разработчиков, приводящая к потере Material-функциональности.

Scaffold в иерархии виджетов

В типичном Flutter-приложении Scaffold находится внутри MaterialApp, обычно под WidgetsApp или CupertinoApp при кросс-платформенной разработке. MaterialApp создаёт Navigator и тему, а Scaffold определяет структуру текущего экрана. Каждый экран может иметь свой Scaffold с уникальными AppBar, Drawer и BottomNavigationBar, что позволяет гибко настраивать интерфейс под конкретную страницу.

Для глубокой кастомизации Scaffold можно комбинировать с NestedScrollView — это позволяет реализовать сложные скролл-эффекты, например, исчезающий AppBar с parallax-эффектом. Однако в большинстве случаев стандартного Scaffold с его свойствами достаточно для построения production-ready экрана.

Структура Scaffold: ключевые части каркаса

Scaffold состоит из нескольких обязательных и опциональных зон, каждая из которых отвечает за определённую часть интерфейса. Рассмотрим каждую часть в отдельности, чтобы понять, как они взаимодействуют друг с другом.

AppBar — верхняя панель

AppBar — это верхняя панель экрана, которая отображает заголовок, кнопку навигации и действия. Она автоматически получает правильную высоту в 56dp и учитывает SafeArea для устройств с «чёлочкой». В AppBar можно встроить TabBar для переключения вкладок, используя свойство bottom.

Drawer — боковое меню

Drawer — это панель, выезжающая слева и предоставляющая навигацию по разделам приложения. Scaffold автоматически добавляет иконку «гамбургер» в AppBar, если свойство drawer установлено. Drawer может содержать DrawerHeader, ListView с пунктами меню и пользовательскую информацию.

BottomNavigationBar — нижняя навигация

BottomNavigationBar — это панель в нижней части экрана для переключения между основными разделами. Она содержит от 2 до 5 иконок с подписями и поддерживает Material 3 с активной индикацией через NavigationBar. Scaffold позиционирует её внизу экрана, автоматически сдвигая body выше, чтобы контент не перекрывался.

FloatingActionButton — плавающая кнопка

FloatingActionButton — это круглая кнопка, размещаемая в правом нижнем углу экрана. Она используется для основного действия на экране, например, добавления новой записи или отправки сообщения. Scaffold поддерживает несколько FAB с расширенной анимацией через extended свойства.

Body — основное содержимое

Body — это центральная область экрана, в которую помещается основной контент. В качестве body может выступать любой виджет: Column, ListView, GridView, Stack или кастомная композиция. Scaffold автоматически рассчитывает высоту body с учётом AppBar, BottomNavigationBar и SafeArea, что избавляет от ручной подгонки размеров.

Основные свойства Scaffold

Scaffold предоставляет более 30 свойств для настройки внешнего вида и поведения экрана. Среди них есть как обязательные (body), так и опциональные, управляющие отступами, фоном и состоянием клавиатуры. Понимание каждого свойства помогает точно настроить интерфейс под требования дизайна.

Свойство resizeToAvoidBottomInset особенно важно при работе с формами: когда оно установлено в true (по умолчанию), Scaffold автоматически сжимает body при появлении клавиатуры, чтобы поле ввода оставалось видимым. Это избавляет от необходимости писать кастомные слушатели клавиатуры. Для кастомных сценариев с SingleChildScrollView свойство можно отключить.

Пример использования Scaffold в приложении

Рассмотрим практический пример Scaffold с полным набором Material-компонентов. Код создаёт экран с AppBar, Drawer, BottomNavigationBar, FloatingActionButton и SnackBar — типичная структура мобильного приложения на 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),
      ),
    );
  }
}

В примере используется NavigationBar из Material 3 вместо устаревшего BottomNavigationBar. Scaffold автоматически связывает все части: при открытии Drawer SnackBar скрывается, при переключении вкладок body обновляется, а FloatingActionButton остаётся на месте. ScaffoldMessenger гарантирует показ SnackBar даже при наличии нескольких Scaffold в иерархии.

Scaffold и Material 3: особенности настройки

Material 3 (M3) — это эволюция Material Design, представленная Google в 2023 году. Scaffold в M3 получил ряд изменений: новый виджет NavigationBar вместо BottomNavigationBar, поддержку Dynamic Color через ColorScheme.fromSeed и обновлённые рекомендации по отступам и высоте компонентов. Переход на M3 не требует замены Scaffold — достаточно обновить тему приложения.

Для включения Material 3 в проекте необходимо установить useMaterial3: true в ThemeData. Scaffold автоматически адаптирует визуальное оформление: отступы становятся больше (24dp вместо 16dp), цвета пересчитываются из seed-цвета, а FloatingActionButton получает более крупные размеры с закруглёнными углами. При этом все существующие свойства Scaffold остаются рабочими.

По данным Material Design 3 Specification (2026), рекомендуется использовать NavigationBar с тремя-пятью пунктами вместо BottomNavigationBar. Scaffold поддерживает оба варианта, но NavigationBar предоставляет лучшую поддержку адаптивности и Material You на устройствах Pixel.

Настройка Scaffold под Material 3

Для корректной работы Scaffold с M3 достаточно обновить тему и заменить BottomNavigationBar на NavigationBar. Цвета будут автоматически рассчитаны через ColorScheme.fromSeed, а Scaffold подстроит отступы под новые стандарты. При необходимости можно переопределить backgroundColor напрямую.