Flutter Dynamic Island連携：リアルタイム通知

単純なローカル通知の限界：なぜLive Activitiesなのか？

フードデリバリーの注文状況、タクシー/ライドシェアの移動ルート、スポーツ試合のリアルタイムスコア、タイマーや通勤・退勤記録など、リアルタイムに変化する状態情報をユーザーに伝達する際、従来は**一般的なプッシュ通知（Push Notification）**に依存していました。

しかし、一般的なプッシュ通知には次のような致命的な限界があります：

[기존 Push Notification 방식]
- 이벤트가 발생할 때마다 알림 센터에 메시지 쌓임 -> 알림 공해(Notification Fatigue)
- 화면을 닫으면 사용자가 앱을 다시 열 때까지 최신 상태 확인 불가
- 지연시간(Latency) 발생 및 유저 체류 시간(Engagement) 단절

iOS 16.1+から導入され、iOS 18/19でモバイルUIの中核として定着した**Live Activities（ライブアクティビティ）およびDynamic Island（ダイナミックアイランド）**は、このパラダイムを大きく変えました。

Live Activitiesを導入すると、アプリがバックグラウンドにある状態や画面がロック（Lock Screen）されている状態でも、単一の持続的なウィジェットを通じてリアルタイムで状態を更新できます。実際のプロダクションアプリのデータによると、Live Activitiesを適用したサービスはアプリ再訪問率（Re-engagement）が40%以上向上する成果を収めました。

この記事では、FlutterアプリでiOS Swift ActivityKit & WidgetKitを連携させ、Dynamic Islandの4つのレイアウト（Compact Leading/Trailing、Expanded、Minimal）を構築し、APNs（Apple Push Notification service）プッシュトークンを用いてエッジサーバーからリアルタイム状態を更新する完全ガイドを解説します。

Live Activities & Dynamic Island アーキテクチャ概要

Flutterアプリは画面UIを直接描画しますが、Dynamic IslandおよびLock ScreenウィジェットはiOSネイティブのSwiftUI / WidgetKit / ActivityKitランタイム上で動作します。

+-----------------------------------------------------------------------------------+
| Flutter Live Activities & APNs 실시간 갱신 파이프라인                                |
+-----------------------------------------------------------------------------------+

[Flutter App Engine]             [iOS Native Host (Swift)]           [Cloudflare / APNs Server]
         |                                   |                                   |
         |--- 1. Start Activity (MethodChannel)->|                               |
         |                                   |--- 2. ActivityKit 위젯 생성 ---->| (Lock Screen / Island)
         |                                   |--- 3. Push Token 획득 ----------->|
         |                                   |                                   | (서버 DB에 토큰 저장)
         |                                   |                                   |
         |                                   |--- 4. APNs Push Payload 전송
         |                                   |<-- 5. 실시간 상태 갱신 (Update) ----|

1. Activity開始: Flutterアプリ側で配達開始/タイマー開始時にMethodChannelを経由してSwift ActivityKitを呼び出します。
2. Push Token獲得: iOS側で該当するLive Activity専用のpushTokenを生成し、バックエンドサーバー（Cloudflare Workers / Firebase）へ送信します。
3. APNsサーバープッシュ更新: アプリが閉じられていても、バックエンドがAPNs HTTP/2 APIで状態変更Payloadを送信すると、iOS OSがダイナミックアイランドを即座に更新します。

ステップ1：iOSネイティブTargetおよびSwift WidgetKitの実装

Flutterプロジェクトのiosフォルダ内にLive Activity用のWidget Extensionターゲットを追加する必要があります。

Xcode Targetの追加

1. XcodeでRunner.xcworkspaceを開く
2. File > New > Targetを選択
3. Widget Extensionを選択（Name: LiveActivityWidget、「Include Live Activity」のチェック必須）

LiveActivityAttributes.swift（共有データ構造体）

