Flutter Dynamic Island y Live Activities: Guía iOS/Android

Limitaciones de las notificaciones locales simples: ¿por qué Live Activities?

Al entregar información de estado que cambia en tiempo real al usuario, como el estado del pedido de entrega de comida, la ruta de desplazamiento en taxi/ride-hailing, resultados de partidos deportivos en vivo, temporizadores o registros de viajes al trabajo, en el pasado se dependía de las notificaciones push estándar (Push Notification).

Sin embargo, las notificaciones push estándar tienen las siguientes limitaciones críticas:

[Enfoque de notificaciones push tradicional]
- Acumulación de mensajes en el centro de notificaciones con cada evento -> Fatiga de notificaciones (Notification Fatigue)
- Al cerrar la pantalla, no se puede verificar el estado más reciente hasta que el usuario vuelva a abrir la aplicación
- Ocurrencia de latencia (Latency) y desconexión en el tiempo de permanencia del usuario (Engagement)

Las funciones Live Activities (Actividades en vivo) y Dynamic Island, introducidas desde iOS 16.1+ y consolidadas como el núcleo de la interfaz de usuario móvil en iOS 18/19, cambiaron este paradigma.

Al adoptar Live Activities, incluso cuando la aplicación está en segundo plano o con la pantalla bloqueada (Lock Screen), es posible actualizar el estado en tiempo real a través de un único widget persistente. Según datos reales de aplicaciones en producción, los servicios que implementaron Live Activities lograron un resultado de aumento superior al 40% en la tasa de reinteracción (Re-engagement) de la aplicación.

Este artículo ofrece una guía completa para integrar iOS Swift ActivityKit y WidgetKit en aplicaciones Flutter con el fin de construir los 4 diseños de Dynamic Island (Compact Leading/Trailing, Expanded y Minimal), y actualizar el estado en tiempo real desde servidores edge mediante tokens push de APNs (Apple Push Notification service).

Visión general de la arquitectura de Live Activities y Dynamic Island

Aunque la aplicación Flutter renderiza directamente la interfaz de usuario en pantalla, los widgets de Dynamic Island y Lock Screen funcionan en el entorno de ejecución nativo de iOS SwiftUI / WidgetKit / ActivityKit.

+-----------------------------------------------------------------------------------+
| Pipeline de actualización en tiempo real de Flutter Live Activities y APNs        |
+-----------------------------------------------------------------------------------+

[Flutter App Engine]             [iOS Native Host (Swift)]           [Cloudflare / APNs Server]
         |                                   |                                   |
         |--- 1. Start Activity (MethodChannel)->|                               |
         |                                   |--- 2. Crear widget ActivityKit ->| (Lock Screen / Island)
         |                                   |--- 3. Obtener Push Token -------->|
         |                                   |                                   | (Guardar token en DB del servidor)
         |                                   |                                   |
         |                                   |--- 4. Enviar APNs Push Payload ---|
         |                                   |<-- 5. Actualizar estado (Update) -|

1. Inicio de Activity: Al iniciar la entrega o el temporizador en la aplicación Flutter, se invoca Swift ActivityKit a través de MethodChannel.
2. Obtención del Push Token: En el lado de iOS, se genera un pushToken dedicado para dicha Live Activity y se envía al servidor backend (Cloudflare Workers / Firebase).
3. Actualización push del servidor APNs: Incluso si la aplicación está cerrada, cuando el backend envía la carga útil (Payload) de cambio de estado a través de la API HTTP/2 de APNs, el sistema operativo iOS actualiza Dynamic Island de inmediato.

Paso 1: Implementación del Target nativo de iOS y Swift WidgetKit

Es necesario agregar un target de Widget Extension para Live Activity dentro de la carpeta ios del proyecto Flutter.

Agregar Xcode Target

