- 👤 Andrés Cruz

🇺🇸 In english

Ver Listado »

La Guía Definitiva de Flutter: Desarrollo Multiplataforma de Cero a Experto

Flutter ha revolucionado el mundo del desarrollo de aplicaciones. Creado por Google, este kit de herramientas de UI de código abierto nos permite construir aplicaciones hermosas y compiladas nativamente para móvil, web y escritorio, todo desde una única base de código. 

Su promesa no es solo la eficiencia, sino también la creación de experiencias de usuario fluidas y expresivas, sin comprometer el rendimiento.

Este no es un simple tutorial. Es un viaje completo que te llevará desde la instalación inicial y los fundamentos del lenguaje Dart, a través del vasto universo de widgets, la construcción de layouts complejos y responsivos, la crucial gestión del estado y la navegación, hasta la integración con backends, el manejo de bases de datos locales, y la exploración de fronteras avanzadas como el desarrollo de juegos 2D con Flame y la integración de pasarelas de pago. 

Finalmente, te guiaremos en el proceso de llevar tu aplicación a producción, cubriendo desde la personalización de temas hasta la generación de los archivos finales para las tiendas de aplicaciones.

Si alguna vez has soñado con construir aplicaciones de alta calidad para múltiples plataformas sin tener que mantener bases de código separadas, estás en el lugar correcto. Prepárate para dominar Flutter, una herramienta que no solo cambia la forma en que desarrollamos, sino también lo que es posible crear.

Flutter es un framework que nació con el propósito de desarrollar aplicaciones móviles rápidamente, provee un kit de desarrollo de software de interfaz de usuario (UI) de código abierto creado por Google y fue lanzado en mayo de 2017 y desde entonces ha tenido actualizaciones constantes agregando todo tipo de funcionalidades; su ventaja principal es la de que solamente es necesario un código fuente para poder desarrollar en múltiples proyectos, con un solo código base podemos exportar la aplicación a Android, iOS, Windows, MacOS, Linux y Web y podemos personalizar el código aplicando código local a las plataformas a exportar o simplemente realizando condicionales y preguntando por la plataforma en la cual se ejecute.

Cuenta con una curva de aprendizaje menor que trabajar de manera nativa con Android o iOS; es un framework que a tenido un crecimiento de lo más interesante, dando más componentes y mejorando su compatibilidad  y estabilidad, corrección de errores, a lo largo del tiempo con las últimas versiones de este framework y vamos a hablar un poco sobre todo esto...

Una de las características más importantes de Flutter es el hot reload o recarga en caliente que permite a los desarrolladores ver los cambios en el código en tiempo real.

¿Qué es Flutter?

Flutter es un framework que también proporciona de una SDK o toolkit (conjunto de herramientas) que permiten crear interfaces de software; inicialmente para aplicaciones móviles en Android e iOS de manera nativa, pero fue evolucionando hasta permitir crear aplicaciones de escritorio y web.

Flutter transforma el proceso de desarrollo de aplicaciones. Cree, pruebe e implemente hermosas aplicaciones móviles, web, de escritorio e integradas desde una única base de código.

Inicios de Flutter

Tomando como referencia, otros frameworks para desarrollar aplicaciones móviles (aunque a partir de la versión 3 de Flutter ya es posible desarrollar en otras plataformas de manera estable, es importante mencionar que los orígenes de Flutter partieron en el desarrollo móvil con Android e iOS), Flutter es relativamente nuevo.

Flutter ha experimentado una gran gran evolución a lo largo de los años, veamos los puntos más importantes:

  1. Se llamó Sky, en su primera aparición en Dart Developer Summit 2015 presentado por Eric Seidel. Se presentó como la evolución de varios experimentos de Google para crear aplicaciones móviles de una manera más fluida.
  2. Presentado como Flutter en 2016 y con su primer lanzamiento alfa en mayo de 2017, ya permitía crear aplicaciones para Android e iOS.
  3. Flutter tuvo una gran acogida por la comunidad y a partir de la retroalimentación de esta u otros factores, se logró una constante evolución hasta llegar a una versión estable en 2018.
  4. En 2021 se presentó Flutter 2 que trae como novedades el soporte para aplicaciones web y la protección contra datos nulos (Null safety).
  5. En el 2022 se presenta Flutter 3 cuya principal novedad es la de poder desarrollar de manera estable aplicaciones de escritorio para Linux, Windows y MacOS.

Ventajas de Flutter

Las ventajas principales que tiene Flutter, son dos:

  1. Desarrollo conjunto para aplicaciones móviles y de escritorio (sin contar el desarrollo de aplicaciones web), lo que significa que, con un solo proyecto podemos desarrollar en múltiples plataformas.
  2. Desarrollo nativo para plataformas, las aplicaciones generadas en Flutter son nativas:
    1. En el caso del desarrollo móvil, no son aplicaciones web empaquetadas (webview) a diferencia de otras tecnologías como Cordova o Ionic.
    2. En el caso de aplicaciones de escritorio para Windows y MacOS, no son aplicaciones web empaquetadas en un ejecutable a diferencia de otras tecnologías como Electron.

Es posible desarrollar tanto para móvil, como para escritorio como para web con un solo proyecto (un solo código base y definiendo pequeños cambios en el proyecto para adaptar correctamente a cada plataforma) este último punto, pocos (o ningún) frameworks lo permiten; que también brindan soluciones similares a los problemas que pretenden resolver.

Características de Flutter

Las principales razones por las que Flutter empezó a tener tanta importancia entre los desarrolladores de todo el mundo es la capacidad de desarrollar aplicaciones de forma rápida y sencilla con un rendimiento y una experiencia de usuario que es prácticamente igual a las aplicaciones nativas. 

Y en el desarrollo, posee una sintaxis muy limpia gracias al API declarativo y se puede ver el resultado en tiempo real mientras se escribe el código.

Veamos estas características más en detalle:

1. Tiempo de desarrollo de las aplicaciones 

Generalmente, la ejecución de una aplicación en Android usando Android Studio tarda varios segundos, este tiempo se hace considerable, cuando, por ejemplo, queremos editar esos pequeños detalles en la interfaz gráfica; que, si bien es cierto que, Android Studio tiene una vista previa de diseño, muchas veces no funciona de la manera esperada.

