Tutorial Flutter: Guía Completa para Crear Aplicaciones Móviles Multiplataforma con Dart

Bienvenido a este tutorial completo dirigido a desarrolladores principiantes e intermedios que desean adentrarse en el desarrollo de aplicaciones móviles multiplataforma utilizando Flutter y Dart. Aquí aprenderás paso a paso cómo configurar tu entorno, crear widgets, manejar el estado, navegar entre pantallas y conectar tu app con APIs externas.

Flutter es un framework desarrollado por Google que permite construir apps nativas para Android, iOS, web y escritorio desde un único código base usando Dart como lenguaje de programación. La combinación de Flutter y Dart es perfecta para quienes buscan una experiencia moderna, rápida y eficiente en programación móvil multiplataforma.

Configuración del Entorno

Antes de empezar a crear tu app Flutter, necesitas preparar tu computador para compilar y ejecutar proyectos.

1. Instalar Flutter SDK

Dirígete a la página oficial de Flutter y descarga el SDK para tu sistema operativo (Windows, macOS o Linux).
Sigue las instrucciones para extraer y configurar la variable de entorno PATH para que el comando flutter sea accesible desde la terminal.

2. Instalar un Editor de Código

Flutter funciona muy bien con:

Visual Studio Code (VSCode): ligereza y muchos plugins.
Android Studio: entorno más pesado pero incluye herramientas nativas para Android.

3. Instalar Plugins de Flutter y Dart

En VSCode o Android Studio instalaremos los plugins que te ayudarán con autocompletado y depuración.

4. Verificar la instalación

Abre una terminal y ejecuta:

flutter doctor

1 2	flutter doctor

Este comando te mostrará el estado de la instalación y si falta configurar algo (como emuladores).

5. Crear un nuevo proyecto Flutter

Para crear un proyecto desde la terminal ejecuta:

flutter create mi_app_flutter
cd mi_app_flutter
flutter run

flutter create mi_app_flutter

cd mi_app_flutter

flutter run

Esto genera la estructura básica y ejecuta la app demo en tu dispositivo/emulador.

Creación de Widgets Básicos

Flutter se basa en la composición de widgets, que son bloques de construcción visual y funcional.

Widget Stateless vs Stateful

StatelessWidget: widget inmutable que no cambia con el tiempo.
StatefulWidget: widget dinámico que puede cambiar su estado y actualizarse.

Ejemplo: Crear un widget Stateless

import 'package:flutter/material.dart';

class MiWidgetEstático extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text(
        'Hola Flutter!',
        style: TextStyle(fontSize: 24, color: Colors.blue),
      ),
    );
  }
}

import 'package:flutter/material.dart';

class MiWidgetEstático extends StatelessWidget {

@override

Widget build(BuildContext context) {

return Center(

child: Text(

'Hola Flutter!',

style: TextStyle(fontSize: 24, color: Colors.blue),

);

}

Ejemplo: Crear un widget Stateful con contador

import 'package:flutter/material.dart';

class ContadorWidget extends StatefulWidget {
  @override
  _ContadorWidgetState createState() => _ContadorWidgetState();
}

class _ContadorWidgetState extends State<ContadorWidget> {
  int _contador = 0;

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Contador Flutter'),
      ),
      body: Center(
        child: Text(
          'Has presionado el botón $_contador veces.',
          style: TextStyle(fontSize: 20),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementarContador,
        child: Icon(Icons.add),
      ),
    );
  }
}

import 'package:flutter/material.dart';

class ContadorWidget extends StatefulWidget {

@override

_ContadorWidgetState createState() => _ContadorWidgetState();

}

class _ContadorWidgetState extends State<ContadorWidget> {

int _contador = 0;

void _incrementarContador() {

setState(() {

_contador++;

});

}

@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(

title: Text('Contador Flutter'),

body: Center(

child: Text(

'Has presionado el botón $_contador veces.',

style: TextStyle(fontSize: 20),

floatingActionButton: FloatingActionButton(

onPressed: _incrementarContador,

child: Icon(Icons.add),

);

}

Manejo de Estado en Flutter

El manejo efectivo del estado es crucial para que la app actualice su interfaz según cambios en datos.

setState: La forma más sencilla

El ejemplo anterior muestra setState, que notifica a Flutter que el widget debe reconstruirse.

Otras opciones populares

Para apps más complejas conviene usar patrones como Provider, BLoC o Riverpod. Pero para comenzar, setState es suficiente.

Ejemplo con setState

void _cambiarTexto() {
  setState(() {
    _texto = 'Texto actualizado!';
  });
}

void _cambiarTexto() {

setState(() {

_texto = 'Texto actualizado!';

});

}

Navegación entre Pantallas

Una app móvil suele tener varias pantallas y debes navegar entre ellas.

Navegación básica con Navigator

Navigator.push agrega una nueva pantalla a la pila.
Navigator.pop regresa a la pantalla anterior.

Ejemplo:

// Pantalla principal
class PantallaPrincipal extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Pantalla Principal')),
      body: Center(
        child: ElevatedButton(
          child: Text('Ir a Detalle'),
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => PantallaDetalle()),
            );
          },
        ),
      ),
    );
  }
}