1. Abrir Runner.xcworkspace en Xcode
2. Seleccionar File > New > Target
3. Seleccionar Widget Extension (Nombre: LiveActivityWidget, marcar obligatoriamente “Include Live Activity”)

LiveActivityAttributes.swift (Estructura de datos compartida)

Define las propiedades de datos que compartirán la aplicación principal (Main App) y la extensión del widget (Widget Extension).

// ios/Runner/LiveActivityAttributes.swift
import ActivityKit
import Foundation

// Datos estáticos e inmutables de la Activity
public struct DeliveryActivityAttributes: ActivityAttributes {
  public struct ContentState: Codable, Hashable {
    // Datos dinámicos que cambian en tiempo real
    public var status: String      // "preparing", "onTheWay", "delivered"
    public var driverName: String
    public var estimatedMinutes: Int
    public var progressRatio: Double // 0.0 ~ 1.0
  }

  public var orderId: String
  public var storeName: String
}

LiveActivityWidget.swift (Diseño SwiftUI de Dynamic Island)

Implementa las 4 vistas de Dynamic Island y el widget para la pantalla de bloqueo (Lock Screen).

// ios/LiveActivityWidget/LiveActivityWidget.swift
import ActivityKit
import WidgetKit
import SwiftUI

@main
struct LiveActivityWidgetBundle: WidgetBundle {
  var body: some Widget {
    DeliveryLiveActivityWidget()
  }
}

struct DeliveryLiveActivityWidget: Widget {
  var body: some WidgetConfiguration {
    ActivityConfiguration(for: DeliveryActivityAttributes.self) { context in
      // 1. Diseño del widget para Lock Screen (pantalla de bloqueo)
      LockScreenWidgetView(context: context)
    } dynamicIsland: { context in
      // 2. Diseño de las 4 vistas de Dynamic Island
      DynamicIsland {
        // [Expanded] Vista ampliada al pulsar prolongadamente la isla o cuando está activa
        DynamicIslandExpandedRegion(.leading) {
          HStack {
            Image(systemName: "box.truck.fill")
              .foregroundColor(.purple)
            Text(context.attributes.storeName)
              .font(.caption)
              .bold()
          }
        }
        DynamicIslandExpandedRegion(.trailing) {
          Text("Faltan \(context.state.estimatedMinutes) min")
            .font(.headline)
            .foregroundColor(.green)
        }
        DynamicIslandExpandedRegion(.bottom) {
          VStack(alignment: .leading) {
            Text("Repartidor: \(context.state.driverName)")
              .font(.subheadline)
            ProgressView(value: context.state.progressRatio)
              .tint(.purple)
          }
        }
      } compactLeading: {
        // [Compact Leading] Vista reducida izquierda (icono)
        Image(systemName: "box.truck.fill")
          .foregroundColor(.purple)
      } compactTrailing: {
        // [Compact Trailing] Vista reducida derecha (tiempo restante)
        Text("\(context.state.estimatedMinutes) min")
          .font(.caption2)
          .bold()
      } minimal: {
        // [Minimal] Vista mínima cuando otra aplicación ocupa la isla
        Image(systemName: "box.truck.fill")
          .foregroundColor(.purple)
      }
    }
  }
}

// Vista SwiftUI dedicada para la pantalla de bloqueo
struct LockScreenWidgetView: View {
  let context: ActivityViewContext<DeliveryActivityAttributes>

  var body: some View {
    VStack(alignment: .leading, spacing: 8) {
      HStack {
        Text(context.attributes.storeName)
          .font(.headline)
        Spacer()
        Text(context.state.status)
          .font(.subheadline)
          .foregroundColor(.purple)
      }
      ProgressView(value: context.state.progressRatio)
        .tint(.purple)
      HStack {
        Text("Repartidor: \(context.state.driverName)")
          .font(.caption)
        Spacer()
        Text("Llegada est.: \(context.state.estimatedMinutes) min")
          .font(.caption)
          .bold()
      }
    }
    .padding()
    .background(Color(uiColor: .systemBackground))
  }
}