La función de hot reloading o "recarga en caliente" de Flutter, permite ver los cambios aplicados casi al instante, sin siquiera perder el estado actual de la aplicación. Y esto es exactamente lo que hace que el desarrollo de aplicaciones de Flutter sea varias veces más rápido debido a la mayor velocidad de desarrollo.

Además, el framework de Flutter trae consigo una enorme variedad de widgets listos para usar. La mayoría de ellos son increíblemente personalizables, lo que le ahorra tiempo como ningún otro framework ya que, para gran parte de la aplicación, usamos los widgets como piezas de LEGO que vamos colocando en base a nuestras necesidades. 

Flutter proporciona una API declarativa en base a widgets que a la final, reduce notablemente el tiempo de desarrollo.

En definitiva, el tiempo de desarrollo de aplicaciones en Flutter es mucho menor en comparación con crear la misma aplicación de manera separada para Android e iOS. Esto tiene que ver mucho con los puntos señalados anteriormente y que no hay que escribir ningún código específico para cada plataforma. 

Cualquier interfaz de usuario basada en 2D se puede implementar en Flutter sin interactuar con una aplicación nativa equivalente.

2. Rendimiento de la aplicación

El rendimiento de la aplicación en Flutter es prácticamente el mismo que el de una aplicación nativa; Flutter es capaz de proporcionar un rendimiento de 60 frames por segundo (fps), o un rendimiento de 120 fps en dispositivos capaces de realizar actualizaciones de 120 Hz; además de esto, Flutter gobierna todos los píxeles de la aplicación; con esos widgets, podemos dibujar cada píxel en la pantalla, sin usar los componentes nativos de cada plataforma.

La parte de bajo nivel de Flutter es el motor, escrito en C ++, utiliza SKIA, una biblioteca de representación de gráficos 2D para decirle a la GPU cómo representar los gráficos y el texto, básicamente cómo pintar cada píxel en la pantalla.

Al contrario del enfoque de la mayoría de los frameworks multiplataforma, Flutter no utiliza ningún motor intermedio para representar la aplicación (usualmente un webview).

En definitiva, Flutter provee una manera eficiente para crear aplicaciones y por lo tanto, el rendimiento es excelente.

Al contrario del enfoque de la mayoría de los marcos multiplataforma, Flutter no se basa en ninguna representación o interpretación de código intermedio. La aplicación Flutter está integrada directamente en el código de la máquina, lo que elimina cualquier error de rendimiento del proceso de interpretación.

3. Altamente personalizable y extensible

Una de las mayores ventajas de Flutter es la capacidad de personalizar cualquier elemento en la pantalla, ya que, cada elemento visual es un widget, puedes personalizar enormemente los mismos e inclusive crear widgets más completos y personalizados basados en los definidos por defecto en el framework.

4. Motor de renderizado propio

Flutter te permite hacer tantas cosas con tus aplicaciones que no están disponibles en otras plataformas. Obviamente, requiere que el framework sea bastante poderoso. De hecho, la mayoría de los puntos presentados arriba son posibles al tener un motor propio.

Flutter y Dart

El lenguaje de programación llamado Dart fué desarrollado por Google, y es un lenguaje de programación que se puede utilizar para desarrollar aplicaciones web, de escritorio, del lado del servidor y móviles, por lo tanto, es el ideal para trabajar con Flutter.

Una de las características principales que tiene Dart y que lo hacen el compañero perfecto para Flutter es que, la aplicación se ejecuta sin problemas en el dispositivo de un usuario, ya que Dart compila y ejecuta directamente en código nativo, sin un puente intermediario (por ejemplo, JavaScript a nativo).

Flutter VS desarrollo nativo en Android Studio y xCode

Al momento de querer crear aplicaciones para dispositivos móviles nativas empleando xCode y Android Studio que son los ambientes oficiales para iOS y Android respectivamente, si no se selecciona Flutter y se utilizan en su lugar las plataformas oficiales, tenemos varias desventajas:

En definitiva, para desarrollar la misma aplicación en Android e iOS usando los entornos oficiales, se deben de manejar dos proyectos distintos, con dos IDEs distintos que manejan lenguajes de programación distintos, además de que Flutter al tener una sintaxis declarativa y contar con el hot reload, en definitiva, hacen que sea mucho más rápido y mantenible en el tiempo programar las aplicaciones móviles en Flutter.

Claro está, que, si quieres llevar la aplicación para que se ejecutan en Windows, Mac o Linux e inclusive web, son puntos a favor de usar Flutter en comparación de hacer los mismos proyectos para cada plataforma de manera individual.

Diferencias y comparaciones entre los frameworks existentes

Existe una gran cantidad de frameworks y tecnologías de alta calidad y bien aceptados. Algunos de ellos son los siguientes:

  1. Xamarin
  2. React native
  3. Ionic
  4. Cordova

Todos estos frameworks ofrecen diferentes implementaciones para un mismo problema; por lo tanto, puedes pensar que es difícil que un "nuevo" framework encuentre su lugar en un campo que ya está lleno, pero no lo es. Flutter tiene beneficios que le hacen un espacio, no necesariamente por superar a los otros frameworks, sino por estar ya al menos al mismo nivel que los frameworks nativos.

Es difícil comparar rendimientos entre las distintas tecnologías ya que, algunos pueden ser mejores en ciertas circunstancias, pero es seguro decir que pretende serlo. Tal cual se explicó anteriormente, 

Flutter se desarrolló teniendo en cuenta una alta velocidad de fotogramas. Algunos de los frameworks existentes se basan en la representación de JavaScript y HTML, lo que puede causar un peor rendimiento porque todo se dibuja en una vista web

 (un componente visual como un navegador web). Algunos usan componentes propios, pero confían en un puente para solicitar que la API del sistema operativo represente los componentes, lo que crea un cuello de botella en la aplicación porque necesita un paso adicional para representar la interfaz de usuario (UI) a diferencia de Flutter que todos los widgets son procesados internamente sin capas adicionales ni llamadas adicionales a la API del sistema operativo y elige hacer toda la interfaz de usuario por sí mismo.

Flutter y el desarrollo multiplataforma

El desarrollo de Flutter es nativo, no emplea JavaScript de ninguna manera, y tampoco emplea los componentes nativos de cada tecnología.

Dart

Flutter usa Dart, un lenguaje de programación orientado a objetos que fue concebido para Flutter, si has desarrollado en JavaScript, se te hará muy fácil adaptarte a este lenguaje de programación; Dart se compila a código binario, lo que permite que las aplicaciones se ejecuten con el rendimiento nativo de Objective-C, Swift, Java o Kotlin.

