Adding App Widget with Flutter - Part 1 (Android)

This is a slide on potatotips 76.
「Adding App Widget with Flutter - Part 1 (Android)」
#potatotips #flutterjp #flutter #androidjp

Transcript

1. 2021.11.17 Kenichi Kambara (@korodroid) potatotips #76 Adding App Widget with Flutter - Part 1 (Android)
2. About me •Mobile App Development •Speeches (e.g. 9 International confs.) •Writings (e.g. 5 Dev Books) •[Of fi cial] Evangelist at NTT TechnoCross •[Private] iplatform.org Kenichi Kambara (@korodroid)
3. My Activity (Sekaiphone: Speech Translation) Android: Kotlin, iOS: Swift Android/iOS:Flutter
4. Motivation (Adding App Widget) 
5. Today’s Talk (Target: Android)  Step • How? • Approach • Implementation
6. How?  ref: https://developer.android.com/guide/topics/appwidgets Native Development (on Android)
7. Before developing a wheel https://pub.dev/ 
8. My choice: home_widget  ref: https://pub.dev/packages/home_widget
9. Approach  
   "QQ
   8JEHFU
   -BZPVU Native[Android] 
   "QQ
   8JEHFU
   $PO fi HVSBUJPO 
   "QQ
   8JEHFU
   1SPWJEFS 
   %BSU
   $PEF 
   "OESPJE
   .BOJGFTU data Flutter
10. Approach  •Native [Android] 1. Create App Widget Layout 2. Create App Widget Con fi guration 3. Add App Provider Widget 4. Add some de fi nition on AndroidManifest •Flutter 5. Implement Dart code
11. 1. Create App Widget Layout <LinearLayout xmlns:android="http://schemas.android.com/apk/ res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="horizontal"> <ImageView android:id="@+id/icon" android:layout_margin="4dp" android:layout_width="48dp" android:layout_height="48dp" android:src="@drawable/chara1" /> <…>  <android_src>/res/layout/: sample_widget_layout.xml
12. 2. Create App Widget Con fi guration <?xml version="1.0" encoding="utf-8"?> <appwidget-provider xmlns:android="http://schemas.android.com/apk/res/android" android:initialLayout=“@layout/sample_widget_layout" android:minWidth="320dp" android:minHeight="40dp" android:minResizeWidth="320dp" android:minResizeHeight="40dp" android:widgetCategory="home_screen" />  <android_src>/res/xml/: sample_widget_con fi g.xml
13. [Appendix] App Widget Size  the table below to roughly estimate ref: https://stuff.mit.edu/afs/sipb/project/android/docs/guide/practices/ui_guidelines/widget_design.html $FMM 4J[F  EQ  EQ ʜ ʜ O 
    
    O
    
14. 3. Add App Widget Provider class SampleAppWidgetProvider : HomeWidgetProvider() { override fun onUpdate(context: Context, appWidgetManager: AppWidgetManager, appWidgetIds: IntArray, widgetData: SharedPreferences) { appWidgetIds.forEach { widgetId -> val views = RemoteViews(context.packageName, R.layout.sample_widget_layout).apply { var srcText = widgetData.getString("_srcText", ""); setTextViewText(R.id.srcText, srcText) } appWidgetManager.updateAppWidget(widgetId, views) } } }  <android_src>/: SampleAppWidgetProvider.kt
15. 4. Add some de fi nition on AndroidManifest <!-- for User-Defined Class--> <receiver android:name=".SampleAppWidgetProvider" > <intent-filter> <action android:name="android.appwidget.action.APPWIDGET_UPDATE" /> </intent-filter> <meta-data android:name="android.appwidget.provider" android:resource="@xml/sample_widget_config" /> </receiver>  <android_src>/: AndroidManifest.xml
16. 5. Flutter Coding Future<void> updateAppWidget() async { HomeWidget.saveWidgetData<String>('_srcText', "<Data from Dart>>"); HomeWidget.updateWidget( name: 'SampleAppWidgetProvider', 
 iOSName: 'SampleAppWidgetExtention'); }  < fl utter_src>/: hoge.dart
17. Please let me know if you have any requests 
 such as technical speeches, technical writings and so on. Facebook:http://fb.com/kanbara.kenichi Twitter:@korodroid LinkedIn:http://www.linkedin.com/in/korodroid Thank you so much