Apps móviles con Flutter

Al crear el proyecto, elija Flutter (móvil). La pestaña Diseño es un editor al estilo de FlutterFlow: a la izquierda, las pantallas y el árbol de widgets de la elegida; en el centro, la paleta y el teléfono con la vista previa; a la derecha, las propiedades del widget elegido (o de la pantalla y de la app).

• Un widget de la paleta se añade dentro del elegido si es una columna, una fila o una lista; si no, detrás de él. Se elige tocándolo en el teléfono o en el árbol; Subir, Bajar, Duplicar y Eliminar están sobre el árbol.
• Widgets: columna, fila, lista, tarjeta, contenedor, margen, centrado, expandido, texto, botón, botón de icono, campo de texto, fila de lista, casilla, interruptor, etiqueta, icono, imagen, progreso, separador y espacio.
• + en Pantallas abre la galería: una pantalla en blanco o una de las 20 plantillas más usadas (inicio de sesión, registro, recuperar contraseña, bienvenida, inicio, lista, detalle, perfil, editar perfil, ajustes, notificaciones, mensajes, conversación, búsqueda, carrito, pago, pedido confirmado, panel, contacto y ayuda), con su vista previa. Sus botones escriben en la Salida (debugPrint) hasta que se enlazan con App.
• Cada pantalla tiene nombre, título, barra superior, un botón flotante y, si se abre con algo (por ejemplo, un envío), el tipo que recibe.

La pestaña Código es lib/app.dart: una clase App con los datos y los métodos de la app. Las pantallas la usan como app y se vuelven a dibujar cuando llama a notifyListeners(). Dart generado muestra lib/main.dart, que el estudio escribe a partir de las pantallas.

class App extends ChangeNotifier {
  final tareas = <Tarea>[];
  String nueva = '';

  void agregar() {
    tareas.insert(0, Tarea(nueva));
    nueva = '';
    notifyListeners();
  }
}

• Elija Flutter (escritorio) al crear el proyecto: el mismo editor, con la vista previa en una ventana de macOS.
• Menú (propiedades de la app): una línea por pantalla, Pantalla|icono|texto. En una ventana ancha es una barra lateral (NavigationRail); en una estrecha, la barra de abajo. También sirve en las apps móviles.
• Ejecutar (F9) abre la app en su ventana nativa (macOS, Windows o Linux) y al guardar se vuelve a cargar.
• Ejemplo: Inventario, con panel, productos, ficha con existencias y alta.

En las propiedades de la app (sin ningún widget elegido), Base de datos → Conectar con elige FalconDatabase (servidor, referencia del proyecto y clave anon) o Firebase (ID del proyecto y clave web). El estudio genera lib/db.dart con la misma forma para los dos, y App lo usa con import 'db.dart';.

Future<bool> entrar() async {
  try {
    await db.signIn(email, clave);
    notas = await db.table('notas').list(order: 'id.desc');
    notifyListeners();
    return true;
  } on DbError catch (e) {
    error = e.message;
    notifyListeners();
    return false;
  }
}

• db.signIn(correo, clave), db.signUp(…), db.signOut() y db.user: la sesión.
• db.table('t').list(where: {…}, order: 'campo.desc', limit: 20), get(id), insert({…}), update(id, {…}) y delete(id). En where vale un valor o un operador como gte.10.
• Las acciones pueden esperar: if (await app.entrar()) home:Notas.
• Solo va dentro de la app la clave pública (anon o la clave web); las reglas de acceso las pone la base de datos.
• Ejemplo: Notas en la nube, con login y la tabla notas de FalconDatabase.

• Ejecutar (F9) compila la app con Flutter para la web y la abre en el simulador del estudio: un marco de teléfono (iPhone, Pixel, Galaxy o iPad mini) que se puede girar. No hace falta Xcode ni Android.
• Al guardar, la app se vuelve a compilar y el simulador se recarga solo.
• Lo que escribe print o debugPrint sale en la pestaña Salida, y los errores, con su línea de lib/app.dart.
• Los paquetes de pub.dev (por ejemplo, shared_preferences: ^2.3.0) se añaden en las propiedades de la app.
• Exportar el proyecto de Flutter deja pubspec.yaml, lib/main.dart y lib/app.dart: con flutter create . y flutter run se abre en el teléfono, en Android Studio o en VS Code.
• Ejemplos: Tienda con login (login, catálogo con búsqueda y categorías, ficha, carrito con cantidades y pago), Envíos (resumen por estado, lista con filtro, detalle con seguimiento y alta) y Tareas (añadir, marcar, filtrar y borrar, guardadas en el teléfono).