Uno de los problemas que tienen en trabajar con los ecosistemas oficiales de Android o IOS es que tenemos que conocer dos plataformas completamente distintas, dos frameworks y lenguajes de lenguaje de programación:

En este caso nos referimos a Android Studio y Xcode, además de Kotlin/Java y Swift respectivamente.

Aparte que, para desarrollar en iOS solamente podemos hacerlo mediante un Mac, a diferencia de Android que puedes desarrollar en Mac, Windows o Linux.

Aparte de esto, al ser los ambientes oficiales, la curva de aprendizaje es mucho más elevada ya que son ambientes en los cuales nosotros podemos desarrollar todo tipo de aplicaciones, con Realidad Aumentada, tipo 2D, juegos y otros recursos similares y son dos ecosistemas completamente distintos, una soportada por Apple y otra soportada por Google.

Sección 1: Fundamentos de Flutter y el Lenguaje Dart

Antes de poder construir interfaces complejas, debemos entender los cimientos sobre los que se asienta Flutter. Esta sección se centra en dos pilares: el propio framework Flutter, su filosofía y cómo poner en marcha tu primer proyecto; y Dart, el lenguaje de programación que lo impulsa, con sus características modernas y potentes que hacen que el desarrollo con Flutter sea tan agradable y eficiente.

Primeros Pasos con Flutter desde Cero

La ventaja enorme que tiene desarrollar aplicaciones en Flutter es que podemos crear para dos sistemas operativos móviles diferentes con un solo código base; es decir, con un solo proyecto podrás crear tus aplicaciones para Android e iOS mediante la interfaz declarativa de Flutter y bajo el lenguaje de programación de Dart.

¿Qué es Flutter?

Flutter es un SDK de código abierto creado por Google para desarrollar aplicaciones para iOS, Android, Web, Windows, macOS y Linux. Su característica principal es que te permite tener una única base de código para todas estas plataformas.

La Arquitectura de Flutter: "Todo es un Widget"

Si vienes de desarrollo nativo (Android o iOS), la primera idea que debes asimilar es que en Flutter, casi todo es un widget. Una pantalla es un widget, un botón es un widget, el espaciado es un widget, e incluso un gesto es un widget. Tu aplicación completa es un árbol de widgets anidados.

Flutter no utiliza los componentes UI nativos de cada plataforma. En su lugar, viene con su propio motor de renderizado de alto rendimiento (Skia) para dibujar cada píxel en la pantalla. Esto le da un control total sobre la apariencia y el rendimiento, garantizando que tu aplicación se vea y se sienta igual en todas partes.

Instalación y Creación del Primer Proyecto

El proceso de instalación implica descargar el SDK de Flutter, añadirlo a tu PATH y ejecutar flutter doctor, un comando que revisa tu sistema y te dice si te falta alguna dependencia (como Android Studio, Xcode o Visual Studio Code).

Una vez configurado, crear una nueva aplicación es tan simple como:

$ flutter create mi_primera_app
$ cd mi_primera_app
$ flutter run

Este comando genera una aplicación de contador simple que demuestra conceptos clave como los widgets StatelessWidget y StatefulWidget, y el manejo básico del estado con setState().

Profundiza en la configuración inicial y la estructura de un proyecto en: Primeros pasos con Flutter desde cero: Mi primera aplicación.

El Lenguaje Dart: Parseo, Enums y Más

Flutter está escrito en Dart, un lenguaje de programación moderno, orientado a objetos y optimizado para el cliente, también creado por Google. Entender sus características es clave para escribir código Flutter eficiente.

Parseo de Strings a Números

Una tarea común es convertir texto (String) a números (int o double). Dart ofrece dos métodos principales:

  1. parse(): Este método convierte una cadena, pero lanza una FormatException si la cadena no es un número válido.
  2. tryParse(): Es la opción más segura. Intenta convertir la cadena y, si falla, devuelve null en lugar de lanzar una excepción. Esto te permite manejar errores de formato de manera elegante.
String testInt = "100";
String testDouble = "100.1";
String testInvalid = "abc";

// Usando tryParse (recomendado)
int? val1 = int.tryParse(testInt); // 100
double? val2 = double.tryParse(testDouble); // 100.1
int? val3 = int.tryParse(testInvalid); // null

print(val1);
print(val2);
print(val3);

Comprende todas las sutilezas del parseo en: Dart / Flutter - Cómo parsear una cadena de texto (String) en un número.

Enums con Extensiones: Llevando los Enumerados al Siguiente Nivel

Los enum en Dart son una forma de definir un conjunto fijo de constantes. Son útiles para representar estados, tipos u opciones. Sin embargo, en su forma básica, son bastante limitados.

Con las extensiones, podemos "añadir" métodos y propiedades a los enums existentes, haciéndolos mucho más poderosos y ayudando a centralizar la lógica relacionada.

Imagina un enum para las pestañas de una barra de navegación inferior:

enum BottomTabEnum { home, video, shop, profile }

extension BottomTabExtension on BottomTabEnum {
  String get title {
    switch (this) {
      case BottomTabEnum.home:
        return 'Inicio';
      case BottomTabEnum.video:
        return 'Videos';
      default:
        return '';
    }
  }

  String get iconAssetLocation {
    // ... lógica para devolver la ruta del icono ...
  }
}

Ahora, en lugar de tener switch o if/else repartidos por toda tu UI, puedes acceder a la lógica directamente desde el enum: Text(BottomTabEnum.home.title). Esto hace que el código sea más limpio, más fácil de leer y mucho más mantenible.

Domina esta potente técnica en: Enum con extensiones en Flutter.

Inmutabilidad: Un Concepto Clave en Flutter

Cuando trabajas con Flutter, a menudo verás una advertencia: This class inherits from a class marked as @immutable, and therefore should be immutable. Esto ocurre típicamente en un StatelessWidget o StatefulWidget cuando declaras una propiedad que no es final.

¿Por qué es esto tan importante? Los widgets en Flutter están diseñados para ser inmutables. Esto significa que una vez que un widget es creado, sus propiedades no deben cambiar. En lugar de modificar un widget existente, Flutter prefiere reconstruirlo con nuevos datos. Esta filosofía es fundamental para el rendimiento y la previsibilidad del framework.

