¿Por qué Flutter?

Flutter es el framework de UI multiplataforma de Google que te permite construir aplicaciones nativas para Android, iOS, Web y escritorio desde un solo código base. Sus ventajas:

• Hot Reload:Cambios reflejados en milisegundos
• Rendimiento nativo:Compilado a código ARM nativo
• Widgets personalizados:UI completamente personalizable
• Una sola base de código:3 plataformas con el mismo código

¿Por qué OpenAPI?

OpenAPI es el estándar industrial para documentar APIs REST. Al integrarlo con Flutter:

• API First:El contrato define la comunicación
• Generación automática:Cliente Dart generado desde la spec
• Tipado seguro:DTOs generados con tipos de Dart
• Documentación viva:Swagger UI interactivo

El flujo API First consiste en: diseñar la API con OpenAPI → generar el cliente Dart → consumir desde Flutter.

¿Por qué Microservicios?

La arquitectura de microservicios permite escalar el desarrollo de forma independiente:

• Desacoplamiento:Cada servicio es independiente
• Escalabilidad:Escalar solo lo necesario
• Tecnología heterogénea:Diferentes stacks por servicio
• Despliegue independiente:Cada servicio se despliega solo

Flutter se convierte en el frontend universal que consume estos microservicios, proporcionando una experiencia unificada al usuario.

Flutter 3.x

Framework de UI multiplataforma de Google. Usa Dart como lenguaje y compila a código nativo ARM para Android e iOS, y a JavaScript/WebAssembly para la web.

• Widgets Material Design y Cupertino
• Hot Reload en tiempo real
• Rendering propio (Skia/Impeller)
• Renderización a 60/120 FPS

Dart 3.x

Lenguaje moderno, tipado y compilado. Soporta programación orientada a objetos, funcional y reactiva.

• Null safety incorporado
• Records y pattern matching
• Async/await nativo
• Compilación AOT y JIT

OpenAPI Generator

Herramienta que genera automáticamente clientes API, modelos DTO y documentación a partir de un archivo de especificación OpenAPI (YAML/JSON).

• Genera modelos tipados en Dart
• Cliente HTTP con Dio
• Soporte para tokens JWT
• Integración con build_runner

Riverpod

Manejo de estado reactivo para Flutter. Heredero de Provider, pero más seguro, testable y flexible.

• Inyección de dependencias nativa
• Providers auto-disposables
• Facilita el testing con override
• Sin dependencia de BuildContext

Dio

Cliente HTTP para Dart con interceptors, timeouts, cancelación y Transformers.

• Interceptors para tokens y logging
• Timeouts configurables
• Cancelación de peticiones
• Parseo automático de JSON

GoRouter

Enrutador declarativo para Flutter con soporte para rutas protegidas, redirecciones y deep linking.

• Rutas tipadas y anidadas
• Redirect condicional (auth)
• Deep links y parámetros URL
• Animaciones entre rutas

Variables y Tipos

Dart 3 tiene null safety, inferencia de tipos y tipado fuerte.

// --- Tipos básicos con null safety ---
int edad = 21;
double precio = 19.99;
String nombre = 'Flutter';
bool activo = true;

// --- Nullable (?) vs non-nullable ---
String? apodo;       // Puede ser null
int cantidad = 0;    // Nunca será null

// --- Type inference: var, final, const ---
var mensaje = 'Hola Dart';       // String inferido
final url = 'api.google.com';     // Inmutable en runtime
const pi = 3.1416;                // Constante en compilación

// --- Records (Dart 3+) ---
(String, int) usuario = ('Ana', 25);
({String nombre, int edad}) persona = (
  nombre: 'Luis',
  edad: 30,
);

Funciones

Dart soporta funciones de primera clase, parámetros opcionales y expresiones lambda.

// --- Función con parámetros posicionales ---
double sumar(double a, double b) => a + b;

// --- Parámetros nombrados (required / opcional) ---
void saludar({required String nombre, String? apellido}) {
  print('Hola, $nombre ${apellido ?? ''}');
}

// --- Función como parámetro (callback) ---
void procesar(List<int> items, void Function(int) cb) {
  for (final item in items) cb(item);
}

// --- Lambda / closure ---
final duplicar = (int x) => x * 2;

// --- Pattern matching (Dart 3+) ---
String describir(dynamic valor) => switch (valor) {
  int v      => 'Entero: $v',
  String s   => 'Texto: $s',
  _          => 'Desconocido',
};

