Scaffold: o que é, estrutura e widgets no Flutter

O que é Scaffold no Flutter

Scaffold é um widget de layout da biblioteca Material Design que forma a estrutura visual básica de uma tela. Ele implementa o padrão de aplicativo Material: barra superior, corpo da tela, menu lateral e botões flutuantes. Ao contrário de Container, que simplesmente define dimensões e estilo, o Scaffold gerencia a tela inteira como um sistema unificado.

Todo aplicativo Flutter construído com Material Design começa com MaterialApp, dentro do qual cada tela é envolvida em um Scaffold. É o Scaffold que garante a exibição correta do AppBar em todos os dispositivos, levando em consideração SafeArea para iPhone X e superiores. Ele também é responsável pela ordem z: Drawer aparece acima do body, e SnackBar aparece acima de toda a interface, mas abaixo das janelas de diálogo.

De acordo com a Referência da API Flutter (2026), o Scaffold é um requisito obrigatório para o funcionamento correto de widgets como SnackBar, BottomSheet e PersistentBottomSheet. Sem Scaffold, estes componentes lançam uma exceção porque dependem de InheritedWidget Scaffold.of para acessar o contexto do Scaffold. Portanto, colocar qualquer conteúdo diretamente em Container em vez de Scaffold é um erro comum entre desenvolvedores iniciantes, levando à perda de funcionalidade Material.

Scaffold na hierarquia de widgets

Em um aplicativo Flutter típico, Scaffold está localizado dentro de MaterialApp, geralmente sob WidgetsApp ou CupertinoApp no desenvolvimento multiplataforma. MaterialApp cria Navigator e tema, enquanto Scaffold define a estrutura da tela atual. Cada tela pode ter seu próprio Scaffold com AppBar, Drawer e BottomNavigationBar únicos, permitindo personalização flexível da interface para uma página específica.

Para personalização avançada, o Scaffold pode ser combinado com NestedScrollView — isso permite implementar efeitos de rolagem complexos, como um AppBar recolhível com efeito parallax. No entanto, na maioria dos casos, o Scaffold padrão com suas propriedades é suficiente para construir uma tela pronta para produção.

Estrutura do Scaffold: partes principais do framework

Scaffold consiste em várias zonas obrigatórias e opcionais, cada uma responsável por uma parte específica da interface. Vamos ver cada parte individualmente para entender como elas interagem entre si.

AppBar — barra superior

AppBar é a barra superior da tela que exibe o título, botão de navegação e ações. Ela obtém automaticamente a altura correta de 56dp e leva em consideração SafeArea para dispositivos com notch. O TabBar pode ser incorporado no AppBar para alternar entre abas usando a propriedade bottom.

Drawer — menu lateral

Drawer é um painel que desliza da esquerda e fornece navegação pelas seções do aplicativo. O Scaffold adiciona automaticamente um ícone de hambúrguer no AppBar se a propriedade drawer estiver definida. O Drawer pode conter DrawerHeader, ListView com itens de menu e informações do usuário.

BottomNavigationBar — navegação inferior

BottomNavigationBar é um painel na parte inferior da tela para alternar entre seções principais. Contém de 2 a 5 ícones com rótulos e suporta Material 3 com indicação ativa através de NavigationBar. O Scaffold o posiciona na parte inferior da tela, deslocando automaticamente o body para cima para que o conteúdo não seja sobreposto.

FloatingActionButton — botão de ação flutuante

FloatingActionButton é um botão redondo colocado no canto inferior direito da tela. É usado para a ação principal na tela, como adicionar uma nova entrada ou enviar uma mensagem. O Scaffold suporta múltiplos FABs com animação estendida através de propriedades extended.

Body — conteúdo principal

Body é a área central da tela onde o conteúdo principal é colocado. Qualquer widget pode servir como body: Column, ListView, GridView, Stack ou uma composição personalizada. O Scaffold calcula automaticamente a altura do body levando em consideração AppBar, BottomNavigationBar e SafeArea, eliminando a necessidade de ajuste manual de tamanhos.

Principais propriedades do Scaffold

Scaffold fornece mais de 30 propriedades para personalizar a aparência e o comportamento da tela. Entre elas estão tanto obrigatórias (body) quanto opcionais que controlam margens, fundo e estado do teclado. Compreender cada propriedade ajuda a configurar precisamente a interface de acordo com os requisitos de design.

A propriedade resizeToAvoidBottomInset é especialmente importante ao trabalhar com formulários: quando definida como true (padrão), o Scaffold comprime automaticamente o body quando o teclado aparece, mantendo o campo de entrada visível. Isso elimina a necessidade de escrever listeners de teclado personalizados. Para cenários personalizados com SingleChildScrollView, a propriedade pode ser desativada.

Exemplo de uso do Scaffold em um aplicativo

Vamos ver um exemplo prático de Scaffold com um conjunto completo de componentes Material. O código cria uma tela com AppBar, Drawer, BottomNavigationBar, FloatingActionButton e SnackBar — uma estrutura típica de aplicativo móvel no 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('Meu 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('Configurações'), 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('Ação concluída')),
          );
        },
        child: const Icon(Icons.add),
      ),
    );
  }
}

O exemplo usa NavigationBar do Material 3 em vez do obsoleto BottomNavigationBar. O Scaffold vincula automaticamente todas as partes: quando o Drawer abre, o SnackBar é ocultado; ao alternar abas, o body é atualizado; e o FloatingActionButton permanece no lugar. O ScaffoldMessenger garante a exibição do SnackBar mesmo com múltiplos Scaffolds na hierarquia.

Scaffold e Material 3: recursos de configuração

Material 3 (M3) é a evolução do Material Design apresentada pelo Google em 2023. O Scaffold no M3 recebeu várias mudanças: um novo widget NavigationBar em vez de BottomNavigationBar, suporte para Cor Dinâmica através de ColorScheme.fromSeed e recomendações atualizadas para margens e alturas de componentes. Mudar para M3 não requer substituição do Scaffold — basta atualizar o tema do aplicativo.

Para habilitar Material 3 em um projeto, é necessário definir useMaterial3: true no ThemeData. O Scaffold adapta automaticamente o estilo visual: as margens se tornam maiores (24dp em vez de 16dp), as cores são recalculadas a partir da cor semente, e o FloatingActionButton obtém tamanhos maiores com cantos arredondados. Ao mesmo tempo, todas as propriedades existentes do Scaffold permanecem funcionais.

De acordo com a Especificação do Material Design 3 (2026), é recomendado usar NavigationBar com três a cinco itens em vez de BottomNavigationBar. O Scaffold suporta ambas as opções, mas o NavigationBar oferece melhor suporte para adaptabilidade e Material You em dispositivos Pixel.

Configurando Scaffold para Material 3

Para o funcionamento correto do Scaffold com M3, basta atualizar o tema e substituir BottomNavigationBar por NavigationBar. As cores serão calculadas automaticamente através de ColorScheme.fromSeed, e o Scaffold ajustará as margens para os novos padrões. Se necessário, o backgroundColor pode ser sobrescrito diretamente.