Cómo desarrollar una aplicación multiplataforma con Flutter

Flutter encaja cuando Android e iOS necesitan casi el mismo producto y diseño. Usa Dart. En este capítulo construimos un libro de gastos que actualiza el total diario y conserva los registros al volver a abrirlo.

1. Aprende de productos reales

My BMW pone primero el estado del vehículo; Google Pay confirma inmediatamente el resultado; Nubank organiza cuenta y ayuda con una jerarquía tranquila.

2. Ejecuta el proyecto

flutter doctor
flutter create store_expense_ledger
cd store_expense_ledger
flutter run -d chrome

3. Crea la pantalla y el formulario

Sustituye el contador por una pantalla de gastos con total de hoy, lista y botón Añadir gasto.

Añade un formulario con categoría, descripción, importe, Guardar y Cancelar.

4. Valida y guarda

Muestra un error bajo cada campo vacío o importe menor o igual que cero. No guardes esos datos.

Al guardar, cierra el formulario, añade la fila arriba, actualiza el total y muestra una confirmación.

5. Conserva los datos

Guarda los gastos en el dispositivo y recupéralos al iniciar. No añadas cuentas ni servidor todavía.

Guarda dos registros, recarga y vuelve a abrir. Después añade edición, confirmación de borrado, identificadores estables y backend de empresa, uno por uno.

6. Prueba y compila

flutter analyze
flutter test
flutter build web

Se verificaron Flutter 3.44.9, Dart 3.12.2, análisis, Widget Test, compilación Web, validación y persistencia. Al faltar Android SDK y un runtime de iOS Simulator, no se presenta la compilación móvil como terminada.