Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Adding App Widget with Flutter - Part 2 (iOS)

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

97a7f7899e0df28c3636b8d44bbe6578?s=128

Kenichi Kambara

June 22, 2022
Tweet

More Decks by Kenichi Kambara

Other Decks in Technology

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