Clases y Objetos

Programación orientada a objetos con constructores, herencia y mixins.

// --- Clase con constructor posicional ---
class Producto {
  final int id;
  final String nombre;
  final double precio;

  const Producto(this.id, this.nombre, this.precio);

  // Factory constructor desde Map
  factory Producto.fromJson(Map<String, dynamic> json) =>
    Producto(json['id'], json['nombre'], json['precio']);
}

// --- Herencia con super parámetros ---
class ProductoElectronicos extends Producto {
  final int garantiaMeses;

  ProductoElectronicos(
    super.id, super.nombre, super.precio, this.garantiaMeses);
}

Async / Await

Programación asíncrona con Futures, Streams y async/await.

// --- Future con async/await ---
Future<String> obtenerToken() async {
  await Future.delayed(Duration(seconds: 1));
  return 'token_jwt_123';
}

// --- Llamada secuencial ---
Future<void> cargarDatos() async {
  final token = await obtenerToken();
  final datos = await httpGet('/productos', token);
  print(datos);
}

// --- Streams con async* / yield ---
Stream<int> contador() async* {
  for (int i = 0; i < 5; i++) {
    await Future.delayed(Duration(seconds: 1));
    yield i;
  }
}

// --- Manejo de errores con try / catch ---
Future<void> obtenerProductos() async {
  try {
    final res = await api.listar();
    print('Productos: $res');
  } on DioException catch (e) {
    print('Error HTTP: ${e.response?.statusCode}');
  } catch (e) {
    print('Error inesperado: $e');
  }
}

Configuración de GoRouter

GoRouter reemplaza al Navigator tradicional con un enfoque declarativo.

import 'package:go_router/go_router.dart';

final routerProvider = Provider<GoRouter>((ref) {
  final authState = ref.watch(authProvider);

  return GoRouter(
    initialLocation: '/productos',
    redirect: (context, state) {
      final estaLogueado = authState.estaAutenticado;
      final login = state.matchedLocation == '/login';

      if (!estaLogueado && !login) return '/login';
      if (estaLogueado && login) return '/productos';
      return null;
    },
    routes: [
      GoRoute(
        path: '/login',
        builder: (_, __) => LoginScreen(),
      ),
      GoRoute(
        path: '/productos',
        builder: (_, __) => ProductosScreen(),
        routes: [
          GoRoute(
            path: ':id',
            builder: (_, state) =>
              ProductoDetalleScreen(
                id: int.parse(state.pathParameters['id']!),
              ),
          ),
        ],
      ),
    ],
  );
});

Rutas Protegidas

El redirect de GoRouter evalúa cada navegación y redirige según el estado de autenticación.

// Provider de autenticación
@riverpod
class Auth extends _$Auth {
  @override
  AuthState build() => AuthState.noAutenticado();

  Future<void> login(String user, String pass) async {
    state = const AuthState.cargando();
    try {
      final token = await api.login(user, pass);
      state = AuthState.autenticado(token);
    } catch (e) {
      state = AuthState.error(e.toString());
    }
  }

  void logout() => state = AuthState.noAutenticado();
}

// Uso en widgets
class LoginScreen extends ConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    return Scaffold(
      body: Center(
        child: FilledButton(
          onPressed: () => ref.read(authProvider.notifier).login(
            'admin', '1234',
          ),
          child: Text('Iniciar sesión'),
        ),
      ),
    );
  }
}

¿Qué es OpenAPI Generator?

OpenAPI Generator toma un archivo de especificación (YAML/JSON) y genera automáticamente:

• Modelos DTO (Data Transfer Objects)
• Cliente API con métodos tipados
• Configuración de autenticación
• Manejo de errores consistente

Esto elimina errores de tipeo, campos faltantes y URLs mal escritas.

Generar el Cliente Dart

Desde la terminal, ejecuta OpenAPI Generator con el template Dart.

# Usando openapi-generator-cli (Java)
openapi-generator generate \
  -i openapi.yaml \
  -g dart-dio \
  -o lib/api \
  --additional-properties=pubName=inventario_api

# O usando la imagen Docker
docker run --rm -v ${PWD}:/local openapitools/openapi-generator-cli \
  generate -i /local/openapi.yaml \
  -g dart-dio -o /local/lib/api