¿Cómo usar Flutter para crear tu primera pantalla móvil?

Flutter es un kit de herramientas de Google que te permite crear apps para Android e iOS con un solo código.

¿Sabías que empresas como Rappi y Nubank usan Flutter para sus apps? No son pequeñas startups. Son negocios que procesan millones de pesos cada día. Y tú puedes usar la misma tecnología que ellas.

En esta lección vas a instalar Flutter, entender su estructura y crear tu primera pantalla con texto, botones e imágenes. Sin rodeos. Manos a la obra.

Instala Flutter en tu computadora

Antes de escribir una sola línea de código, necesitas instalar Flutter. El proceso tarda entre 20 y 40 minutos según tu conexión a internet.

Paso 1: Ve a flutter.dev y descarga el SDK para tu sistema operativo. Hay versiones para Windows, macOS y Linux.

Paso 2: Extrae el archivo descargado en una carpeta fácil de encontrar. Por ejemplo: C:\flutter en Windows o ~/flutter en Mac.

Paso 3: Agrega Flutter a tu PATH. Esto le dice a tu computadora dónde encontrar Flutter cuando lo llames desde la terminal.

Paso 4: Instala Android Studio. Flutter lo necesita para compilar apps en Android. Dentro de Android Studio, instala también el plugin de Flutter y el de Dart.

Paso 5: Abre tu terminal y escribe:

flutter doctor

Este comando revisa tu instalación y te dice qué falta. Parece un doctor que te hace un chequeo. Sigue sus instrucciones hasta que todo aparezca con palomita verde.

Carlos, estudiante de ingeniería en Monterrey, tardó una tarde entera en configurar Flutter. Se trabó en el PATH. Pero cuando ejecutó flutter doctor por primera vez sin errores, sintió que había cruzado una puerta importante. Esa tarde fue el inicio de su primera app de registro de gastos personales.

La estructura de un proyecto Flutter

Cuando creas un proyecto nuevo con Flutter, aparece una carpeta con varios archivos. No te asustes. Solo necesitas enfocarte en dos lugares al inicio.

Crea tu primer proyecto así:

flutter create mi_primera_app
cd mi_primera_app
flutter run

Flutter genera una app de contador de ejemplo. Funciona de inmediato. Eso ya es tu primera app corriendo en un emulador o en tu teléfono.

Los archivos más importantes son:

• lib/main.dart → Aquí vive todo tu código de la app.
• pubspec.yaml → Aquí agregas imágenes, fuentes y paquetes externos.
• android/ y ios/ → Flutter los maneja casi solo. No los toques al principio.

Todo lo que construyas estará dentro de lib/main.dart. Al menos al inicio.

Todo en Flutter son widgets

Flutter tiene un concepto central que debes entender desde el primer día: todo es un widget.

Un widget es un bloque de construcción visual. Un texto es un widget. Un botón es un widget. Un ícono es un widget. Incluso la pantalla completa es un widget.

Piénsalo como piezas de LEGO. Combinas piezas pequeñas para construir algo grande.

Los widgets más usados al inicio son:

Tu primera pantalla real

Vamos a construir la pantalla de bienvenida de una app ficticia llamada "MiMercado", una app para pequeños comercios en México que quieren digitalizar su inventario.

Abre lib/main.dart y reemplaza todo el contenido con este código:

import 'package:flutter/material.dart';

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

class MiMercadoApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'MiMercado',
      debugShowCheckedModeBanner: false,
      home: PantallaBienvenida(),
    );
  }
}