Main AppとWidget Extensionが共有するデータ属性を定義します。

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

// Activity의 불변 정적 데이터
public struct DeliveryActivityAttributes: ActivityAttributes {
  public struct ContentState: Codable, Hashable {
    // 실시간으로 변하는 동적 데이터
    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（SwiftUI Dynamic Islandレイアウト）

Dynamic Islandの4つのビューとロック画面（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. Lock Screen (잠금화면) 위젯 레이아웃
      LockScreenWidgetView(context: context)
    } dynamicIsland: { context in
      // 2. Dynamic Island 4개 뷰 레이아웃
      DynamicIsland {
        // [Expanded] 아일랜드를 길게 누르거나 활성화되었을 때 넓은 뷰
        DynamicIslandExpandedRegion(.leading) {
          HStack {
            Image(systemName: "box.truck.fill")
              .foregroundColor(.purple)
            Text(context.attributes.storeName)
              .font(.caption)
              .bold()
          }
        }
        DynamicIslandExpandedRegion(.trailing) {
          Text("\(context.state.estimatedMinutes)분 남음")
            .font(.headline)
            .foregroundColor(.green)
        }
        DynamicIslandExpandedRegion(.bottom) {
          VStack(alignment: .leading) {
            Text("배달원: \(context.state.driverName) 님")
              .font(.subheadline)
            ProgressView(value: context.state.progressRatio)
              .tint(.purple)
          }
        }
      } compactLeading: {
        // [Compact Leading] 좌측 축소 뷰 (아이콘)
        Image(systemName: "box.truck.fill")
          .foregroundColor(.purple)
      } compactTrailing: {
        // [Compact Trailing] 우측 축소 뷰 (남은 시간)
        Text("\(context.state.estimatedMinutes)분")
          .font(.caption2)
          .bold()
      } minimal: {
        // [Minimal] 다른 앱이 아일랜드를 차지할 때 최소 뷰
        Image(systemName: "box.truck.fill")
          .foregroundColor(.purple)
      }
    }
  }
}

// 잠금화면 전용 SwiftUI 뷰
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("배달 기사: \(context.state.driverName)")
          .font(.caption)
        Spacer()
        Text("도착 예정: \(context.state.estimatedMinutes)분")
          .font(.caption)
          .bold()
      }
    }
    .padding()
    .background(Color(uiColor: .systemBackground))
  }
}

ステップ2：Swift AppDelegate & MethodChannelハンドラーの構築

FlutterメインエンジンとSwift間の通信を担うMethodChannelを実装します。

// 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)
  }

  // Live Activity 시작 및 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: "배차 완료",
      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 // APNs 푸시 갱신 활성화
      )
      self.currentActivity = activity

      // Push Token을 비동기 수신하여 Flutter로 전달
      Task {
        for await pushToken in activity.pushTokenUpdates {
          let tokenString = pushToken.map { String(format: "%02x", $0) }.joined()
          print("APNs Live Activity Push Token: \(tokenString)")
          // Flutter로 토큰 전달
          DispatchQueue.main.async {
            result(["activityId": activity.id, "pushToken": tokenString])
          }
          break
        }
      }
    } catch {
      result(FlutterError(code: "ERROR", message: error.localizedDescription, details: nil))
    }
  }

  // 로컬 매뉴얼 갱신
  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)
      }
    }
  }

  // Activity 종료
  private func endLiveActivity(call: FlutterMethodCall, result: @escaping FlutterResult) {
    Task {
      if let activity = self.currentActivity {
        let finalState = DeliveryActivityAttributes.ContentState(
          status: "배달 완료",
          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)
      }
    }
  }
}

ステップ3：Flutterサービスレイヤーの実装（live_activity_service.dart）

Flutter側で純粋なコードによってLive Activityをライフサイクル別に制御するラッパーサービスクラスを作成します。

