Adding App Widget with Flutter - Part 2 (iOS)

This is a slide on potatotips 78.
「Adding App Widget with Flutter - Part 2 (iOS)」
#potatotips #flutterjp #flutter #iosjp

- See also:
Adding App Widget with Flutter - Part 1 (Android)
https://speakerdeck.com/korodroid/adding-app-widget-with-flutter-part-1-android

Transcript

1. 2022.06.22 Kenichi Kambara (@korodroid) potatotips #78 Adding App Widget with Flutter - Part 2 (iOS)
2.  About me •Mobile App Development •Speeches (e.g. 9 International confs.) •Writings (e.g. 6 Dev Books) •[Of fi cial] Evangelist at NTT TechnoCross •[Private] iplatform.org ਆݪ ݈Ұ (@korodroid)
3. Agenda •Widget Topics from WWDC 2022 •Adding iOS Widget with Flutter
4. Widget Topics from WWDC 2022 Source: WWDC 2022 Keynote
5. Recent Activity (Sekaiphone Pro) Android/iOS: Flutter
6. Motivation (Adding App Widget) 
7. Today’s Talk (Target: iOS)  Step • How? • Approach • Implementation
8. How?  ref: https://developer.apple.com/widgets/ WidgetKit
9. Before developing a wheel https://pub.dev/ 
10. My choice: home_widget  ref: https://pub.dev/packages/home_widget
11. Approach  
    8JEHFU
    &YUFOTJPO
    Native[iOS] 
    "QQ
    (SPVQT
    $PO fi HVSBUJPO 
    %BSU
    $PEF data Flutter "QQ 
    *NQMFNFOUBUJPO
    
12. Approach  •Native [iOS] 1. Create a Widget Extension 2. Con fi gure App Groups 3. Implement a Widget Extension •Flutter 4. Implement Dart code
13. 1. Create a Widget Extension  On Xcode: File > New > Target
14. 1. Create a Widget Extension 
15. 2. Con fi gure App Groups  On Xcode: Signing & Capabilities->TARGETS->[App]
16. 2. Con fi gure App Groups  On Xcode: Signing & Capabilities->TARGETS->[Extension]
17. 2. Con fi gure App Groups  On Xcode: Signing & Capabilities->TARGETS->[Extension]
18. 3. Implement a Widget Extension (1/2)  <ios_src>/<Extension>/: SampleWidget.swift import WidgetKit import SwiftUI struct SampleWidgetEntryView : View { var entry: Provider.Entry var body: some View { HStack { Image("charactor").resizable() .frame(width: 48.0, height: 48.0).padding() VStack { Text(entry.srcText).padding() Text(entry.dstText).bold().padding() } }.frame(maxWidth: .infinity, maxHeight: .infinity ).background(Color(red: 255/255, green: 235/255, 
 blue: 59/255, opacity: 1.0)) } }
19. [Appendix] Widget Size  ref: https://developer.apple.com/design/human-interface-guidelines/components/system-experiences/widgets/
20. 3. Implement a Widget Extension (2/2)  @main struct SampleWidget: Widget { let kind: String = "SampleWidget" var body: some WidgetConfiguration { StaticConfiguration(kind: kind, provider: Provider()) { entry in SampleWidgetEntryView(entry: entry) } .configurationDisplayName("Sekaiphone Widget") .description("Shows recent sentences.") .supportedFamilies([.systemMedium, .systemLarge]) } } Supported Widget Size <ios_src>/<Extension>/: SampleWidget.swift
21. 4. Dart Coding HomeWidget.saveWidgetData<String>('_srcText', srcText); HomeWidget.saveWidgetData<String>('_dstText', dstText); HomeWidget.updateWidget( name: 'AppWidgetProvider', androidName: 'AppWidgetProvider', iOSName: ‘SampleWidget');  < fl utter_src>/: hoge.dart
22.  Reference •Adding App Widget with Flutter - Part 1 (Android) 
 https://speakerdeck.com/korodroid/adding-app-widget-with- fl utter-part-1-android
23. Please let me know if you have any requests 
 such as technical speeches, technical writings and so on. Facebook:https://fb.com/kanbara.kenichi Twitter:@korodroid LinkedIn:https://www.linkedin.com/in/korodroid Thank you so much