Flutter — conceptos clave, arquitectura y widgets

Qué es Flutter

Flutter es un SDK (Software Development Kit) y framework para crear interfaces de usuario, anunciado por Google en 2015. La primera versión estable de Flutter 1.0 se lanzó en diciembre de 2018. A diferencia de React Native, Flutter no utiliza un puente entre JavaScript y el código nativo — compila directamente a instrucciones nativas del procesador.

La característica clave de Flutter es su propio motor de renderizado. El framework no depende de UIKit (iOS) ni del sistema de vistas de Android. En su lugar, Flutter dibuja cada píxel de forma independiente a través de Skia (antes de 2024) o el nuevo motor Impeller. Esto garantiza una apariencia consistente en todas las plataformas y elimina los problemas de adaptación entre diferentes versiones del sistema operativo.

Según Statista 2024, Flutter ocupa el primer lugar entre los frameworks multiplataforma en popularidad: alrededor del 46% de los desarrolladores lo utilizan para el desarrollo móvil. El framework se utiliza en proyectos de Google Pay, Alibaba, eBay, BMW y Tencent.

Historia y versiones de Flutter

La primera versión alfa de Flutter se presentó en Dart Developer Summit en 2015 bajo el nombre Sky. En 2018 se lanzó Flutter 1.0 con soporte solo para iOS y Android. Flutter 2.0 (2021) añadió soporte para Web y Desktop. Flutter 3.0 (2022) introdujo soporte estable para macOS y Linux. Flutter 3.16 (2023) presentó Impeller, un nuevo motor de renderizado basado en Metal y Vulkan.

Flutter 3.22 (2024) incluye Impeller por defecto en iOS, soporte mejorado de Material Design 3, Dart 3.4 con extensiones de macros y soporte integrado de Native Assets para acceso directo a recursos de la plataforma. Google informa que Impeller reduce las sacudidas de fotogramas en un 90% en comparación con Skia.

El lenguaje Dart

Dart es un lenguaje de programación creado por Google en 2011 y utilizado en Flutter. Dart combina tipado estricto con capacidades de compilación JIT (para Hot Reload) y compilación AOT (para versiones de producción). Dart 3.0 (2023) introdujo pattern matching, clases selladas y records como características estables.

Null safety en Dart es una característica obligatoria introducida desde la versión 2.12. El compilador verifica todos los tipos anulables en tiempo de compilación, eliminando NullPointerException en tiempo de ejecución. Los tipos de datos (int, String, bool) son no anulables por defecto, y los valores anulables usan el sufijo ? (por ejemplo, String? name).

Arquitectura de Flutter

La arquitectura de Flutter se basa en un principio de tres niveles. La capa inferior es el motor (C/C++), responsable del renderizado, E/S y acceso a las API de la plataforma. La capa intermedia es el framework (Dart), que implementa el sistema de widgets, gestos, animaciones y navegación. La capa superior es la aplicación (Dart), que ensambla los widgets en un árbol.

Widgets y el árbol de widgets

En Flutter, todo es un widget. Los widgets son de dos tipos: StatelessWidget (inmutable, no almacena estado) y StatefulWidget (mutable, gestiona el estado a través de State). El árbol de widgets (Widget Tree) es una estructura jerárquica donde cada widget hijo está anidado dentro de un padre. Scaffold, AppBar, Container, Text, Column, Row — estos son los componentes básicos.

BuildContext es un objeto que comunica la posición del widget en el árbol. MediaQuery.of(context) obtiene las dimensiones de la pantalla, Theme.of(context) obtiene el tema actual. BuildContext se utiliza para navegación (Navigator.of(context)), acceso a InheritedWidget y traducción de configuración regional a través de Localizations.of.

El motor Impeller

Impeller es el motor de renderizado moderno de Flutter, escrito en C++ y que utiliza Metal (iOS/macOS) y Vulkan (Android). A diferencia de Skia, que redibujaba cada fotograma desde cero, Impeller compila los shaders anticipadamente y los almacena en un caché. Esto elimina los retrasos durante el renderizado inicial de escenas complejas y reduce la carga de la GPU.

Las pruebas del equipo de Google Flutter muestran que Impeller reduce el tiempo de compilación de shaders de 200–500 ms (Skia) a 1–3 ms. En iPhone 13 Pro, el renderizado por impulsos de Impeller alcanza 120 FPS sin caídas de fotogramas. En Android con Vulkan, ofrece 60 FPS estables incluso en dispositivos de gama media (Xiaomi Redmi Note 12).