// 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');

  /// Live Activity 시작 및 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;
    }
  }

  /// 앱 내에서 인프론트 상태 갱신
  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;
    }
  }

  /// 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;
    }
  }
}

ステップ4：エッジサーバーレス（Cloudflare Workers）APNsプッシュ連携

アプリがバックグラウンドにある場合や完全に終了（Killed）している状態であっても、バックエンドサーバーからAPNs（Apple Push Notification service）HTTP/2 APIを呼び出すことで、ダイナミックアイランドの状態がリアルタイムで変化します。

Cloudflare Workers APNs リアルタイム更新ハンドラー（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`, // Live Activity 필수 헤더
      "apns-push-type": "liveactivity",                // liveactivity 지정
      "apns-priority": "10",                           // 고우선순위 즉시 전송
      "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;
}

Android 15+ Live Notifications対応（Ongoing Notification）

Androidエコシステムにおいても、Android 15/16で上部ステータスバー（Status Bar）に継続的なタスク状態を可視化するOngoing Prominent Notificationsが導入されました。

Flutterではflutter_local_notificationsパッケージのongoing: true属性とCategory.progressを組み合わせることで、Androidのステータスバー上のカウントダウンおよび状態ウィジェットをサポートします。

// Android Ongoing Notification 구현 예시
const AndroidNotificationDetails androidPlatformChannelSpecifics =
    AndroidNotificationDetails(
  'live_delivery_channel',
  '실시간 배달 현황',
  channelDescription: '배달 진행 상태를 상단 상태바에 실시간 표시합니다.',
  importance: Importance.max,
  priority: Priority.high,
  ongoing: true, // 사용자가 드래그해서 지울 수 없는 지속 알림
  showProgress: true,
  maxProgress: 100,
  progress: 40,
  category: AndroidNotificationCategory.progress,
);

実務パフォーマンスベンチマークおよびバッテリー最適化指針

ActivityKit Live Activitiesの導入前後のアプリ主要指標およびリソース使用量ベンチマークテスト結果です。

ユーザー滞在およびリソース指標

バッテリー＆メモリ最適化の必須ルール3選

1. アプリ内部のバックグラウンドタイマー禁止: アプリがバックグラウンドに入った際にDart IsolateでTimer.periodicを回して状態を更新すると、iOS OSによってアプリが強制終了されたり、バッテリーが急激に消費されます。更新は必ずAPNsサーバープッシュまたはOSイベントで処理する必要があります。
2. Stale Dateの設定: ActivityKit開始時にstaleDateを設定し、1時間以上更新がない場合はOSが自動的にウィジェットをクリーンアップするように設定します。
3. Push Tokenの更新追跡: pushTokenUpdatesストリームをリッスンし、ネットワーク変更時に更新されるトークンをバックエンドDBに最新化します。

結論：UXの差を生むモバイルマイクロテック

スマートフォンユーザーは毎日数十件の無意味なプッシュ通知メッセージに疲労感を感じています。

FlutterアプリにDynamic IslandとLive Activitiesを構築すると：

1. 常時接続されたUX: ユーザーがアプリを開かなくても、ダイナミックアイランドとロック画面でブランドとリアルタイム状態を即座に露出します。
2. バッテリー効率の最大化: アプリのバックグラウンドロジックではなく、iOS OSレベルのSwiftUIウィジェット連携により、端末のパフォーマンスとバッテリーを完全に保護します。
3. APNsサーバーレス更新パイプライン: Cloudflare Workersなどのエッジバックエンドと連携し、毎秒数万件の状態変更を0.1秒で世界中のユーザーに配信します。

今すぐFlutterアプリにLive Activitiesを連携させ、ユーザーエンゲージメント（Engagement）40%向上の驚異的なUX革新を直接体験してみましょう。

関連記事: Flutter ImpellerエンジンとVulkan/Metalパイプラインのパフォーマンス最適化でモバイルレンダリングパフォーマンスガイドもあわせて確認できます。