Widget Scaffold en Flutter

El Scaffold, es un widget hijo del MaterialApp que es donde comienza todo y nos permite emplear elementos/widgets del Material Design, el Scaffold es nuestro pilar en el cual podemos crear más opciones como el botón flotante, el appbar, drawer y mucho más.

El Scaffold es la pieza clave en nuestros desarrollos para poder hacer verdaderas aplicaciones multipantalla al igual que el sistema de Navegación y enrutamiento en Flutter.

Una app en Flutter, el widget raíz es un MaterialApp, seguido de un Scaffold que es donde montamos TODO lo demás; toda pantalla con diseño Material necesita un Scaffold. Es como el “esqueleto” donde se sostiene el resto de la interfaz. Si vienes de otras tecnologías, piensa en él como la “estructura maestra” que le dice a Flutter dónde colocar la barra superior, el cuerpo, los botones flotantes, menús laterales y más.

Un Scaffold vive normalmente dentro de un MaterialApp, y recuerdo que la primera vez que creé una app con Flutter lo vi clarísimo: la jerarquía siempre fluía MaterialApp → Scaffold → Widgets. Sin ese andamio, simplemente no puedes trabajar con los elementos visuales típicos de Material Design.
MaterialApp: define el tema, navegación general, configuración global.
Scaffold: crea la plantilla visual de cada pantalla.
Body y demás widgets: presentan el contenido real que verá el usuario.

Componentes principales del Scaffold y cómo funcionan realmente

En la práctica, un Scaffold no es solo un contenedor: es un sistema completo para estructurar pantallas, es decir, para nuestras aplicaciones; veamos los aspectos más importantes:

AppBar: cabecera, acciones y personalización
- La barra superior donde colocas el título, botones, menús, búsqueda, etc.
  Puedes personalizar colores, sombras, botones de acción y comportamiento al hacer scroll.
Body: el área donde ocurre todo
- Es literalmente todo lo que está debajo del AppBar. Aquí van tus columnas, listas, formularios…
Drawer y EndDrawer: paneles laterales para navegación.
- Drawer: aparece desde la izquierda.
- EndDrawer: aparece desde la derecha.
FloatingActionButton y sus posiciones disponibles
- El widget estrella en el Material Design. Puedes moverlo al centro, al costado, flotar sobre una BottomBar, esconderlo al hacer scroll… Flutter trae más flexibilidad de la que parece.
BottomNavigationBar y patrones de navegación
- Perfecta para apps con secciones principales: Home, Perfil, Ajustes, etc.
  En tu ejemplo extendido la combinaste con el FAB centrado y quedó un diseño muy funcional.

Ejemplos de Scaffold en Flutter

Una app en Flutter, cuando la creamos, comúnmente luce:

@override
Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
            title: Text(widget.title),
        ),
        body: Center(
            child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                    const Text(
                        'You have pushed the button this many times:',
                    ),
                    Text(
                        '$_counter',
                        style: Theme.of(context).textTheme.headline4,
                    ),
                ],
            ),
        ),
        floatingActionButton: FloatingActionButton(
            onPressed: _incrementCounter,
            tooltip: 'Increment',
            child: const Icon(Icons.add),
        ),
    );
}

Así es como luce nuestra app, con elementos básicos como:

appBar
body
floatingActionButton

Recordar que el body es el único obligatorio que es donde va el contenido.

Ejemplo 1: Scaffold básico con AppBar y contenido simple

En este ejemplo definimos el AppBar, un texto en el medio de la pantalla y un botón de tipo flotante con un icono de +:

Scaffold(
 appBar: AppBar(title: Text('Mi App')),
 body: Center(child: Text('Hola mundo')),
 floatingActionButton: FloatingActionButton(
   onPressed: () {},
   child: Icon(Icons.add),
 ),
);

Ejemplo 2: Scaffold, Drawer y EndDrawer

El mismo ejemplo de antes, pero, con un par de menus laterales o Drawers:

Scaffold(
 drawer: Drawer(child: Center(child: Text('Start Drawer'))),
 endDrawer: Drawer(child: Center(child: Text('End Drawer'))),
 appBar: AppBar(title: Text('Drawer App')),
 body: Center(child: Text('Contenido')),
);

Ejemplo 3: Scaffold con BottomNavigationBar funcional

Ideal para apps con varias pantallas:

Scaffold(
 bottomNavigationBar: BottomNavigationBar(
   items: [
     BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'),
     BottomNavigationBarItem(icon: Icon(Icons.person), label: 'Perfil'),
   ],
 ),
);

Ejemplo Completo

Este widget también contiene algunos atributos adicionales. Veamos la declaración del constructor con parámetros nombrados para aprender sobre ellos:

