Можно ли использовать несколько виджетов Scaffold на одной странице в Flutter?

«Можно ли использовать несколько виджетов Scaffold на одной странице в Flutter?» — вопрос из категории UI и вёрстка, который задают на 29% собеседований Flutter Разработчик. Ниже — развёрнутый ответ с разбором ключевых моментов.

Ответ

Технически можно, но это почти всегда плохая практика. Scaffold — это каркасный виджет, который предоставляет базовую структуру Material Design-страницы: AppBar, Drawer, BottomNavigationBar, FloatingActionButton и SnackBar. Несколько Scaffold в одной иерархии создают конфликты.

Проблемы при использовании нескольких Scaffold:

  • Конфликтующие ScaffoldMessengerSnackBar могут показываться в непредсказуемом месте
  • Наложение AppBar — несколько панелей инструментов запутают пользователя
  • Проблемы с навигациейNavigator может работать некорректно
  • Нарушение Material Design — противоречит принципам дизайна от Google

Когда это может быть оправдано (редко):

// Пример: модальный BottomSheet с собственной AppBar
void _showCustomSheet(BuildContext context) {
  showModalBottomSheet(
    context: context,
    isScrollControlled: true,
    builder: (context) => Scaffold(
      appBar: AppBar(
        title: Text('Детали'),
        automaticallyImplyLeading: false,
        actions: [
          IconButton(
            icon: Icon(Icons.close),
            onPressed: () => Navigator.pop(context),
          )
        ],
      ),
      body: ListView(
        children: [/* содержимое */],
      ),
    ),
  );
}

Правильные альтернативы для сложных интерфейсов:

// 1. Используйте CustomScrollView с SliverAppBar
CustomScrollView(
  slivers: [
    SliverAppBar(/* ... */),
    SliverList(/* ... */),
    // Еще один SliverAppBar для секции
    SliverAppBar(
      pinned: true,
      title: Text('Вторая секция'),
    ),
  ],
)

// 2. Вложенные Container с разными фонами
Column(
  children: [
    Container(
      color: Theme.of(context).appBarTheme.color,
      padding: EdgeInsets.all(16),
      child: Row(/* псевдо-AppBar */),
    ),
    Expanded(child: /* основное содержимое */),
  ],
)

В моих проектах я придерживаюсь правила: один Scaffold на один экран навигации. Для сложных макетов использую CustomScrollView, NestedScrollView или кастомные виджеты.