Layout

Dado que Flutter es un kit de herramientas de UI, pasarás mucho tiempo creando layouts con widgets de Flutter.

En esta sección, aprenderás cómo construir layouts con algunos de los widgets de layout más comunes. Esto incluye widgets de alto nivel como Scaffold y AppBar, que distribuyen la estructura de una pantalla, así como widgets de nivel inferior como Column o Row que distribuyen widgets vertical u horizontalmente.

Las aplicaciones móviles suelen tener una barra en la parte superior llamada "barra de la aplicación" (app bar) que puede mostrar un título, controles de navegación y/o acciones.

La forma más sencilla de añadir una app bar a tu app es usando dos widgets: Scaffold y AppBar.

Scaffold es un widget de conveniencia que proporciona un diseño de página al estilo Material, facilitando la adición de una app bar, drawer, barra de navegación y más a una página de tu app. AppBar es, por supuesto, la barra de la aplicación.

El código generado por el comando flutter create --empty ya contiene un widget AppBar y un widget Scaffold. El siguiente código lo actualiza para usar un widget de layout adicional: Align. Esto posiciona el título a la izquierda, el cual por defecto estaría centrado. El widget Text contiene el título en sí.

Modifica el Scaffold dentro del método build de tu widget MainApp.

Pasar un enum o propiedad estática directamente (como Alignment.centerLeft) también se puede acortar usando la sintaxis de atajos de punto de Dart, sobre la cual puedes leer más tanto en la documentación oficial de Dart como en el resumen de atajos de Flutter.

class MainApp extends StatelessWidget {
  const MainApp({super.key});
​
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Align(
            alignment: Alignment.centerLeft,
            child: Text('Birdle'),
          ),
        ),
        body: Center(child: Text('Hello World!')),
      ),
    );
  }
}

Considerar el árbol de widgets de tu app se vuelve más importante a medida que tu app crece. En este punto, hay una "rama" en el árbol de widgets por primera vez, y ahora se ve como la siguiente figura:

Añade el siguiente código para un nuevo widget, llamado GamePage, a tu archivo main.dart. Este widget eventualmente mostrará los elementos de UI necesarios para el juego en sí.

class GamePage extends StatelessWidget {
  GamePage({super.key});
  // This object is part of the game.dart file.
  // It manages wordle logic, and is outside the scope of this tutorial.
  final Game _game = Game();
​
  @override
  Widget build(BuildContext context) {
    // TODO: Replace with screen contents
    return Container();
  }
}

Luego, actualiza tu widget MainApp para crear y mostrar un widget GamePage en lugar de "¡Hola Mundo!".

class MainApp extends StatelessWidget {
  const MainApp({super.key});
​
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Align(
            alignment: Alignment.centerLeft,
            child: Text('Birdle'),
          ),
        ),
        body: Center(child: GamePage()),
      ),
    );
  }
}

El layout de GamePage contiene la cuadrícula de tiles que muestran los intentos del usuario.

Hay varias formas de construir este layout. La más sencilla es con los widgets Column y Row. Cada fila contiene cinco tiles que representan las cinco letras de un intento, con un total de cinco filas. Así que necesitarás una única Column con cinco widgets Row como hijos, donde cada fila contenga cinco hijos.

Para empezar, reemplaza el Container en GamePage.build con un widget Padding con un widget Column como su hijo:

class GamePage extends StatelessWidget {
  GamePage({super.key});
  // This manages game logic, and is out of scope for this lesson.
  final Game _game = Game();
​
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: Column(
        spacing: 5.0,
        children: [
          // Add children next.
        ],
      ),
    );
  }
}

La propiedad spacing coloca cinco píxeles entre cada elemento en el eje principal.

Dentro de Column.children, para cada elemento en la lista _game.guesses, añade un widget Row como hijo.

class GamePage extends StatelessWidget {
  GamePage({super.key});
  // This manages game logic, and is out of scope for this lesson.
  final Game _game = Game();
​
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: Column(
        spacing: 5.0,
        children: [
          for (final guess in _game.guesses)
            Row(
              spacing: 5.0,
              children: [
                // We'll add the tiles here later.
              ],
            ),
        ],
      ),
    );
  }
}

El bucle for en la lista de children se denomina collection for element, una sintaxis de Dart que te permite añadir elementos a una colección de forma iterativa cuando se construye en tiempo de ejecución. Este azúcar sintáctico te facilita el trabajo con colecciones de widgets, proporcionando una alternativa declarativa a lo siguiente:

[..._game.guesses.map((guess) => Row(/* ... */))],

En este caso, añade cinco widgets Row a la columna, uno por cada intento en el objeto Game.

El árbol de widgets para esta app se ha expandido significativamente en esta lección. Ahora se parece más a la siguiente figura (abreviada):

Cuando recargues tu app, deberías ver una cuadrícula de 5x5 de cuadrados blancos.