// Pantalla detalle
class PantallaDetalle extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Pantalla Detalle')),
      body: Center(
        child: ElevatedButton(
          child: Text('Volver'),
          onPressed: () {
            Navigator.pop(context);
          },
        ),
      ),
    );
  }
}

// Pantalla principal

class PantallaPrincipal extends StatelessWidget {

@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(title: Text('Pantalla Principal')),

body: Center(

child: ElevatedButton(

child: Text('Ir a Detalle'),

onPressed: () {

Navigator.push(

context,

MaterialPageRoute(builder: (context) => PantallaDetalle()),

);

}

// Pantalla detalle

class PantallaDetalle extends StatelessWidget {

@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(title: Text('Pantalla Detalle')),

body: Center(

child: ElevatedButton(

child: Text('Volver'),

onPressed: () {

Navigator.pop(context);

);

}

Conexión con APIs

Para crear apps dinámicas es esencial conectar con servicios web y consumir datos usando APIs.

Paquete http

Flutter recomienda la librería http para hacer peticiones HTTP.

Configurar dependencia

Agrega en el archivo pubspec.yaml:

dependencies:
  http: ^0.13.5

dependencies:

http: ^0.13.5

Luego ejecuta:

flutter pub get

1 2	flutter pub get

Ejemplo práctico: Obtener datos JSON

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';

class ApiDemo extends StatefulWidget {
  @override
  _ApiDemoState createState() => _ApiDemoState();
}

class _ApiDemoState extends State<ApiDemo> {
  String _data = 'Cargando...';

  Future<void> _fetchDatos() async {
    final url = Uri.parse('https://jsonplaceholder.typicode.com/posts/1');

    try {
      final response = await http.get(url);

      if (response.statusCode == 200) {
        final jsonResponse = json.decode(response.body);

        setState(() {
          _data = jsonResponse['title'];
        });
      } else {
        setState(() {
          _data = 'Error: Estado ${response.statusCode}';
        });
      }
    } catch (e) {
      setState(() {
        _data = 'Error al obtener datos';
      });
    }
  }

  @override
  void initState() {
    super.initState();
    _fetchDatos();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Demo API Flutter')),
      body: Center(
        child: Text(_data, style: TextStyle(fontSize: 18)),
      ),
    );
  }
}

import 'package:flutter/material.dart';

import 'package:http/http.dart' as http;

import 'dart:convert';

class ApiDemo extends StatefulWidget {

@override

_ApiDemoState createState() => _ApiDemoState();

}

class _ApiDemoState extends State<ApiDemo> {

String _data = 'Cargando...';

Future<void> _fetchDatos() async {

final url = Uri.parse('https://jsonplaceholder.typicode.com/posts/1');

try {

final response = await http.get(url);

if (response.statusCode == 200) {

final jsonResponse = json.decode(response.body);

setState(() {

_data = jsonResponse['title'];

});

} else {

setState(() {

_data = 'Error: Estado ${response.statusCode}';

});

}

} catch (e) {

setState(() {

_data = 'Error al obtener datos';

});

}

@override

void initState() {

super.initState();

_fetchDatos();

}

@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(title: Text('Demo API Flutter')),

body: Center(

child: Text(_data, style: TextStyle(fontSize: 18)),

);

}

En este ejemplo se realiza una petición HTTP GET a un API pública y se muestra el título del post.

Conclusión y Buenas Prácticas

Has aprendido a:

Configurar tu entorno para desarrollo Flutter y Dart.
Crear widgets básicos tanto estáticos como dinámicos.
Manejar el estado con setState.
Navegar entre diferentes pantallas.
Conectar tu aplicación con APIs externas.

Buenas prácticas para el desarrollo con Flutter:

Planifica la estructura de tus widgets para mantener el código limpio.
Usa const siempre que sea posible para mejorar rendimiento.
Divide la UI en widgets pequeños y reutilizables.
Comprende y elige el patrón de manejo de estado más adecuado según la complejidad.
Prueba tu aplicación en diferentes dispositivos y tamaños.

¡Comienza ahora a crear tu primera app Flutter y lleva tus habilidades de programación móvil multiplataforma al siguiente nivel! No olvides consultar la documentación oficial de Flutter para seguir aprendiendo.

Recuerda que este tutorial Flutter está pensado para que des tus primeros pasos en desarrollo apps móviles Dart con una guía clara, práctica y amigable. ¡Mucho éxito!