Scaffold({
  Key? key,
  PreferredSizeWidget? appBar,
  Widget? body,
  Widget? floatingActionButton,
  FloatingActionButtonLocation? floatingActionButtonLocation,
  FloatingActionButtonAnimator? floatingActionButtonAnimator,
  List<Widget>? persistentFooterButtons,
  Widget? drawer,
  void Function(bool)? onDrawerChanged,
  Widget? endDrawer,
  void Function(bool)? onEndDrawerChanged,
  Widget? bottomNavigationBar,
  Widget? bottomSheet,
  Color? backgroundColor,
  bool? resizeToAvoidBottomInset,
  bool primary = true,
  DragStartBehavior drawerDragStartBehavior = DragStartBehavior.start,
  bool extendBody = false,
  bool extendBodyBehindAppBar = false,
  Color? drawerScrimColor,
  double? drawerEdgeDragWidth,
  bool drawerEnableOpenDragGesture = true,
  bool endDrawerEnableOpenDragGesture = true,
  String? restorationId,
})

Hay un montón de atributos que puedes usar, pero ninguno de ellos es obligatorio para usar, aún así, todos los widgets de Scaffold usan el atributo a body para representar el cuerpo de scaffold.

Todos estos widgets se explican por sí mismos y la declaración anterior dice lo que esperan. Ahora cambiemos el Scaffold de nuestra aplicación predeterminada:

@override
Widget build(BuildContext context) {
    return Scaffold(
        bottomNavigationBar: BottomNavigationBar(
            items: const <BottomNavigationBarItem>[
                BottomNavigationBarItem(
                    icon: Icon(
                        Icons.home,
                    ),
                    label: 'Home',
                    tooltip: 'Home',
                ),
                BottomNavigationBarItem(
                    icon: Icon(
                        Icons.person,
                    ),
                    label: 'Profile',
                    tooltip: 'Profile',
                ),
            ],
        ),
        drawer: const Drawer(
            child: Center(
                child: Text(
                    "Start Drawer",
                ),
            ),
        ),
        endDrawer: const Drawer(
            child: Center(
                child: Text(
                    "End Drawer",
                ),
            ),
        ),
        backgroundColor: Colors.grey[200],
        floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
        appBar: AppBar(
            title: Text(widget.title),
        ),
        body: Center(
            child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                        const Text(
                            'You have pushed the button this many times:',
                        ),
                        Text(
                            '$_counter',
                            style: Theme.of(context).textTheme.headline4,
                        ),
                    ],
                ),
            ),
            floatingActionButton: FloatingActionButton(
            onPressed: _incrementCounter,
            tooltip: 'Increment',
            child: const Icon(Icons.add),
        ),
    );
}

El código anterior crea un menú de navegación inferior, un cajón en la posición inicial y final de la pantalla, una barra de navegación inferior y reemplaza la posición del botón de acción flotante en la parte inferior central y se superpone a la barra de navegación inferior. Se parece a esto.

Buenas prácticas y errores comunes al trabajar con Scaffold

¿Cuándo NO deberías usar un Scaffold?
- Pantallas de carga
Splash screens
- Pantallas completamente personalizadas sin Material Design
Evitar conflictos entre navegación, SnackBars y AppBars
- Si usas varios Scaffolds anidados, puede ser difícil controlar mensajes, barras o estados.
  Una técnica profesional es el uso de IndexedStack, que tú ya aplicaste en tu ejemplo más avanzado.
Mantener el estado de las vistas con IndexedStack
- Te permite cambiar pestañas sin perder el estado anterior. Es la técnica que los competidores mencionan, pero aquí queda mejor explicada y aplicada.

Preguntas frecuentes sobre Scaffold en Flutter (FAQ actualizada)

¿Es obligatorio usar Scaffold en todas las pantallas?
- No, solo en pantallas que usen Material Design.
¿Puedo usar más de un FAB?
- Oficialmente uno. Extra: puedes usar Stack para múltiples FAB.
¿Cómo cambiar el tema solo para un Scaffold?
- Envuélvelo en un Theme() propio.
¿Cómo ocultar AppBar o BottomNavigationBar al hacer scroll?
- Con SliverAppBar o con listeners del controlador de scroll.
¿Puedo anidar Scaffolds?
- No recomendado salvo casos muy concretos.

Conclusión

El widget Scaffold es más que una plantilla. Es la forma en que Flutter organiza pantallas completas con coherencia, diseño Material y componentes esenciales.

En este articulo pudiste ver sus principales atributos, ejemplos de usos y patrones muy comunes que permiten crear interfaces modernas, escalables y profesionales.

Siguiente paso, aprende a utilizar bottom sheet en Flutter.