Cuando un estado cambia, Flutter reconstruye el árbol de widgets. Si los widgets son inmutables, el framework puede comparar el widget antiguo con el nuevo de manera muy eficiente. Si son del mismo tipo y tienen las mismas propiedades, Flutter sabe que no necesita redibujar esa parte de la pantalla.

La Solución: final

La solución a la advertencia es simple: todas las propiedades de un widget inmutable deben ser declaradas como final.

// Incorrecto - mutable
class MyWidget extends StatelessWidget {
  String title; // Esto genera la advertencia
  MyWidget({required this.title});
  //...
}

// Correcto - inmutable
class MyWidget extends StatelessWidget {
  final String title; // Propiedad inmutable
  const MyWidget({super.key, required this.title});
  //...
}

Declarar las propiedades como final garantiza que no puedan ser reasignadas después de que el widget ha sido instanciado, cumpliendo con el contrato de inmutabilidad de Flutter.

Entiende por qué la inmutabilidad es crucial en: Cómo resolver el error de inmutabilidad.

Sección 2: Construyendo Interfaces de Usuario (UI) con Widgets

El corazón de Flutter es su sistema de widgets. Todo lo que ves en la pantalla es un widget. Aprender a combinarlos y componerlos es la habilidad fundamental para crear interfaces de usuario hermosas y funcionales. En esta sección, exploraremos desde el esqueleto de una pantalla con Scaffold hasta widgets específicos para botones, tarjetas, layouts responsivos y manejo de gestos.

El Widget Scaffold: El Esqueleto de tus Pantallas

El widget Scaffold es, en la mayoría de los casos, el punto de partida para cualquier pantalla en una aplicación de Material Design. Proporciona la estructura básica de una pantalla, incluyendo la barra de aplicaciones, el cuerpo principal, botones flotantes, menús laterales y más.

Piénsalo como un andamio que sostiene todos los demás elementos de tu UI.

Componentes Principales de Scaffold

-bottomNavigationBar: Una barra de navegación en la parte inferior de la pantalla, ideal para cambiar entre las vistas principales de la aplicación.

Scaffold(
  appBar: AppBar(
    title: const Text('Mi App con Scaffold'),
  ),
  body: const Center(
    child: Text('Este es el cuerpo de la pantalla'),
  ),
  floatingActionButton: FloatingActionButton(
    onPressed: () {
      // Acción del botón
    },
    child: const Icon(Icons.add),
  ),
)

Sin Scaffold, tendrías que construir manualmente toda esta estructura, lo cual sería tedioso y propenso a errores. Es, sin duda, uno de los widgets más importantes y utilizados en Flutter.

Conoce todas sus propiedades en: Todo sobre el widget Scaffold en Flutter.

Widgets Esenciales para la Interfaz de Usuario

El catálogo de widgets de Flutter es enorme. Aquí te presentamos algunos de los más comunes y útiles que usarás en casi todas tus aplicaciones.

Botones

Flutter ofrece una variedad de botones para diferentes casos de uso:

ElevatedButton(
  onPressed: () {},
  child: const Text('Botón Elevado'),
)

Domina los botones en: Botones en Flutter.

Cards

El widget Card es un panel de Material Design con esquinas ligeramente redondeadas y una sombra. Es perfecto para agrupar información relacionada de una manera visualmente atractiva.

Card(
  elevation: 4.0,
  margin: const EdgeInsets.all(16.0),
  child: const Padding(
    padding: EdgeInsets.all(16.0),
    child: Column(
      children: [
        Text('Título de la Tarjeta', style: TextStyle(fontWeight: FontWeight.bold)),
        SizedBox(height: 8),
        Text('Contenido de la tarjeta...'),
      ],
    ),
  ),
)

Las tarjetas son un pilar del diseño de Material. Aprende a personalizarlas en: Widget Card en Flutter.

Slider

El widget Slider permite al usuario seleccionar un valor de un rango continuo. Es ideal para ajustes como el volumen, el brillo o cualquier filtro numérico.

// Se necesita un StatefulWidget para manejar el estado del slider
double _currentSliderValue = 20;

Slider(
  value: _currentSliderValue,
  min: 0,
  max: 100,
  divisions: 5,
  label: _currentSliderValue.round().toString(),
  onChanged: (double value) {
    setState(() {
      _currentSliderValue = value;
    });
  },
)

Explora sus opciones en: Widget Slider para definir rangos en Flutter.

Otros Widgets Útiles

El ecosistema de Flutter está lleno de widgets que resuelven problemas comunes:

Descubre más widgets que te ahorrarán tiempo en: 17 widgets de Flutter que son útiles.

Construyendo Layouts Responsivos

Crear una UI que se vea bien en un teléfono pequeño, una tablet grande y en orientación horizontal y vertical es un reto. Flutter proporciona varias herramientas para lograrlo.

MediaQuery

MediaQuery te da acceso a información sobre el dispositivo actual, como el tamaño de la pantalla, la orientación, la densidad de píxeles, etc. Es la herramienta principal para tomar decisiones de layout.

final screenWidth = MediaQuery.of(context).size.width;
if (screenWidth>600) {
  // Mostrar un layout para tablets
} else {
  // Mostrar un layout para móviles
}

OrientationBuilder

Este widget reconstruye su hijo cuando la orientación del dispositivo cambia, permitiéndote mostrar un layout para portrait (vertical) y otro para landscape (horizontal).

Expanded y Flexible

Dentro de una Row o Column, Expanded y Flexible te permiten controlar cómo los widgets hijos comparten el espacio disponible. Expanded fuerza al hijo a ocupar todo el espacio restante, mientras que Flexible le permite hacerlo, pero sin forzarlo.

FractionallySizedBox

A veces, necesitas que un widget ocupe un porcentaje específico del espacio de su padre (ej. 50% del ancho). FractionallySizedBox es perfecto para esto, evitando cálculos manuales con MediaQuery.

Center(
  child: FractionallySizedBox(
    widthFactor: 0.8, // Ocupa el 80% del ancho del padre
    child: ElevatedButton(
      onPressed: () {},
      child: const Text('Botón Ancho'),
    ),
  ),
)

Combinando estas herramientas, puedes construir interfaces verdaderamente adaptativas para el diverso ecosistema de dispositivos.

Aprende a fondo sobre layouts responsivos en: Responsive layouts en Flutter y Widget FractionallySizedBox.