Paso 2: Construcción de Swift AppDelegate y el manejador de MethodChannel

Implementa el MethodChannel encargado de la comunicación entre el motor principal de Flutter y Swift.

// ios/Runner/AppDelegate.swift
import UIKit
import Flutter
import ActivityKit

@UIApplicationMain
@objc class AppDelegate: FlutterAppDelegate {
  private var currentActivity: Activity<DeliveryActivityAttributes>?

  override func application(
    _ application: UIApplication,
    didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
  ) -> Bool {
    let controller : FlutterViewController = window?.rootViewController as! FlutterViewController
    let channel = FlutterMethodChannel(name: "dev.effidev/live_activity", binaryMessenger: controller.binaryMessenger)

    channel.setMethodCallHandler({ [weak self] (call: FlutterMethodCall, result: @escaping FlutterResult) in
      guard let self = self else { return }

      switch call.method {
      case "startActivity":
        self.startLiveActivity(call: call, result: result)
      case "updateActivity":
        self.updateLiveActivity(call: call, result: result)
      case "endActivity":
        self.endLiveActivity(call: call, result: result)
      default:
        result(FlutterMethodNotImplemented())
      }
    })

    GeneratedPluginRegistrant.register(with: self)
    return super.application(application, didFinishLaunchingWithOptions: launchOptions)
  }

  // Inicio de Live Activity y recolección de APNs Push Token
  private func startActivity(call: FlutterMethodCall, result: @escaping FlutterResult) {
    guard ActivityAuthorizationInfo().areActivitiesEnabled else {
      result(FlutterError(code: "DISABLED", message: "Live Activities are disabled", details: nil))
      return
    }

    guard let args = call.arguments as? [String: Any],
          let orderId = args["orderId"] as? String,
          let storeName = args["storeName"] as? String,
          let driverName = args["driverName"] as? String,
          let estimatedMinutes = args["estimatedMinutes"] as? Int else {
      result(FlutterError(code: "INVALID_ARGS", message: "Invalid arguments", details: nil))
      return
    }

    let initialContentState = DeliveryActivityAttributes.ContentState(
      status: "Asignación completada",
      driverName: driverName,
      estimatedMinutes: estimatedMinutes,
      progressRatio: 0.2
    )

    let activityAttributes = DeliveryActivityAttributes(orderId: orderId, storeName: storeName)

    do {
      let activity = try Activity.request(
        attributes: activityAttributes,
        content: .init(state: initialContentState, staleDate: nil),
        pushType: .token // Activación de actualización push APNs
      )
      self.currentActivity = activity

      // Recepción asíncrona del Push Token para transmitirlo a Flutter
      Task {
        for await pushToken in activity.pushTokenUpdates {
          let tokenString = pushToken.map { String(format: "%02x", $0) }.joined()
          print("APNs Live Activity Push Token: \(tokenString)")
          // Transmisión del token a Flutter
          DispatchQueue.main.async {
            result(["activityId": activity.id, "pushToken": tokenString])
          }
          break
        }
      }
    } catch {
      result(FlutterError(code: "ERROR", message: error.localizedDescription, details: nil))
    }
  }

  // Actualización manual local
  private func updateLiveActivity(call: FlutterMethodCall, result: @escaping FlutterResult) {
    guard let args = call.arguments as? [String: Any],
          let status = args["status"] as? String,
          let estimatedMinutes = args["estimatedMinutes"] as? Int,
          let progressRatio = args["progressRatio"] as? Double else {
      result(FlutterError(code: "INVALID_ARGS", message: "Invalid args", details: nil))
      return
    }

    Task {
      if let activity = self.currentActivity {
        let updatedState = DeliveryActivityAttributes.ContentState(
          status: status,
          driverName: activity.content.state.driverName,
          estimatedMinutes: estimatedMinutes,
          progressRatio: progressRatio
        )
        await activity.update(using: updatedState)
        result(true)
      } else {
        result(false)
      }
    }
  }

