콘텐츠로 건너뛰기
사용자 가이드지원 데모 요청 로그인
Pushwoosh.com

Flutter 프로젝트에서 iOS Live Activity 구현하기

Flutter 프로젝트를 위한 스톱워치 구현으로 Live Activity를 생성할 것입니다. 이 프로젝트에는 Flutter 측 구현과 Xcode 프로젝트의 네이티브 구현이 포함됩니다.

Flutter 측 구현

Anchor link to

startLiveActivity(), updateLiveActivity(), stopLiveActivity() 세 가지 메서드를 구현하는 클래스를 생성할 것입니다.

class DynamicIslandManager {
  final String channelKey;
  late final MethodChannel _methodChannel;


  DynamicIslandManager({required this.channelKey}) {
    _methodChannel = MethodChannel(channelKey);
  }


  Future<void> startLiveActivity({required Map<String, dynamic> jsonData}) async {
    try {
      await _methodChannel.invokeListMethod('startLiveActivity', jsonData);
    } catch (e, st) {
      log(e.toString(), stackTrace: st);
    }
  }


  Future<void> updateLiveActivity(
      {required Map<String, dynamic> jsonData}) async {
    try {
      await _methodChannel.invokeListMethod('updateLiveActivity', jsonData);
    } catch (e, st) {
      log(e.toString(), stackTrace: st);
    }
  }


  Future<void> stopLiveActivity() async {
    try {
      await _methodChannel.invokeListMethod('stopLiveActivity');
    } catch (e, st) {
      log(e.toString(), stackTrace: st);
    }
  }
}

스톱워치 앱을 만들 것이며, 스톱워치 타이머 데이터를 네이티브 메서드로 전달하기 위해 데이터 모델을 생성하고 이를 JSON과 유사한 맵 형식으로 메서드 채널 호출에 보내야 합니다.

class DynamicIslandStopwatchDataModel {
  final int elapsedSeconds;


  DynamicIslandStopwatchDataModel({
    required this.elapsedSeconds,
  });


  Map<String, dynamic> toMap() {
    return <String, dynamic>{
      'elapsedSeconds': elapsedSeconds,
    };
  }
}

각 메서드에는 해당 네이티브 메서드를 호출하는 데 필요한 코드가 포함됩니다.

이것이 Flutter 측에서 실행하는 데 필요한 초기 설정이었습니다. 이어서 필요한 메서드 호출을 포함한 기본 스톱워치 앱 UI가 구현되었습니다.

class _StopWatchScreenState extends State<StopWatchScreen> {
  int seconds = 0;
  bool isRunning = false;
  Timer? timer;


  /// channel key is used to send data from flutter to swift side over
  /// a unique bridge (link between flutter & swift)
  final DynamicIslandManager diManager = DynamicIslandManager(channelKey: 'PW');


  void startTimer() {
    setState(() {
      isRunning = true;
    });


    // invoking startLiveActivity Method
    diManager.startLiveActivity(
      jsonData: DynamicIslandStopwatchDataModel(elapsedSeconds: 0).toMap(),
    );


    timer = Timer.periodic(const Duration(seconds: 1), (timer) {
      setState(() {
        seconds++;
      });
            // invoking the updateLiveActivity Method
      diManager.updateLiveActivity(
        jsonData: DynamicIslandStopwatchDataModel(
          elapsedSeconds: seconds,
        ).toMap(),
      );
    });
  }


  void stopTimer() {
    timer?.cancel();
    setState(() {
      seconds = 0;
      isRunning = false;
    });


    // invoking the stopLiveActivity Method
    diManager.stopLiveActivity();
  }


