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

Adding App Widget with Flutter - Part 1 (Android)

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

97a7f7899e0df28c3636b8d44bbe6578?s=128

Kenichi Kambara

November 17, 2021
Tweet

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  "QQ8JEHFU -BZPVU Native[Android] "QQ8JEHFU $PO fi HVSBUJPO "QQ8JEHFU

    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