Manejo de Gestos e Interacción del Usuario

Muchas veces queremos que un widget que no es un botón, como una imagen o un contenedor, sea "clickeable" o reaccione a gestos más complejos como arrastrar o pellizcar.

GestureDetector

Este es el widget fundamental para la detección de gestos. Puedes envolver cualquier widget con un GestureDetector para darle la capacidad de responder a una gran variedad de interacciones:

GestureDetector(
  onTap: () {
    print("Contenedor tocado!");
  },
  child: Container(
    width: 100,
    height: 100,
    color: Colors.blue,
    child: const Center(child: Text("Tócame")),
  ),
)

Convierta cualquier widget en interactivo con: Widget GestureDetector en Flutter.

Dismissible

El widget Dismissible es una especialización de GestureDetector diseñada para listas. Permite que un usuario deslice un elemento de la lista (generalmente para eliminarlo). Es la implementación del patrón "swipe-to-dismiss".

Dismissible(
  key: Key(item.id), // Una clave única para el widget
  onDismissed: (direction) {
    // Lógica para eliminar el item de la lista de datos
    setState(() {
      items.remove(item);
    });
  },
  background: Container(color: Colors.red), // Fondo que se muestra al deslizar
  child: ListTile(title: Text(item.name)),
)

Aprende a implementar listas deslizables en: Widget Dismissible en Flutter.

Pinch-to-Zoom con InteractiveViewer

Para permitir hacer zoom y paneo en una imagen u otro widget, Flutter proporciona el widget InteractiveViewer. Es una forma muy sencilla de añadir funcionalidad de "pellizcar para hacer zoom" sin necesidad de paquetes de terceros.

InteractiveViewer(
  maxScale: 4.0,
  child: Image.network('https://.../imagen.jpg'),
)

Para casos más avanzados, paquetes como pinch_zoom ofrecen más control.

Implementa el efecto de zoom en: Pinch (Pellizcar) Zoom Effecto en Flutter.

Listas, Grids y Contenido Desplazable

Mostrar colecciones de datos es una de las tareas más comunes en el desarrollo de aplicaciones. Flutter ofrece widgets optimizados para manejar listas largas de manera eficiente.

ListView y GridView

El widget ListView muestra sus hijos en un arreglo lineal desplazable. Para listas largas, es crucial usar el constructor ListView.builder, que crea los elementos de la lista de manera perezosa (solo cuando están a punto de ser visibles en la pantalla), lo que garantiza un rendimiento óptimo.

ListView.builder(
  itemCount: items.length,
  itemBuilder: (context, index) {
    return ListTile(
      title: Text(items[index].title),
    );
  },
)

GridView.builder funciona de manera similar, pero organiza a sus hijos en una cuadrícula 2D.

Domina las listas y grids en: Widget ListView en Flutter.

Scrollbar

Para cualquier vista desplazable (como un ListView o un SingleChildScrollView), puedes envolverla en un widget Scrollbar para mostrar una barra de desplazamiento visual, mejorando la usabilidad al dar al usuario una idea de la longitud del contenido y su posición actual.

Scrollbar(
  child: ListView.builder(
    // ...
  ),
)

Añade barras de desplazamiento a tus vistas en: Widget Scrollbar en Flutter.

Sección 3: Navegación y Gestión de Estado

Una aplicación es más que solo una pantalla bonita; es un flujo de interacciones, datos que cambian y vistas que responden a esos cambios. En esta sección, abordaremos dos de los temas más cruciales y, a menudo, más complejos del desarrollo en Flutter: cómo navegar entre diferentes pantallas y cómo gestionar el estado de tu aplicación de una manera limpia y escalable.

Navegación y Enrutamiento en Flutter

En Flutter, la navegación se gestiona como una pila (stack) de "rutas" (que generalmente son pantallas). Cuando vas a una nueva pantalla, "empujas" (push) una nueva ruta a la pila. Cuando vuelves atrás, "sacas" (pop) la ruta actual de la pila.

Navegación Básica con Navigator

El widget Navigator gestiona esta pila. Para ir a una nueva pantalla, usas Navigator.push().

Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => const DetailScreen()),
);

Para volver a la pantalla anterior, usas Navigator.pop().

Navigator.pop(context);

Menús de Navegación: Drawer y BottomNavigationBar

Para la navegación principal, se suelen usar dos patrones:

Aprende a crear menús laterales en: Crear un menú lateral o Drawer.

Interceptando el Botón de Retroceso con WillPopScope

A veces, quieres evitar que el usuario vuelva atrás accidentalmente (por ejemplo, si está llenando un formulario largo). El widget WillPopScope te permite interceptar el gesto o botón de "atrás" y decidir si permites o no la navegación.

WillPopScope(
  onWillPop: () async {
    final shouldPop = await showDialog<bool>(
      context: context,
      builder: (context) => AlertDialog(
        title: const Text('¿Seguro que quieres salir?'),
        content: const Text('Perderás los datos no guardados.'),
        actions: [
          TextButton(onPressed: () => Navigator.pop(context, false), child: const Text('Cancelar')),
          TextButton(onPressed: () => Navigator.pop(context, true), child: const Text('Salir')),
        ],
      ),
    );
    return shouldPop ?? false;
  },
  child: Scaffold(...),
)

Controla el flujo de navegación en: widget onWillPop: Interceptar el botón retroceso y Navegación y enrutamiento en Flutter.

Gestión de Estado (State Management)

La gestión de estado es el proceso de manejar los datos que tu aplicación necesita y reconstruir la UI cuando esos datos cambian. Para aplicaciones simples, setState() es suficiente. Pero para aplicaciones más grandes, se necesitan soluciones más robustas.

Manejo de Datos Asíncronos con FutureBuilder

Cuando necesitas mostrar datos que vienen de una operación asíncrona (como una petición HTTP), no puedes simplemente bloquear la UI. FutureBuilder es un widget que construye su UI basándose en el estado de un Future.

Maneja tres estados:

  1. ConnectionState.waiting: El Future todavía se está ejecutando. Muestras un CircularProgressIndicator.
  2. ConnectionState.done con error: El Future completó con un error. Muestras un mensaje de error.
  3. ConnectionState.done con datos: El Future completó exitosamente. Usas los datos (snapshot.data) para construir tu UI.