Ejemplo de aplicación en Flutter

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Aplicación Flutter')),
        body: const Center(
          child: Text('¡Hola, Flutter!'),
        ),
      ),
    );
  }
}

Ventajas de Flutter

Base de código única — la principal ventaja de Flutter. Un proyecto en Dart se compila para iOS, Android, Web, Windows, macOS y Linux. Según Google, esto reduce el tiempo de desarrollo en un 30–50% en comparación con proyectos separados para iOS y Android. Alibaba redujo el tiempo de lanzamiento de versiones en un 30% después de migrar a Flutter.

Rendimiento de Flutter es cercano al nativo. La compilación AOT de Dart a código máquina ARM y x86_64 elimina los retrasos de interpretación. El motor Impeller garantiza 60 FPS incluso en dispositivos de 2018 (iPhone XR, Samsung Galaxy S9). Según Google, el 99.5% de los fotogramas en aplicaciones Flutter se renderizan sin sacudidas.

Hot Reload — tecnología de actualización instantánea de código. El desarrollador cambia el código fuente, guarda el archivo, y Flutter reconstruye el árbol de widgets en 300–800 ms sin perder el estado actual de la aplicación. Esto acelera las iteraciones de diseño de UI: se pueden cambiar márgenes, colores y animaciones en segundos sin esperar una reconstrucción completa.

Material Design 3 y el lenguaje de diseño nativo Cupertino (estilo iOS) están incluidos en el paquete estándar de Flutter. Los widgets de Material 3 admiten colores dinámicos (Material You), diseño adaptable y animaciones de transición entre pantallas. CupertinoPageTransition y CupertinoNavigationBar imitan el comportamiento del navegador nativo de iOS.

Personalización de widgets no requiere crear Vistas personalizadas en cada plataforma. Simplemente sobrescribe build() y devuelve un nuevo widget. Los paquetes de animación (AnimatedContainer, Hero, TweenAnimationBuilder) y gestos (GestureDetector, Dismissible) cubren el 95% de los escenarios de animación de UI sin escribir código de plataforma.

Ecosistema y paquetes de Flutter

pub.dev es el registro oficial de paquetes para Dart y Flutter. A julio de 2024, hay más de 45,000 paquetes publicados en el registro. La instalación de un paquete se realiza con el comando flutter pub add <nombre_del_paquete>. Pub resuelve automáticamente las dependencias, verifica la compatibilidad de versiones y genera pubspec.lock.

La gestión de estado en Flutter es uno de los desafíos arquitectónicos clave. Además de flutter_bloc, las soluciones populares incluyen: Provider (recomendado por Google, usa InheritedWidget), Riverpod (una versión rediseñada de Provider con seguridad en tiempo de compilación) y GetX (todo-en-uno: estado, enrutamiento, DI). Provider sigue siendo el más simple para empezar: ChangeNotifierProvider envuelve el modelo, y Consumer reconstruye el widget cuando los datos cambian.

Las pruebas en Flutter se admiten en tres niveles. Las pruebas unitarias (flutter test) verifican funciones y clases sin UI. Las pruebas de widgets (testWidgets) renderizan widgets individuales en un entorno aislado. Las pruebas de integración (IntegrationTest) ejecutan la aplicación completa en un dispositivo o simulador. Flutter 3.22 añadió soporte para pruebas de parche a través de análisis de parches y un informe mejorado de cobertura de código.

Paquetes populares

dio es un cliente HTTP con soporte para interceptores, tiempos de espera y FormData. Se utiliza en el 40% de los proyectos Flutter en GitHub. Dio admite la intercepción de solicitudes para registro, reintentos y adición de tokens de autorización. La segunda biblioteca más popular es retrofit, que genera clientes API tipificados.

flutter_bloc es una biblioteca de gestión de estado basada en el patrón BLoC (Business Logic Component). BlocProvider pasa estados hacia abajo en el árbol de widgets, BlocBuilder reconstruye la UI cuando cambia el estado, y BlocListener maneja efectos secundarios (navegación, SnackBar). Cubit es una versión simplificada de BLoC sin eventos.

go_router es navegación declarativa para Flutter de Google. Las rutas se describen en la configuración de GoRouter con soporte para rutas anidadas, redirecciones y deep links. ShellRoute divide la navegación entre las pestañas de BottomNavigationBar. GoRouter 14.0 admite rutas type-safe y StatefulShellRoute con preservación del estado de las pestañas.