AI Flutter + нативные iOS виджеты: любовь с первого Method Channel

[AI]

Почему эта статья появилась на свет


Привет! На связи мобильный Flutter разработчик. Если ты читаешь это, значит ты столкнулся с ситуацией когда необходимо подружить iOS виджеты с Flutter приложением.

Когда передо мной впервые встала эта задача, я черпал информацию из различных статей на английском, а теперь решил собрать все в одном (так еще и на русском)

Скажу сразу, разрабатывать будем без дополнительных библиотек + нужно будет иметь базовые знания в SwiftUI (нам как Flutter - разработчикам этот декларативный фреймворк не покажется сложным).

Реализация: пошаговый план действий


Теперь перейдем к делу. Весь процесс можно разбить на 2 основных этапа:

1. Создание Widget Target


Первым делом нам нужно создать новый target в iOS части нашего Flutter проекта. Widget Extension - это по сути отдельное мини-приложение, которое работает независимо от основного приложения.

Что делаем в Xcode:

1. 
   Открываем iOS проект (ios/Runner.xcworkspace)
   
   
2. 
   Добавляем новый target: File → New → Target → Widget Extension
   
   
3. 
   Даем имя виджету (например, MyAppWidget)
   
   
4. 
   В разделе Sign&Capabilities настраиваем App Groups для обмена данными между приложением и виджетом (Важно! Он должен быть идентичен настроенному в таргете основного приложения)
   

Теперь у нас сгенерировались основные файлы по умолчанию:

import SwiftUI

struct Provider: TimelineProvider {
func placeholder(in context: Context) -> SimpleEntry {
SimpleEntry(date: Date(), emoji: "😀")
}

func getSnapshot(in context: Context, completion: @escaping (SimpleEntry) -> ()) {
let entry = SimpleEntry(date: Date(), emoji: "😀")
completion(entry)
}

func getTimeline(in context: Context, completion: @escaping (Timeline<Entry>) -> ()) {
var entries: [SimpleEntry] = []

// Generate a timeline consisting of five entries an hour apart, starting from the current date.
let currentDate = Date()
for hourOffset in 0 ..< 5 {
let entryDate = Calendar.current.date(byAdding: .hour, value: hourOffset, to: currentDate)!
let entry = SimpleEntry(date: entryDate, emoji: "😀")
entries.append(entry)
}

let timeline = Timeline(entries: entries, policy: .atEnd)
completion(timeline)
}

// func relevances() async -> WidgetRelevances<Void> {
// // Generate a list containing the contexts this widget is relevant in.
// }
}

struct SimpleEntry: TimelineEntry {
let date: Date
let emoji: String
}

struct MyAppWidgetEntryView : View {
var entry: Provider.Entry

var body: some View {
VStack {
Text("Time:")
Text(entry.date, style: .time)

Text("Emoji:")
Text(entry.emoji)
}
}
}

struct MyAppWidget: Widget {
let kind: String = "MyAppWidget"

var body: some WidgetConfiguration {
StaticConfiguration(kind: kind, provider: Provider()) { entry in
if #available(iOS 17.0, *) {
MyAppWidgetEntryView(entry: entry)
.containerBackground(.fill.tertiary, for: .widget)
} else {
MyAppWidgetEntryView(entry: entry)
.padding()
.background()
}
}
.configurationDisplayName("My Widget")
.description("This is an example widget.")
}
}

#Preview(as: .systemSmall) {
MyAppWidget()
} timeline: {
SimpleEntry(date: .now, emoji: "😀")
SimpleEntry(date: .now, emoji: "🤩")
}

