Crear una app

En esta primera sección del tutorial de Flutter, construirás la UI principal de una app llamada 'Birdle', un juego similar a Wordle, el popular juego de The New York Times.

Al final de este tutorial, habrás aprendido los fundamentos para construir UIs de Flutter, y tu app se verá como la siguiente captura de pantalla (e incluso funcionará casi por completo 😀).

El primer paso para construir apps de Flutter es crear un nuevo proyecto. Creas nuevas apps con la herramienta CLI de Flutter, instalada como parte del Flutter SDK.

Abre tu terminal o símbolo del sistema y ejecuta el siguiente comando para crear un nuevo proyecto de Flutter:

$ flutter create birdle --empty

Esto crea un nuevo proyecto de Flutter usando la plantilla mínima "vacía".

En tu IDE, abre el archivo en lib/main.dart. Empezando desde arriba, verás este código.

void main() {
  runApp(const MainApp());
}

La función main es el punto de entrada para cualquier programa Dart, y una app de Flutter es simplemente un programa Dart. El método runApp es parte del Flutter SDK, y toma un widget como argumento. En este caso, se está pasando una instancia del widget MainApp.

Justo debajo de la función main, encontrarás la declaración de la clase MainApp.

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

MainApp es el root widget, ya que es el widget que se pasa a runApp. Dentro de este widget, hay un método build que devuelve otro widget llamado MaterialApp. Esencialmente, esto es lo que es una app de Flutter: una composición de widgets que forman una estructura de árbol llamada el widget tree.

Tu trabajo como desarrollador de Flutter es componer widgets del SDK en widgets personalizados más grandes que muestren una UI.

En este momento, el widget tree es bastante simple:

1. En tu terminal, navega al directorio raíz de tu app de Flutter creada:

   $ cd birdle
   

   content_copy

2. Ejecuta la app usando la herramienta CLI de Flutter.

   $ flutter run -d chrome
   

   content_copy

   La app se compilará y se iniciará en una nueva instancia de Chrome.

El stateful Hot Reload, por si no has oído hablar de él, permite que una app de Flutter en ejecución vuelva a renderizar la lógica de negocio o el código de la UI actualizados en menos de un segundo, todo sin perder tu posición en la app.

En tu IDE, abre el archivo main.dart y ve a la línea ~15 para buscar este código:

child: Text('Hello World!'),

Cambia el texto dentro del string por lo que quieras. Luego, realiza un Hot Reload de tu app presionando r en la terminal donde se está ejecutando la app. La app en ejecución debería mostrar instantáneamente tu texto actualizado.