Guía completa de Flutter: El widget Scaffold

¿Para qué sirve el Scaffold en Flutter?

El widget Scaffold (andamio) es un widget básico que te permitirá implementar la estructura visual de tu MaterialApp. Estos dos widgets son inseparables, ya que sin MaterialApp no puedes acceder a la página, pero sin Scaffold es imposible crear elementos visuales como un fondo, texto, botones, etc.

Para entender mejor, aquí están los pasos que se siguen durante la compilación:

1. La función void main() sirve como punto de partida para la compilación. Toma como argumento el método runApp().
2. El método runApp permite iniciar la aplicación, comenzando desde una MaterialApp que toma como argumento.
3. La MaterialApp proporciona un contexto para construir nuestra página. Por ejemplo, facilita agregar un tema de colores o gestionar los cambios de orientación del dispositivo. Puede tomar como argumento un Scaffold, donde crearemos el visual de nuestra página.
4. Finalmente, el Scaffold representa la parte visible de tu aplicación. En él, construirás el cuerpo (body) de tu página y colocarás contenedores, líneas, columnas, botones, etc.

Aquí tienes un ejemplo de cómo sería en código:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('El nombre de mi App'),
        ),
        body: Center(
          child: Text('El cuerpo de mi página'),
        ),
        bottomNavigationBar: BottomNavigationBar(
          items: [
            BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Inicio'),
            BottomNavigationBarItem(icon: Icon(Icons.settings), label: 'Ajustes'),
          ],
        ),
      ),
    );
  }
}

¿Qué elementos contiene el Scaffold?

Como se explicó anteriormente, el Scaffold nos permite organizar los elementos visuales de una página, en la parte superior, central y en la parte inferior de la pantalla. Los principales parámetros que se utilizan son:

• appBar, que toma como argumento un widget de tipo AppBar(). Este es el área en la parte superior de la pantalla.
• body, que puede tomar diferentes argumentos, como widgets Container, Row, Column, TabBarView, etc. Aquí estamos hablando de toda la parte central de la pantalla, que ocupa todo el espacio si no has definido un appBar o un bottomNavigationBar.
• bottomNavigationBar, que cumple la misma función que el appBar pero en la parte inferior de la pantalla.

Es dentro de estos tres widgets que podrás colocar los distintos elementos visuales de tu aplicación Flutter, y así construir tu página.

Conclusión

En resumen, el widget Scaffold es la base para construir una página en una aplicación. Es el marco que permite estructurar el contenido y distribuirlo en la pantalla. Para continuar, te invito a descubrir otro widget que usarás mucho:

Guía completa de Flutter: el widget Container →