  // Finalización de Activity
  private func endLiveActivity(call: FlutterMethodCall, result: @escaping FlutterResult) {
    Task {
      if let activity = self.currentActivity {
        let finalState = DeliveryActivityAttributes.ContentState(
          status: "Entrega completada",
          driverName: activity.content.state.driverName,
          estimatedMinutes: 0,
          progressRatio: 1.0
        )
        await activity.end(using: finalState, dismissalPolicy: .after(Date().addingTimeInterval(5)))
        self.currentActivity = nil
        result(true)
      } else {
        result(false)
      }
    }
  }
}

Paso 3: Implementación de la capa de servicio de Flutter (live_activity_service.dart)

Escribe una clase de servicio wrapper en código puro de Flutter para controlar la Live Activity según su ciclo de vida.

// lib/services/live_activity_service.dart
import 'dart:async';
import 'package:flutter/services.dart';

class LiveActivityService {
  static const MethodChannel _channel = MethodChannel('dev.effidev/live_activity');

  /// Inicio de Live Activity y obtención del APNs Push Token
  static Future<Map<String, String>?> startActivity({
    required String orderId,
    required String storeName,
    required String driverName,
    required int estimatedMinutes,
  }) async {
    try {
      final result = await _channel.invokeMapMethod<String, String>(
        'startActivity',
        {
          'orderId': orderId,
          'storeName': storeName,
          'driverName': driverName,
          'estimatedMinutes': estimatedMinutes,
        },
      );
      return result;
    } on PlatformException catch (e) {
      print('Live Activity Start Error: ${e.message}');
      return null;
    }
  }

  /// Actualización del estado en primer plano dentro de la aplicación
  static Future<bool> updateActivity({
    required String status,
    required int estimatedMinutes,
    required double progressRatio,
  }) async {
    try {
      final success = await _channel.invokeMethod<bool>(
        'updateActivity',
        {
          'status': status,
          'estimatedMinutes': estimatedMinutes,
          'progressRatio': progressRatio,
        },
      );
      return success ?? false;
    } on PlatformException catch (e) {
      print('Live Activity Update Error: ${e.message}');
      return false;
    }
  }

  /// Finalización de Live Activity
  static Future<bool> endActivity() async {
    try {
      final success = await _channel.invokeMethod<bool>('endActivity');
      return success ?? false;
    } on PlatformException catch (e) {
      print('Live Activity End Error: ${e.message}');
      return false;
    }
  }
}

Paso 4: Integración del push APNs desde Serverless Edge (Cloudflare Workers)

Incluso si la aplicación está en segundo plano o completamente cerrada (Killed), al invocar la API HTTP/2 de APNs (Apple Push Notification service) desde el servidor backend, el estado de Dynamic Island cambia en tiempo real.

Manejador de actualización en tiempo real de APNs en Cloudflare Workers (src/apns.ts)

// src/apns.ts (Cloudflare Workers / Hono.js)

export interface LiveActivityPushPayload {
  aps: {
    timestamp: number;
    event: "update" | "end";
    "content-state": {
      status: string;
      driverName: string;
      estimatedMinutes: number;
      progressRatio: number;
    };
    "dismissal-date"?: number;
  };
}

export async function sendAPNsLiveActivityUpdate(
  apnsPushToken: string,
  topic: String, // e.g., "dev.effidev.app.push-type.liveactivity"
  payload: LiveActivityPushPayload,
  bearerAuthJwt: string
) {
  // Apple Production APNs Endpoint
  const url = `https://api.push.apple.com/3/device/${apnsPushToken}`;

  const response = await fetch(url, {
    method: "POST",
    headers: {
      "authorization": `bearer ${bearerAuthJwt}`,
      "apns-topic": `${topic}.push-type.liveactivity`, // Encabezado obligatorio de Live Activity
      "apns-push-type": "liveactivity",                // Especificación de liveactivity
      "apns-priority": "10",                           // Envío inmediato con alta prioridad
      "content-type": "application/json",
    },
    body: JSON.stringify(payload),
  });

  if (!response.ok) {
    const errorText = await response.text();
    console.error(`APNs Push Failed [${response.status}]: ${errorText}`);
    return false;
  }

  console.log(`APNs Live Activity updated successfully for token: ${apnsPushToken}`);
  return true;
}