• 
  MyAppWidget.swift
  
  Теперь рассмотрим подробнее структуру данного файла.
  
  Provider: TimelineProvider - это основная структура виджета описывающая его поведение.
  
  • 
    функция placeholder - показывается пока виджет загружается впервые
    
    
  • 
    функция getSnapshot - быстрая версия виджета для галереи
    
    
  • 
    функция getTimeline - самый важный метод! Определяет когда и как часто обновлять.
    
  
  Стратегии обновления:
  .atEnd - обновить после последней записи в timeline
  .after(date) - обновить в конкретное время (примечательно что система говорит что обновит его в указанное время, но не гарантирует этого)
  .never - не обновлять автоматически
  
  Общение натива и Flutter
  
  
  В Flutter части я создал класс который позволяет записывать данные в платформу и извлекать их, а также вручную обновлять состояние iOS виджетов.
  
  class WidgetPreferencesChannel {
  //! METHOD CHANNEL
  static const _platformChannel =
  MethodChannel('com.app.example/widgetPreferences');
  
  Future<String?> setValue(String key, String value) async {
  if (!Platform.isIOS) {
  return null;
  }
  try {
  //! PLATFORM KEY
  final result = await _platformChannel.invokeMethod('saveWidgetData', {
  'key': key,
  'value': value,
  });
  
  return result as String?;
  } catch (err) {
  debugPrint('Error $err');
  return null;
  }
  }
  
  Future<String?> getValue(String key) async {
  if (!Platform.isIOS) {
  return null;
  }
  try {
  //! PLATFORM KEY
  final result = await _platformChannel.invokeMethod('getWidgetData', {
  'key': key,
  });
  
  return result as String?;
  } catch (err) {
  debugPrint('Error $err');
  return null;
  }
  }
  
  Future<bool?> updateWidget(String kind) async {
  if (!Platform.isIOS) {
  return null;
  }
  try {
  //! PLATFORM KEY
  final result = await _platformChannel.invokeMethod('updateWidget', {
  'kind': kind,
  });
  
  return result as bool?;
  } catch (err) {
  debugPrint('Error $err');
  return false;
  }
  }
  }
  
  
  Ну и соответственный класс в iOS части:
  
  
  public class StorageHelper {
  static let storage = UserDefaults.init(suiteName: "group.com.app.example")
  
  public static func setValue(key: String, value: Any) {
  storage?.set(value, forKey: key)
  }
  
  public static func getString(key: String) -> String? {
  return storage?.string(forKey: key)
  }
  }
  
  • 
    Удобный хелпер для записи данных
    
  
  import WidgetKit
  import Foundation
  
  // Для перехватывания events из flutter
  class WidgetPreferencesHandler {
  static func register(with messenger: FlutterBinaryMessenger) {
  // !!! PLATFORM KEY
  let storageChannel = FlutterMethodChannel(
  name: "com.app.example/widgetPreferences",
  binaryMessenger: messenger
  )
  
  storageChannel.setMethodCallHandler { (call: FlutterMethodCall, result: @escaping FlutterResult) in
  // Аргументы запроса !!! PLATFORM KEY
  guard let args = call.arguments as? [String: Any] else {
  result(FlutterError(
  code: "UNAVAILABLE",
  message: "Требуется передать аргументы",
  details: nil
  ))
  return
  }
  switch call.method {
  
  // Сохранение данных !!! PLATFORM KEY
  case "saveWidgetData":
  
  // Ключ значения
  guard let key = args["key"] as? String else {
  result(FlutterError(
  code: "UNAVAILABLE",
  message: "Требуется передать ключ (key)",
  details: nil
  ))
  return
  }
  
  // Сохраняем в UserDefaults через ваш StorageHelper
  StorageHelper.setValue(key: key, value: args["value"] as Any)
  
  // Возвращаем текущее сохранённое значение (или nil)
  let savedValue = StorageHelper.getString(key: key)
  result(savedValue)
  
  // Получение данных !!! PLATFORM KEY
  case "getWidgetData":
  
  guard let key = args["key"] as? String else {
  result(FlutterError(
  code: "UNAVAILABLE",
  message: "Требуется передать ключ (key)",
  details: nil
  ))
  return
  }
  
  // Получаем значение из UserDefaults
  let value = StorageHelper.getString(key: key)
  result(value)
  
  // Обновление виджета !!! PLATFORM KEY
  case "updateWidget":
  
  guard let kind = args["kind"] as? String else {
  result(FlutterError(
  code: "UNAVAILABLE",
  message: "Требуется передать имя виджета (kind)",
  details: nil
  ))
  return
  }
  // Обновляем виджет, чей kind = переданному
  WidgetCenter.shared.reloadTimelines(ofKind: kind)
  result(true)
  
  default:
  return
  }
  }
  }
  }
  
  • 
    класс для передачи и получения данных от Flutter приложения
    
  
  С помощью StorageHelper вы сможете получать данные непосредственно в getTimeline вашего виджета:
  
  func getTimeline(in context: Context, completion: @escaping (Timeline<SalavatEntry>) -> Void) {
  let emojiValue = StorageHelper.getString("emoji")
  let entry = SimpleEntry(date: Date(), emoji: emoji,)
  let timeline = Timeline(entries: [entry], policy: .never)
  completion(timeline)
  }
  
  
  Вот так это выглядит в нашем приложении
  
  
  
  
  
  Готово! Теперь вы знаете как синхронизировать данные между приложением и iOS виджетами. Можете подробнее изучить WidgetKit , а также возможности SwiftUI.