Entorno de desarrollo

Antes de escribir código, necesitamos configurar el entorno. ¡No te preocupes, es más fácil de lo que parece! Sigue estos pasos cuidadosamente.

Instalación

1. Descarga Flutter:
   • Visita flutter.dev y descarga el SDK para tu sistema operativo.
   • Descomprime el archivo en una carpeta (ejemplo: C:\flutter en Windows, o ~/flutter en macOS/Linux).
2. Configura el PATH:
   • Windows: Agrega C:\flutter\bin a la variable de entorno PATH en Panel de Control > Sistema > Configuración avanzada.
   • macOS/Linux: Edita tu archivo de configuración (~/.zshrc o ~/.bashrc) y añade:

     export PATH="$PATH:`pwd`/flutter/bin"
     

3. Verifica la instalación:
   • Abre una terminal y ejecuta flutter doctor. Este comando verifica si tienes todas las herramientas necesarias (Dart, Android SDK, etc.).
   • Resuelve cualquier problema que reporte (por ejemplo, acepta licencias de Android con flutter doctor --android-licenses).

Requisitos adicionales:

• Windows: Instala Android Studio para herramientas de Android.
• macOS: Instala Xcode para desarrollo iOS (necesario para emuladores iOS).
• Linux: Instala dependencias como libglu1-mesa para Android.

Configuración del IDE

Recomendamos dos opciones:

• VS Code (ideal para principiantes):
  • Instala VS Code desde code.visualstudio.com.
  • Añade las extensiones Flutter y Dart desde el marketplace.
  • Beneficio: Ligero, con soporte para hot reload y debugging.
• Android Studio:
  • Descarga desde developer.android.com.
  • Instala el plugin Flutter durante la configuración.
  • Beneficio: Integra emuladores y herramientas Android.

Emuladores y dispositivos físicos

• Emuladores:
  • En Android Studio, usa el AVD Manager para crear un dispositivo virtual Android.
  • En macOS, usa Xcode para configurar un simulador iOS.
• Dispositivos físicos:
  • Android: Activa el modo desarrollador (Ajustes > Acerca del teléfono > Toca “Número de compilación” 7 veces) y habilita depuración USB.
  • iOS: Conecta el dispositivo vía USB y confía en el equipo desde los ajustes.
• Verifica dispositivos disponibles con flutter devices y ejecuta tu app con flutter run.

Consejo práctico: Si flutter doctor muestra errores, resuélvelos uno por uno. Por ejemplo, instala herramientas faltantes o actualiza el JDK.

Nota importante: Necesitas Git instalado para descargar dependencias. Descárgalo desde git-scm.com si no lo tienes.

Primeros pasos

¡Es hora de crear tu primera app! Vamos a construir un proyecto desde cero y entender cómo funciona.

Crear un proyecto desde cero

1. Abre una terminal y ejecuta:

   flutter create mi_primer_app
   

2. Navega al directorio del proyecto:

   cd mi_primer_app
   

3. Ejecuta la app para probarla:

   flutter run
   

   Selecciona un dispositivo (emulador o físico) si hay varios.

El comando flutter create genera una estructura básica:

• pubspec.yaml: Define dependencias, assets y configuraciones del proyecto.
• lib/main.dart: El archivo principal donde comienza tu app.
  • main(): Punto de entrada que ejecuta runApp(MyApp()).
  • MyApp: Un widget raíz (StatelessWidget) que configura el tema y la pantalla inicial.
  • MyHomePage: Un StatefulWidget con un ejemplo de contador.
• android/ y ios/: Carpetas con configuraciones nativas para cada plataforma.
• test/: Para pruebas unitarias.

“Hola Mundo”

Edita lib/main.dart para crear una app simple que muestre “Hola Mundo”:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Hola Mundo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Mi Primera App'),
        ),
        body: Center(
          child: Text(
            'Hola Mundo',
            style: TextStyle(fontSize: 30, fontWeight: FontWeight.bold),
          ),
        ),
      ),
    );
  }
}

• MaterialApp: Configura la estructura básica de la app (tema, navegación).
• Scaffold: Proporciona una estructura con barra superior (AppBar) y cuerpo (body).
• Center: Centra el widget hijo (Text) en la pantalla.

Ejecuta con flutter run. Usa hot reload (presiona ‘r’ en la terminal o guarda el archivo) para ver cambios instantáneos.

Tip práctico: En VS Code o Android Studio, usa Ctrl+S (o Cmd+S) para activar hot reload automáticamente.

