Scaffold: qué es, estructura y widgets en Flutter

Qué es Scaffold en Flutter

Scaffold es un widget de diseño de la biblioteca Material Design que forma la estructura visual básica de una pantalla. Implementa el patrón estándar de aplicación Material: barra superior, cuerpo de pantalla, menú lateral y botones flotantes. A diferencia de Container, que simplemente establece dimensiones y estilo, Scaffold gestiona toda la pantalla como un sistema unificado.

Toda aplicación Flutter construida con Material Design comienza con MaterialApp, dentro del cual cada pantalla se envuelve en un Scaffold. Es Scaffold quien asegura la visualización correcta de AppBar en todos los dispositivos, teniendo en cuenta SafeArea para iPhone X y superiores. También es responsable del orden z: Drawer aparece sobre body, y SnackBar aparece sobre toda la interfaz, pero debajo de las ventanas de diálogo.

Según la Referencia de la API de Flutter (2026), Scaffold es un requisito obligatorio para el correcto funcionamiento de widgets como SnackBar, BottomSheet y PersistentBottomSheet. Sin Scaffold, estos componentes lanzan una excepción porque dependen de InheritedWidget Scaffold.of para acceder al contexto de Scaffold. Por lo tanto, colocar cualquier contenido directamente en Container en lugar de Scaffold es un error común entre los desarrolladores principiantes, que lleva a la pérdida de funcionalidad Material.

Scaffold en la jerarquía de widgets

En una aplicación Flutter típica, Scaffold se encuentra dentro de MaterialApp, generalmente bajo WidgetsApp o CupertinoApp en el desarrollo multiplataforma. MaterialApp crea Navigator y tema, mientras que Scaffold define la estructura de la pantalla actual. Cada pantalla puede tener su propio Scaffold con AppBar, Drawer y BottomNavigationBar únicos, lo que permite una personalización flexible de la interfaz para una página específica.

Para una personalización avanzada, Scaffold se puede combinar con NestedScrollView — esto permite implementar efectos de desplazamiento complejos, como un AppBar que se colapsa con efecto parallax. Sin embargo, en la mayoría de los casos, el Scaffold estándar con sus propiedades es suficiente para construir una pantalla lista para producción.

Estructura de Scaffold: partes clave del marco

Scaffold consta de varias zonas obligatorias y opcionales, cada una responsable de una parte específica de la interfaz. Veamos cada parte individualmente para entender cómo interactúan entre sí.

AppBar — barra superior

AppBar es la barra superior de la pantalla que muestra el título, el botón de navegación y las acciones. Obtiene automáticamente la altura correcta de 56dp y tiene en cuenta SafeArea para dispositivos con muesca. Se puede incorporar TabBar en AppBar para cambiar de pestañas usando la propiedad bottom.

Drawer — menú lateral

Drawer es un panel que se desliza desde la izquierda y proporciona navegación por las secciones de la aplicación. Scaffold añade automáticamente un icono de hamburguesa en AppBar si la propiedad drawer está establecida. Drawer puede contener DrawerHeader, ListView con elementos de menú e información del usuario.

BottomNavigationBar — navegación inferior

BottomNavigationBar es un panel en la parte inferior de la pantalla para cambiar entre secciones principales. Contiene de 2 a 5 iconos con etiquetas y soporta Material 3 con indicación activa a través de NavigationBar. Scaffold lo posiciona en la parte inferior de la pantalla, desplazando automáticamente el body hacia arriba para que el contenido no se superponga.

FloatingActionButton — botón de acción flotante

FloatingActionButton es un botón redondo ubicado en la esquina inferior derecha de la pantalla. Se utiliza para la acción principal en la pantalla, como añadir un nuevo registro o enviar un mensaje. Scaffold soporta múltiples FAB con animación extendida a través de propiedades extended.

Body — contenido principal

Body es el área central de la pantalla donde se coloca el contenido principal. Cualquier widget puede servir como body: Column, ListView, GridView, Stack o una composición personalizada. Scaffold calcula automáticamente la altura del body teniendo en cuenta AppBar, BottomNavigationBar y SafeArea, eliminando la necesidad de ajuste manual de tamaños.

Principales propiedades de Scaffold

Scaffold proporciona más de 30 propiedades para personalizar la apariencia y el comportamiento de la pantalla. Entre ellas hay tanto obligatorias (body) como opcionales que controlan márgenes, fondo y estado del teclado. Comprender cada propiedad ayuda a configurar con precisión la interfaz según los requisitos de diseño.

La propiedad resizeToAvoidBottomInset es especialmente importante al trabajar con formularios: cuando se establece en true (por defecto), Scaffold contrae automáticamente el body cuando aparece el teclado, manteniendo visible el campo de entrada. Esto elimina la necesidad de escribir oyentes de teclado personalizados. Para escenarios personalizados con SingleChildScrollView, la propiedad se puede desactivar.

Ejemplo de uso de Scaffold en una aplicación

Veamos un ejemplo práctico de Scaffold con un conjunto completo de componentes Material. El código crea una pantalla con AppBar, Drawer, BottomNavigationBar, FloatingActionButton y SnackBar — una estructura típica de aplicación móvil en 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),
      ),
    );
  }
}

El ejemplo utiliza NavigationBar de Material 3 en lugar del obsoleto BottomNavigationBar. Scaffold enlaza automáticamente todas las partes: cuando se abre Drawer, SnackBar se oculta; al cambiar de pestañas, body se actualiza; y FloatingActionButton permanece en su lugar. ScaffoldMessenger garantiza la visualización de SnackBar incluso con múltiples Scaffold en la jerarquía.

Scaffold y Material 3: características de configuración

Material 3 (M3) es la evolución de Material Design presentada por Google en 2023. Scaffold en M3 recibió varios cambios: un nuevo widget NavigationBar en lugar de BottomNavigationBar, soporte para Color Dinámico a través de ColorScheme.fromSeed y recomendaciones actualizadas para márgenes y alturas de componentes. Cambiar a M3 no requiere reemplazar Scaffold — solo hay que actualizar el tema de la aplicación.

Para habilitar Material 3 en un proyecto, es necesario establecer useMaterial3: true en ThemeData. Scaffold adapta automáticamente el estilo visual: los márgenes se vuelven más grandes (24dp en lugar de 16dp), los colores se recalculan a partir del color semilla, y FloatingActionButton obtiene tamaños más grandes con esquinas redondeadas. Al mismo tiempo, todas las propiedades existentes de Scaffold siguen siendo funcionales.

Según la Especificación de Material Design 3 (2026), se recomienda usar NavigationBar con tres a cinco elementos en lugar de BottomNavigationBar. Scaffold soporta ambas opciones, pero NavigationBar proporciona mejor soporte para adaptabilidad y Material You en dispositivos Pixel.

Configuración de Scaffold para Material 3

Para el correcto funcionamiento de Scaffold con M3, basta con actualizar el tema y reemplazar BottomNavigationBar por NavigationBar. Los colores se calcularán automáticamente a través de ColorScheme.fromSeed, y Scaffold ajustará los márgenes a los nuevos estándares. Si es necesario, se puede anular backgroundColor directamente.