FutureBuilder<String>(
  future: _fetchData(), // una función que devuelve un Future<String>
  builder: (BuildContext context, AsyncSnapshot<String> snapshot) {
    if (snapshot.connectionState == ConnectionState.waiting) {
      return const CircularProgressIndicator();
    } else if (snapshot.hasError) {
      return Text('Error: ${snapshot.error}');
    } else {
      return Text('Dato cargado: ${snapshot.data}');
    }
  },
)

Domina las operaciones asíncronas en la UI con: FutureBuilder, async, await en Flutter.

Soluciones de Gestión de Estado: Provider, GetX, Redux

A medida que una aplicación crece, pasar el estado de widget en widget se vuelve insostenible. Aquí es donde entran los gestores de estado.

Elegir un gestor de estado depende de la complejidad de tu aplicación y de tus preferencias personales. Sin embargo, es crucial evitar un error común: no inicies operaciones que cambian el estado (como notifyListeners() en Provider) directamente dentro del método build(), ya que esto puede causar ciclos de reconstrucción infinitos.

Explora las diferentes opciones y sus trampas en: Redux: Gestor de estado, El Ecosistema GetX y Cuidado con los ciclos infinitos en Providers.

Sección 4: Datos y Backend

Una aplicación rara vez es una isla. La mayoría de las aplicaciones necesitan comunicarse con el mundo exterior para obtener datos, autenticar usuarios o almacenar información de forma persistente. Esta sección cubre cómo conectar tu aplicación Flutter a APIs REST, cómo manejar el almacenamiento de datos localmente en el dispositivo y cómo integrarse con servicios de backend como Firebase.

Realizando Peticiones HTTP

Para comunicarte con una API REST, la forma más común en Flutter es usar el paquete http.

Pasos para Realizar una Petición GET

  1. Añadir el paquete: Agrega http a tu pubspec.yaml.
  2. Importar el paquete: import 'package:http/http.dart' as http;
  3. Realizar la petición: Usa http.get() para hacer una petición GET. Esta función devuelve un Future.
  4. Decodificar la respuesta: Si la petición es exitosa (código de estado 200), el cuerpo de la respuesta (response.body) será una cadena JSON que necesitarás decodificar con jsonDecode().
import 'dart:convert';
import 'package:http/http.dart' as http;

Future<void> fetchAlbum() async {
  final response = await http.get(Uri.parse('https://jsonplaceholder.typicode.com/albums/1'));

  if (response.statusCode == 200) {
    return Album.fromJson(jsonDecode(response.body));
  } else {
    throw Exception('Failed to load album');
  }
}

Puedes usar http.post(), http.put(), etc., para otros métodos HTTP, pasando los datos en el parámetro body.

Aprende a conectar tu app al mundo en: Solicitudes HTTP en Flutter.

Almacenamiento de Datos Local

No todos los datos necesitan venir de un servidor en cada momento. Almacenar datos localmente es crucial para el rendimiento, el funcionamiento offline y para guardar las preferencias del usuario.

SharedPreferences: Para Datos Simples

SharedPreferences es perfecto para almacenar datos simples y no críticos como la configuración del tema (oscuro/claro), si un usuario ha visto el tour de bienvenida, o un token de sesión. Funciona como un simple mapa clave-valor.

final prefs = await SharedPreferences.getInstance();
await prefs.setBool('darkMode', true);
final bool? darkMode = prefs.getBool('darkMode');

Para guardar objetos complejos, primero debes serializarlos a una cadena JSON.

Domina las preferencias de usuario en: Cómo Guardar Objetos en SharedPreferences.

Bases de Datos Locales: sqflite y HiveDB

Cuando necesitas almacenar datos estructurados y más complejos, tienes dos opciones principales:

  1. sqflite: Proporciona acceso a una base de datos SQLite en el dispositivo. Es una solución robusta y probada, ideal para datos relacionales. Requiere escribir consultas SQL y es más verboso, pero ofrece todo el poder de una base de datos SQL.
  2. HiveDB: Una base de datos NoSQL ligera, extremadamente rápida y escrita puramente en Dart. Funciona con un sistema de "cajas" (boxes) que almacenan pares clave-valor. Es mucho más simple de usar que sqflite y puede almacenar objetos Dart directamente (usando TypeAdapter). Es ideal para la mayoría de los casos de uso que no requieren la complejidad de SQL.
// Ejemplo con HiveDB
var box = await Hive.openBox('myBox');
box.put('name', 'DesarrolloLibre');
print(box.get('name')); // DesarrolloLibre

Elige la base de datos correcta para tu proyecto con nuestras guías: SQFlite para manejar una base de datos con SQLite y Persistir data usando HiveDB.

Integración con Firebase y Cloud Firestore

Firebase es una plataforma de Backend-as-a-Service (BaaS) de Google que ofrece un conjunto de herramientas para construir aplicaciones rápidamente, incluyendo autenticación, bases de datos en tiempo real, almacenamiento de archivos y más.

Cloud Firestore es la base de datos NoSQL flexible y escalable de Firebase. Su principal ventaja es su capacidad de sincronización en tiempo real: cuando un dato cambia en la base de datos, todos los clientes conectados (tu app Flutter) reciben la actualización automáticamente.

Pasos de Integración

  1. Crear un Proyecto en Firebase: Ve a la consola de Firebase, crea un nuevo proyecto y registra tus aplicaciones de Android y iOS.
  2. Añadir Dependencias: Agrega los paquetes de Firebase a tu pubspec.yaml, como firebase_core y cloud_firestore.
  3. Inicializar Firebase: En tu función main, inicializa Firebase antes de ejecutar la aplicación.
Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(MyApp());
}

Lectura y Escritura de Datos

Firestore organiza los datos en colecciones y documentos. Puedes leer un documento, una colección entera, o suscribirte a los cambios en tiempo real usando snapshots().

FirebaseFirestore firestore = FirebaseFirestore.instance;

// Escribir datos
await firestore.collection('users').doc('user1').set({
  'name': 'Andres',
  'email': 'contact@desarrollolibre.net'
});

// Leer datos una vez
DocumentSnapshot doc = await firestore.collection('users').doc('user1').get();
print(doc.data());

// Escuchar cambios en tiempo real
firestore.collection('users').snapshots().listen((QuerySnapshot snapshot) {
  snapshot.docs.forEach((doc) {
    print(doc.data());
  });
});

Firebase es una opción increíblemente potente para acelerar el desarrollo de tu backend.