Soporte para Live Notifications en Android 15+ (Ongoing Notification)

El ecosistema de Android también introdujo en Android 15/16 las Ongoing Prominent Notifications, que visualizan el estado de tareas continuas en la barra de estado superior (Status Bar).

En Flutter, al combinar la propiedad ongoing: true del paquete flutter_local_notifications con Category.progress, se admite el widget de estado y cuenta regresiva en la barra superior de Android.

// Ejemplo de implementación de Android Ongoing Notification
const AndroidNotificationDetails androidPlatformChannelSpecifics =
    AndroidNotificationDetails(
  'live_delivery_channel',
  'Estado de entrega en tiempo real',
  channelDescription: 'Muestra el estado del progreso de entrega en tiempo real en la barra de estado superior.',
  importance: Importance.max,
  priority: Priority.high,
  ongoing: true, // Notificación continua que el usuario no puede eliminar arrastrando
  showProgress: true,
  maxProgress: 100,
  progress: 40,
  category: AndroidNotificationCategory.progress,
);

Pautas de optimización de batería y benchmarks de rendimiento en producción

A continuación se presentan los resultados de las pruebas de benchmark de los principales métricos de la aplicación y el uso de recursos antes y después de la implementación de ActivityKit Live Activities.

Métricas de recursos y permanencia de usuarios

3 reglas fundamentales de optimización de batería y memoria

1. Prohibición de temporizadores en segundo plano internos de la app: Si se ejecuta Timer.periodic en un Dart Isolate cuando la aplicación entra en segundo plano para actualizar el estado, el sistema operativo iOS cerrará la aplicación de forma forzada o la batería se agotará rápidamente. La actualización se debe procesar obligatoriamente mediante push de servidor APNs o eventos del SO.
2. Configuración de Stale Date: Al iniciar ActivityKit, configure staleDate para que el SO limpie automáticamente el widget si no hay actualizaciones durante más de 1 hora.
3. Rastreo de actualización de Push Token: Escuche el flujo pushTokenUpdates para actualizar en la base de datos del backend los tokens que se renueven ante cambios de red.

Conclusión: Microtecnología móvil que marca la diferencia en UX

Los usuarios de teléfonos inteligentes sienten fatiga a diario ante docenas de mensajes de notificación push sin relevancia.

Al implementar Dynamic Island y Live Activities en una aplicación Flutter:

1. UX permanentemente conectada: Expone de inmediato la marca y el estado en tiempo real en Dynamic Island y la pantalla de bloqueo sin necesidad de que el usuario abra la aplicación.
2. Maximización de la eficiencia de la batería: Protege a la perfección el rendimiento del dispositivo y la batería mediante la integración de widgets SwiftUI a nivel del sistema operativo iOS, en lugar de lógica en segundo plano de la aplicación.
3. Pipeline de actualización serverless con APNs: Al integrarse con backends edge como Cloudflare Workers, entrega decenas de miles de cambios de estado por segundo a usuarios de todo el mundo en tan solo 0.1 segundos.

Integre Live Activities en su aplicación Flutter ahora mismo y experimente directamente la asombrosa innovación en UX con un incremento del 40% en el compromiso de los usuarios (Engagement).

Artículo relacionado: Puede consultar la guía de rendimiento de renderizado móvil en Optimización de rendimiento del motor Flutter Impeller y pipeline Vulkan/Metal.