  @override
  void dispose() {
    timer?.cancel();
    super.dispose();
  }


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Stopwatch App'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Stopwatch: $seconds seconds',
              style: const TextStyle(fontSize: 24),
            ),
            const SizedBox(height: 20),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                ElevatedButton(
                  onPressed: isRunning ? null : startTimer,
                  child: const Text('Start'),
                ),
                const SizedBox(width: 20),
                ElevatedButton(
                  onPressed: isRunning ? stopTimer : null,
                  child: const Text('Stop'),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

네이티브 측 구현

Anchor link to

Xcode 프로젝트 구성

Anchor link to
  1. Xcode에서 프로젝트를 열고 General 탭에서 최소 배포 버전을 iOS 16.1로 설정합니다.
최소 배포 버전이 iOS 16.1로 설정된 Xcode General 탭
  1. Info.plist에 새 키 NSSupportsLiveActivities를 추가하고 그 값을 YES(Boolean)로 설정합니다.

Info.plist

Anchor link to
<key>NSSupportsLiveActivities</key>
<true/>
  1. 액션 바에서 File > New > Target을 선택하고 WidgetExtension을 검색하여 새 위젯을 생성합니다.

코드 측 구현

Anchor link to

Dynamic Island의 라이브 액티비티를 관리할 LiveActivityManager라는 클래스를 만들어 보겠습니다. 이 클래스에는 startLiveActivity(), updateLiveActivity(), stopLiveActivity() 세 가지 메서드가 포함됩니다.

Swift

import ActivityKit
import Flutter
import Foundation


@available(iOS 16.1, *)
class LiveActivityManager {


    private var stopwatchActivity: Activity<StopwatchWidgetAttributes>? = nil


    func startLiveActivity(data: [String: Any]?, result: FlutterResult) {
        let attributes = StopwatchWidgetAttributes()


        if let info = data {
            let state = StopwatchWidgetAttributes.ContentState(
                elapsedTime: info["elapsedSeconds"] as? Int ?? 0
            )
            stopwatchActivity = try? Activity<StopwatchWidgetAttributes>.request(
                attributes: attributes, contentState: state, pushType: nil)
        } else {
            result(FlutterError(code: "418", message: "Live activity didn't invoked", details: nil))
        }
    }


    func updateLiveActivity(data: [String: Any]?, result: FlutterResult) {
        if let info = data {
            let updatedState = StopwatchWidgetAttributes.ContentState(
                elapsedTime: info["elapsedSeconds"] as? Int ?? 0
            )


            Task {
                await stopwatchActivity?.update(using: updatedState)
            }
        } else {
            result(FlutterError(code: "418", message: "Live activity didn't updated", details: nil))
        }
    }


    func stopLiveActivity(result: FlutterResult) {
        do {
            Task {
                await stopwatchActivity?.end(using: nil, dismissalPolicy: .immediate)
            }
        } catch {
            result(FlutterError(code: "418", message: error.localizedDescription, details: nil))
        }
    }
}

각 메서드에는 고유한 기능이 있습니다. startLiveActivity()는 이름에서 알 수 있듯이 Live Activity를 시작하여 Dynamic Island 기능을 트리거하는 역할을 합니다. 마찬가지로 stopLiveActivity()와 updateLiveActivity()는 Live Activity를 중지하고 Dynamic Island에 표시되는 데이터를 업데이트하는 것을 처리합니다.

다음으로, StopWatchDIWidgetLiveActivity.swift를 열고 StopwatchDIWidgetAttributes 구조체를 수정합니다(스니펫 참조). 이 속성 구조체는 UI에 표시될 정보(Flutter에서 직접 전달)를 담는 데이터 모델 역할을 하며, 필요에 따라 UI를 수정할 수도 있습니다.

Swift

struct StopwatchWidgetAttributes: ActivityAttributes {
    public typealias stopwatchStatus = ContentState


    public struct ContentState: Codable, Hashable {
        var elapsedTime: Int
    }
}

이제 남은 것은 Dynamic Island의 UI뿐입니다! (와, 여기까지 왔네요!) Dynamic Island의 전체 UI는 SwiftUI를 사용하여 만들어야 합니다. 이 글에서는 간단한 UI를 디자인했지만, 필요에 따라 자유롭게 커스터마이징할 수 있습니다.

이 UI 코드는 StopwatchWidgetLiveActivity 구조체 내에 작성해야 합니다. 구조체에서 기존 코드를 제거하고 아래 코드를 따를 수 있습니다:

SwiftUI

struct StopwatchWidgetLiveActivity: Widget {


    func getTimeString(_ seconds: Int) -> String {
        let hours = seconds / 3600
        let minutes = (seconds % 3600) / 60
        let seconds = (seconds % 3600) % 60


        return hours == 0 ?
                String(format: "%02d:%02d", minutes, seconds)
                : String(format: "%02d:%02d:%02d", hours, minutes, seconds)
    }


    var body: some WidgetConfiguration {
        ActivityConfiguration(for: StopwatchWidgetAttributes.self) { context in
            HStack {
                Text("Time ellapsed")
                    .font(.system(size: 20, weight: .semibold))
                    .foregroundColor(.white)
                Spacer()
                Image(systemName: "timer")
                    .foregroundColor(.white)
                Spacer().frame(width: 10)
                Text(getTimeString(context.state.elapsedTime))
                    .font(.system(size: 24, weight: .semibold))
                    .foregroundColor(.yellow)
            }
            .padding(.horizontal)
            .activityBackgroundTint(Color.black.opacity(0.5))


        }
        dynamicIsland: { context in
            DynamicIsland {
                DynamicIslandExpandedRegion(.center) {
                    VStack(alignment: .center) {
                        Text("Pushwoosh Timer")
                        Spacer().frame(height: 24)
                        HStack {
                            Text("Time ellapsed")
                                .font(.system(size: 20, weight: .semibold))
                                .foregroundColor(.white)
                            Spacer()
                            Image(systemName: "timer")
                            Spacer().frame(width: 10)
                            Text(getTimeString(context.state.elapsedTime))
                                .font(.system(size: 24, weight: .semibold))
                                .foregroundColor(.yellow)
                        }.padding(.horizontal)
                    }
                }
            } compactLeading: {
                Image(systemName: "timer").padding(.leading, 4)
            } compactTrailing: {
                Text(getTimeString(context.state.elapsedTime)).foregroundColor(.yellow)
                    .padding(.trailing, 4)
            } minimal: {
                Image(systemName: "timer")
                    .foregroundColor(.yellow)
                    .padding(.all, 4)
            }
            .widgetURL(URL(string: "http://www.pushwoosh.com"))
            .keylineTint(Color.red)
        }
    }
}

AppDelegate 코드도 수정하는 것을 잊지 마세요.

AppDelegate.swift

import UIKit
import Flutter


@main
@objc class AppDelegate: FlutterAppDelegate {


    private let liveActivityManager: LiveActivityManager = LiveActivityManager()


    override func application(
        _ application: UIApplication,
        didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
    ) -> Bool {


        GeneratedPluginRegistrant.register(with: self)


        let controller : FlutterViewController = window?.rootViewController as! FlutterViewController
        let diChannel =  FlutterMethodChannel(name: "PW", binaryMessenger: controller.binaryMessenger)


        diChannel.setMethodCallHandler({ [weak self] (
            call: FlutterMethodCall, result: @escaping FlutterResult) -> Void in
            switch call.method {
            case "startLiveActivity":
                self?.liveActivityManager.startLiveActivity(
                    data: call.arguments as? Dictionary<String,Any>,
                    result: result)
                break


            case "updateLiveActivity":
                self?.liveActivityManager.updateLiveActivity(
                    data: call.arguments as? Dictionary<String,Any>,
                    result: result)
                break


            case "stopLiveActivity":
                self?.liveActivityManager.stopLiveActivity(result: result)
                break


            default:
                result(FlutterMethodNotImplemented)
            }
        })


        return super.application(application, didFinishLaunchingWithOptions: launchOptions)
    }
}

이게 전부입니다! 이것으로 Dynamic Island를 구현하고 Flutter 코드에 연결하는 데 필요한 모든 것을 다루었습니다!

Pushwoosh 코드 구현

Anchor link to

Pushwoosh Flutter 플러그인은 프로젝트에서 Live Activity를 관리하기 위한 두 가지 메서드를 제공합니다.

  /// Default setup Live Activity
  Future<void> defaultSetup() async {
    await _channel.invokeMethod("defaultSetup");
  }


  /// Default start Live Activity
  /// [activityId] activity ID
  /// [attributes] attributes
  /// [content] content
  Future<void> defaultStart(String activityId, Map<String, dynamic> attributes, Map<String, dynamic> content) async {
    await _channel.invokeMethod("defaultStart", {"activityId": activityId, "attributes": attributes, "content": content});
  }

defaultSetup() 메서드를 사용하면 Pushwoosh 측에서 Live Activity의 구조와 토큰을 관리할 수 있습니다.

애플리케이션 초기화 중에 이 메서드를 호출하십시오.

  Pushwoosh.initialize({"app_id": "XXXXX-XXXXX", "sender_id": "XXXXXXXXXXXX"});
/**
* Call this method `defaultSetup()`
*/
  Pushwoosh.getInstance.defaultSetup();

앱 초기화 중에 Pushwoosh는 시작용 푸시 토큰(push-to-start token)을 서버로 전송하며, 이를 통해 나중에 API 호출을 통해 Live Activity를 시작할 수 있습니다. Live Activity를 시작하려면 API 요청을 해야 합니다. 아래는 요청 예시입니다:

{
  "request": {
    "application": "XXXXX-XXXXX",
    "auth": "YOUR_AUTH_API_TOKEN",
    "notifications": [
      {
        "content": "Message",
        "title":"Title",
        "live_activity": {
          "event": "start", // `start` event
            "content-state": {
                "data": { // You need to pass the parameters in a dictionary with the key data.
                    "emoji": "dynamic data"
                }
            },
           "attributes-type": "DefaultLiveActivityAttributes",
            "attributes": {
                "data": {
                    "name": "static data"
                }
        }
        },
        "devices": [ "XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX" // HWID
       ],
        "live_activity_id": "your_activity_id"
      }
    ]
  }
}

API에 대한 더 자세한 문서

예를 들어 앱에서 간단한 Live Activity를 시작하려면 Flutter에서 다음 메서드를 사용할 수 있습니다: defaultStart(String activityId, Map<String, dynamic> attributes, Map<String, dynamic> content)

이 메서드는 Live Activity 시작을 트리거하는 모든 이벤트에서 호출할 수 있습니다.

// Function to start Live Activity
  void startLiveActivity() {
    // Create your activity ID
    String activityId = "stopwatch_activity";


    // Define the attributes you want to send to the Live Activity
    Map<String, dynamic> attributes = {
      'title': 'Stopwatch Activity',
      'description': 'This is a live activity for a stopwatch.'
    };


    // Define the content state to update on the Dynamic Island
    Map<String, dynamic> content = {
      'elapsedSeconds': 0
    };


    // Call Pushwoosh's defaultStart method to trigger the Live Activity
    Pushwoosh.getInstance().defaultStart(activityId, attributes, content);
  }