Conecta tu app a Firebase con nuestra guía: Conectar una app en Flutter a Cloud Firestore.

Sección 5: Temas Avanzados y Ecosistema Flutter

Más allá de la construcción de UIs y la conexión a APIs, el ecosistema de Flutter ofrece herramientas para llevar tus aplicaciones al siguiente nivel. Desde animaciones fluidas y patrones de diseño de software, hasta la creación de juegos 2D y la integración de complejas pasarelas de pago, esta sección explora las fronteras de lo que es posible con Flutter.

Animaciones en Flutter

Flutter fue diseñado desde cero pensando en el rendimiento de las animaciones. A diferencia del desarrollo nativo, donde las animaciones pueden ser complejas de implementar, Flutter ofrece una API unificada y potente.

El núcleo de las animaciones en Flutter se basa en los AnimationController y los Tween.

// Dentro de un State con SingleTickerProviderStateMixin
late AnimationController _controller;
late Animation<double> _animation;

@override
void initState() {
  super.initState();
  _controller = AnimationController(
    duration: const Duration(seconds: 2),
    vsync: this,
  )..repeat(reverse: true);
  _animation = Tween<double>(begin: 50.0, end: 200.0).animate(_controller);
}

@override
Widget build(BuildContext context) {
  return AnimatedBuilder(
    animation: _animation,
    builder: (context, child) {
      return Container(
        width: _animation.value,
        height: _animation.value,
        color: Colors.blue,
      );
    },
  );
}

Además, existen paquetes como animated_background que facilitan la creación de fondos animados con efectos predefinidos (partículas, líneas, etc.) con muy poco código.

Da vida a tus aplicaciones en: Animaciones en Flutter: Primeros pasos y Crear un fondo animado en Flutter.

Patrones de Diseño de Software en Flutter

Aplicar patrones de diseño de software probados es clave para construir aplicaciones mantenibles y escalables. Flutter, con su naturaleza orientada a objetos y funcional, se presta bien a varios patrones clásicos.

Singleton

El patrón Singleton asegura que una clase tenga solo una instancia en toda la aplicación. Es útil para servicios globales como un gestor de preferencias, un cliente de base de datos o un servicio de API.

class UserPreferences {
  static final UserPreferences _instance = UserPreferences._internal();
  factory UserPreferences() => _instance;
  UserPreferences._internal();
  // ... métodos y propiedades ...
}
// Uso: final prefs = UserPreferences();

Aprende a implementarlo en: Patrón Singleton en Flutter.

Observer

El patrón Observer permite que un objeto ("Subject") notifique a una lista de objetos dependientes ("Observers") sobre cualquier cambio en su estado. Este es el principio fundamental detrás de la gestión de estado reactiva en Flutter (como ChangeNotifier de Provider).

Implementa tu propio sistema de observación en: Patrón Observer en Flutter.

Arquitectura MVVM (Model-View-ViewModel)

MVVM es un patrón arquitectónico que separa la UI (View) de la lógica de negocio y el estado (ViewModel). El Modelo representa los datos.

El paquete provider es una excelente herramienta para implementar MVVM en Flutter, usando ChangeNotifier como el ViewModel.

Estructura tus aplicaciones profesionalmente con: Arquitectura MVVM en Flutter.

Desarrollo de Juegos 2D con Flame

¿Sabías que Flutter no es solo para aplicaciones? Con el motor de juegos Flame, puedes construir juegos 2D multiplataforma de alto rendimiento.

Flame es un motor de juegos modular construido sobre Flutter. Proporciona una estructura de bucle de juego, un sistema de componentes (similar a los widgets), y utilidades para sprites, animaciones, detección de colisiones y entrada de usuario. Además, se integra con Forge2D (un port de Box2D) para físicas realistas.

Estructura de un Juego en Flame

Flame te permite usar widgets de Flutter para las superposiciones de UI (menús, contadores de puntos, etc.), combinando lo mejor de ambos mundos.

Iníciate en el desarrollo de juegos con: Flutter Flame: Tutorial para Desarrollar tu Primer Juego en 2D y Conceptos claves en Forge 2D con Flame.

Cómo funciona Flame: conceptos que debes dominar

Integración con Pasarelas de Pago: Stripe y PayPal

Monetizar tu aplicación a menudo implica integrar pasarelas de pago. Este puede ser uno de los aspectos más complejos del desarrollo móvil.

Stripe

El paquete flutter_stripe ofrece una integración bastante completa con la API de Stripe. El proceso generalmente implica:

  1. Configurar tu backend para crear un "PaymentIntent" en Stripe, que devuelve un client_secret.
  2. Pasar este client_secret a tu aplicación Flutter.
  3. Usar el CardField de flutter_stripe para que el usuario ingrese los datos de su tarjeta.
  4. Llamar a Stripe.instance.confirmPayment() con el client_secret para finalizar el pago.

La integración requiere una configuración cuidadosa a nivel nativo (en build.gradle de Android y Info.plist de iOS), especialmente en lo que respecta a las versiones de Gradle y Kotlin.

Implementa pagos con Stripe con nuestra guía paso a paso: Cómo integrar Flutter Stripe.

PayPal: El Infierno de los WebView

A diferencia de Stripe, PayPal no ha tenido históricamente una solución SDK oficial y unificada para Flutter. Esto ha llevado a la comunidad a depender de paquetes que, en su mayoría, implementan el flujo de pago de PayPal dentro de un WebView (un navegador web embebido).

Esto presenta múltiples problemas:

Integrar PayPal en Flutter a menudo se siente como un "hack" y es un recordatorio de los desafíos que aún existen en el desarrollo multiplataforma.

Conoce los dolores de cabeza de esta integración en: El Infierno de los Pub de PayPal en Flutter.

Sección 6: Producción y Mantenimiento

El trabajo de un desarrollador no termina cuando la última característica está codificada. Llevar una aplicación a producción y mantenerla a lo largo del tiempo implica un conjunto completamente diferente de desafíos: personalizar la apariencia, manejar múltiples idiomas, generar los binarios para las tiendas y, quizás lo más importante, mantener el proyecto actualizado a medida que el ecosistema evoluciona.

Personalización de la Apariencia

Temas y Estilos (ThemeData)

Flutter permite centralizar el estilo de tu aplicación a través del widget Theme. Al definir un ThemeData en la raíz de tu MaterialApp, puedes especificar colores, tipografías y estilos de componentes que se aplicarán en toda la aplicación.

