Slide 1
Slide 1 text
2021.11.17
Kenichi Kambara (@korodroid)
potatotips #76
Adding App Widget with Flutter
- Part 1 (Android)
Slide 2
Slide 2 text
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)
Slide 3
Slide 3 text
My Activity (Sekaiphone: Speech Translation)
Android: Kotlin, iOS: Swift Android/iOS:Flutter
Slide 4
Slide 4 text
Motivation (Adding App Widget)
Slide 5
Slide 5 text
Today’s Talk (Target: Android)
Step
• How?
• Approach
• Implementation
Slide 6
Slide 6 text
How?
ref: https://developer.android.com/guide/topics/appwidgets
Native Development (on Android)
Slide 7
Slide 7 text
Before developing a wheel
https://pub.dev/
Slide 8
Slide 8 text
My choice: home_widget
ref: https://pub.dev/packages/home_widget
Slide 9
Slide 9 text
Approach
"QQ8JEHFU
-BZPVU
Native[Android]
"QQ8JEHFU
$PO
fi
HVSBUJPO
"QQ8JEHFU
1SPWJEFS
%BSU$PEF
"OESPJE
.BOJGFTU
data
Flutter
Slide 10
Slide 10 text
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
Slide 11
Slide 11 text
1. Create App Widget Layout
<…>
/res/layout/: sample_widget_layout.xml
Slide 12
Slide 12 text
2. Create App Widget Con
fi
guration
/res/xml/: sample_widget_con
fi
g.xml
Slide 13
Slide 13 text
[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
Slide 14
Slide 14 text
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)
}
}
}
/: SampleAppWidgetProvider.kt
Slide 15
Slide 15 text
4. Add some de
fi
nition on AndroidManifest
/: AndroidManifest.xml
Slide 16
Slide 16 text
5. Flutter Coding
Future updateAppWidget() async {
HomeWidget.saveWidgetData('_srcText', ">");
HomeWidget.updateWidget(
name: 'SampleAppWidgetProvider',
iOSName: 'SampleAppWidgetExtention');
}
<
fl
utter_src>/: hoge.dart
Slide 17
Slide 17 text
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