Prácticas

¡La práctica hace al maestro! Vamos a reforzar lo aprendido con ejercicios que puedes implementar en tu proyecto.

Ejercicio 1: App con un botón que muestra un mensaje

Modifica lib/main.dart para crear una app con un botón que muestre un mensaje emergente (SnackBar) al pulsarlo:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Ejercicio Botón',
      theme: ThemeData(primarySwatch: Colors.green),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Ejercicio Botón'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            ScaffoldMessenger.of(context).showSnackBar(
              SnackBar(
                content: Text('¡Botón pulsado!'),
                duration: Duration(seconds: 2),
              ),
            );
          },
          child: Text('Púlsame', style: TextStyle(fontSize: 18)),
        ),
      ),
    );
  }
}

Instrucciones:

1. Copia el código en lib/main.dart.
2. Ejecuta con flutter run.
3. Pulsa el botón y observa el mensaje emergente.

Variación: Cambia el texto del SnackBar a algo personalizado, como “¡Bien hecho!”.

Ejercicio 2: Personalizar colores y texto

Modifica la app para personalizar colores y estilos:

1. Cambia el color principal del tema a rojo:

   theme: ThemeData(primarySwatch: Colors.red),
   

2. Cambia el estilo del botón a un fondo azul y texto blanco:

   ElevatedButton(
     style: ElevatedButton.styleFrom(
       backgroundColor: Colors.blue,
       foregroundColor: Colors.white,
     ),
     onPressed: () { ... },
     child: Text('Púlsame', style: TextStyle(fontSize: 18)),
   ),
   

Instrucciones:

• Aplica los cambios y prueba con hot reload.
• Experimenta con otros colores (ejemplo: Colors.purple, Colors.teal).

Mini-reto: Agregar un segundo botón con otra acción

Crea una app con dos botones: uno muestra un SnackBar y otro incrementa un contador. Aquí está el código completo:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Mini Reto',
      theme: ThemeData(primarySwatch: Colors.teal),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _contador = 0;

  void _mostrarMensaje() {
    ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(content: Text('¡Acción completada!'), duration: Duration(seconds: 2)),
    );
  }

  void _incrementarContador() {
    setState(() {
      _contador++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Mini Reto'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('Contador: $_contador', style: TextStyle(fontSize: 24)),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: _mostrarMensaje,
              child: Text('Mostrar Mensaje', style: TextStyle(fontSize: 18)),
            ),
            SizedBox(height: 10),
            ElevatedButton(
              onPressed: _incrementarContador,
              style: ElevatedButton.styleFrom(
                backgroundColor: Colors.orange,
                foregroundColor: Colors.white,
              ),
              child: Text('Incrementar', style: TextStyle(fontSize: 18)),
            ),
          ],
        ),
      ),
    );
  }
}

Instrucciones:

1. Reemplaza el código en lib/main.dart.
2. Prueba ambos botones: uno muestra un SnackBar, otro incrementa el contador.
3. Personaliza los colores o el texto de los botones.

Desafío adicional: Agrega un tercer botón que reste 1 al contador. ¡Inténtalo solo!

Consejo para evitar errores:

• Asegúrate de usar setState para actualizar el contador, o la UI no reflejará los cambios.
• Verifica que tu emulador o dispositivo esté conectado antes de ejecutar flutter run.
• Si encuentras errores, revisa la salida de la terminal o usa flutter doctor.

Consejos

• Explora la documentación: El sitio oficial de Flutter (flutter.dev) tiene tutoriales y ejemplos.
• Usa pub.dev: Busca paquetes para agregar funcionalidades como animaciones o conexión a APIs.
• Practica regularmente: Crea pequeños proyectos (una lista de tareas, un conversor de unidades) para ganar confianza.
• Únete a la comunidad: Foros como Stack Overflow, Reddit o Discord de Flutter son excelentes para resolver dudas.

¡Tu próximo paso!

Si llegaste hasta aquí, ¡Felicidades! Has dado tus primeros pasos en Flutter y Dart. Ahora que sabes cómo configurar tu entorno, entender los widgets y crear una app básica, estás listo para construir proyectos más complejos. Prueba crear una app con una lista de elementos o un formulario simple. La clave es experimentar y divertirte mientras aprendes. ¡Tú puedes crear la próxima aplicación! Sigue codificando y, si te atascas, la comunidad de Flutter está para ayudarte. ¡A por ello!