MaterialApp(
  title: 'Mi App',
  theme: ThemeData(
    primarySwatch: Colors.blue,
    scaffoldBackgroundColor: Colors.grey[200],
    textTheme: const TextTheme(
      headline1: TextStyle(fontSize: 72.0, fontWeight: FontWeight.bold),
      bodyText2: TextStyle(fontSize: 14.0, fontFamily: 'Hind'),
    ),
  ),
  home: const HomeScreen(),
)

Esto asegura una apariencia consistente y facilita los cambios de diseño, ya que solo necesitas modificar el ThemeData en un lugar.

Aprende a crear tus propios temas en: Temas personalizados en Flutter.

Fuentes Personalizadas

Para usar fuentes personalizadas (ej. de Google Fonts), el proceso es:

  1. Descarga los archivos de la fuente (ej. .ttf).
  2. Crea una carpeta (ej. assets/fonts) en tu proyecto y coloca los archivos allí.
  3. Declara las fuentes en tu pubspec.yaml.
flutter:
  fonts:
    - family: Roboto
      fonts:
        - asset: assets/fonts/Roboto-Regular.ttf
        - asset: assets/fonts/Roboto-Bold.ttf
          weight: 700

Luego, puedes usar la fuente en tus TextStyle: TextStyle(fontFamily: 'Roboto').

Integra tipografías personalizadas con nuestra guía: Instalar, configurar y usar fuentes en Flutter.

Localización (i18n y l10n)

Para que tu aplicación llegue a una audiencia global, necesitas adaptarla a diferentes idiomas y regiones. El proceso se divide en:

Aunque Flutter tiene soporte nativo, paquetes como easy_localization simplifican enormemente el proceso. La estrategia general es:

  1. Crear archivos JSON con las traducciones (assets/translations/en-US.json, assets/translations/es-ES.json).
  2. Configurar el paquete en tu main.dart.
  3. Usar el método de extensión .tr() en tus cadenas de texto: Text('hello'.tr()).

El paquete se encarga de cargar el archivo de idioma correcto y reconstruir la UI cuando el idioma cambia.

Lleva tu aplicación al mundo con: Flutter Localization: Manejo de lenguajes.

Generación de Binarios para Producción (APK y AAB)

Cuando tu aplicación está lista para ser publicada en la Google Play Store, necesitas generar un paquete firmado en modo "release".

  1. Generar una Clave de Firma (Keystore): Es un archivo que contiene tus credenciales de firma. Se genera una sola vez por aplicación con la herramienta keytool de Java.
  2. Configurar Gradle: Debes decirle a Gradle dónde encontrar tu keystore y sus credenciales para que pueda firmar la aplicación automáticamente. Esto se hace de forma segura en el archivo android/key.properties (que no debe subirse a Git).
  3. Ejecutar el Comando de Build:
# Para generar un Android App Bundle (AAB - formato recomendado por Google)
flutter build appbundle

# Para generar un APK universal
flutter build apk

Estos comandos crearán el archivo firmado en la carpeta build/app/outputs/.

Sigue el proceso detallado para firmar y generar tu app en: Pasos para generar una APK y ABB firmado en modo Release.

El Dolor de las Actualizaciones y el Mantenimiento

Flutter se mueve rápido. Esto es bueno (nuevas características, mejor rendimiento), pero también es una fuente de frustración. Un proyecto que funcionaba perfectamente hace seis meses puede dejar de compilar después de ejecutar flutter upgrade.

Los problemas más comunes vienen de:

Consejos para un Mantenimiento Sostenible

Entiende los desafíos del mantenimiento en: Cómo actualizar una aplicación existente en Flutter y Lo que MENOS me gusta de Flutter son "Las Actualizaciones".

Troubleshooting: Solucionando Problemas Comunes

Tarde o temprano, te encontrarás con errores. Dos de los más comunes en el lado de Android son:

Encuentra soluciones a estos problemas en: Problemas con 'assembleDebug' y Solución a "Unable to locate a Java Runtime".

Cuándo no utilizar Flutter: lista completa de casos

Como todo en la vida, las tecnologías pueden ser buenas en unas cosas en base a sus características y no tan buenas en otras, veamos algunas casos en los cuales puede que Flutter no sea la mejor opción:

¿Para qué es más adecuado Flutter?

Flutter brilla en una multitud de escenarios:

Proporciona una experiencia de desarrollo unificada, capacidades de iteración rápida y ha sido la base de algunas aplicaciones de alto rendimiento en el mercado.

Para las empresas emergentes y las empresas que buscan crear un producto visualmente consistente tanto en iOS como en Android sin duplicar los esfuerzos de desarrollo, Flutter puede cambiar las reglas del juego. Su rica biblioteca de widgets, complementada con sus fundamentos de rendimiento Dart, garantiza que las aplicaciones se vean y se sientan hermosas mientras mantienen una experiencia de usuario ágil.

Sin embargo, como comentamos en este artículo, existen situaciones y nichos en los que Flutter podría no ser la opción más óptima. 

Conclusión: El Poder y el Futuro de Flutter

Hemos recorrido un camino increíblemente completo a través del ecosistema de Flutter. Desde los conceptos más básicos y la creación de nuestra primera aplicación, pasando por la construcción de interfaces de usuario ricas e interactivas, hasta la gestión de estado, la conexión con el mundo exterior, y la exploración de temas avanzados como el desarrollo de juegos y la monetización. Finalmente, hemos aterrizado en el mundo real de la producción, el mantenimiento y la resolución de problemas.

Flutter se ha establecido no solo como una alternativa viable, sino como una opción líder en el desarrollo multiplataforma. Su rendimiento, la belleza de sus interfaces y la productividad que ofrece con herramientas como el Hot Reload son innegables. Sin embargo, como hemos visto, no está exento de desafíos, especialmente en la integración con el ecosistema nativo y el ritmo vertiginoso de las actualizaciones.

Dominar Flutter es dominar un conjunto de herramientas que te permite llevar una idea a millones de usuarios en múltiples plataformas con una velocidad y una calidad sin precedentes. Esperamos que esta guía te sirva como un recurso invaluable en tu viaje. Sigue construyendo, sigue aprendiendo y sigue explorando los límites de lo que puedes crear con este increíble framework.

Ver Listado »

Su experiencia en este sitio será mejorada con el uso de cookies.