class PantallaBienvenida extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Image.network(
              'https://via.placeholder.com/150',
              width: 150,
              height: 150,
            ),
            SizedBox(height: 24),
            Text(
              'Bienvenido a MiMercado',
              style: TextStyle(
                fontSize: 24,
                fontWeight: FontWeight.bold,
                color: Colors.green[800],
              ),
            ),
            SizedBox(height: 8),
            Text(
              'Controla tu inventario desde tu celular.',
              style: TextStyle(fontSize: 16, color: Colors.grey[600]),
              textAlign: TextAlign.center,
            ),
            SizedBox(height: 32),
            ElevatedButton(
              onPressed: () {},
              style: ElevatedButton.styleFrom(
                backgroundColor: Colors.green[700],
                padding: EdgeInsets.symmetric(horizontal: 40, vertical: 16),
              ),
              child: Text(
                'Comenzar',
                style: TextStyle(fontSize: 18, color: Colors.white),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Guarda el archivo y escribe flutter run en tu terminal. En segundos verás una pantalla con una imagen, un título, un subtítulo y un botón verde.

Eso ya es una interfaz real. No es un ejercicio de práctica. Es el tipo de pantalla que tienen apps de miles de usuarios.

Lo que hace cada parte del código

Desglosemos el código para que lo entiendas sin memorizar nada:

runApp() le dice a Flutter cuál es el widget principal. Es el punto de arranque de todo.

MaterialApp configura el tema visual de tu app. Le puedes poner nombre, colores y la primera pantalla.

Scaffold es el esqueleto de una pantalla. Te da fondo, barra superior y botón flotante si los necesitas.

Column apila tus widgets uno debajo del otro. Sin ella, todos se amontonarían en el mismo punto.

SizedBox es una caja invisible. Úsala para crear espacio entre elementos. Es como un "enter" visual.

ElevatedButton tiene dos partes: onPressed (qué pasa al tocarlo) y child (qué se ve adentro).

Errores comunes al empezar con Flutter

Sofía, diseñadora gráfica de CDMX, decidió aprender Flutter para no depender de desarrolladores. Su primer error fue copiar código sin leer los mensajes de error. Flutter tiene mensajes de error muy descriptivos. Te dice exactamente en qué línea está el problema y muchas veces te sugiere la solución.

Estos son los errores más frecuentes al inicio:

Error 1: Olvidas la coma al final de un widget. En Flutter, casi todos los widgets dentro de una lista necesitan coma al final. Si ves un error raro, revisa las comas primero.

Error 2: Indentas mal el código. Flutter usa mucho anidamiento. Un widget dentro de otro dentro de otro. Si tu código se ve plano, probablemente algo está mal ubicado.

Error 3: Usas Image.asset sin agregar la imagen en pubspec.yaml. Si quieres usar imágenes locales, primero declara la carpeta en pubspec.yaml bajo flutter: assets:.

Error 4: Corres flutter run sin un emulador abierto. Necesitas abrir el emulador de Android Studio antes, o conectar tu teléfono con depuración USB activada.

Sofía tardó tres días en entender el sistema de widgets. Al cuarto día ya estaba construyendo su segunda pantalla. Hoy tiene una app de catálogo de productos para su negocio de diseño.

Agrega tu propia imagen local

¿Quieres usar una imagen tuya en lugar de un placeholder? Sigue estos pasos:

1. Crea una carpeta llamada assets/images/ dentro de tu proyecto.
2. Copia tu imagen ahí. Por ejemplo: logo.png.
3. Abre pubspec.yaml y agrega:

flutter:
  assets:
    - assets/images/logo.png

4. En tu código, cambia Image.network(...) por:

Image.asset('assets/images/logo.png', width: 150, height: 150)

Así de simple. Tu imagen aparecerá en la pantalla aunque no tengas conexión a internet.

Lo que acabas de construir importa

Hoy no solo instalaste una herramienta. Entendiste la lógica detrás de cómo se construyen apps modernas.

Tienes una pantalla funcional con imagen, texto y botón. Sabes qué hace cada widget. Y sabes cómo evitar los errores más comunes.

En la siguiente lección vas a agregarle navegación a tu app. El botón "Comenzar" va a llevar al usuario a una segunda pantalla. Eso es cuando una app empieza a sentirse de verdad como una app.

El camino de mil kilómetros empieza con un flutter run que funciona.