FutterでWebViewをいい感じにする / be cool flutter webview

Flutter Meetup Tokyo #5 初心者枠で使った資料です

イベント: https://flutter-jp.connpass.com/event/101447/
PDF: https://github.com/sesta/slide/raw/master/20181017_be-cool-flutter-webview.pdf

Transcript

1. Flutter Ͱ WebView Λ͍͍ײ͡ʹ͢Δ ZOZOςΫϊϩδʔζɹ෢ాमฏ / sesta / ͤͨ͢ 2018/10/17 Flutter Meetup Tokyo #5 1
2. ࣗݾ঺հ ෢ాमฏ ▸ גࣜձࣾZOZOςΫϊϩδʔζɺ৽ࣄۀΛ୲౰ ▸ Google Assistant पΓɺFirebaseɺFlutter Λ৮ͬͯΔ ▸ ҰࣇͷύύͰझຯ͸ఉ͍͡Γ ▸ ෰͸ಈ͖΍͢͞ͰબΜͰ͠·͏ 2
3. WebView 3
4. WebView ΛͲ͏΍ͬͯ૊ΈࠐΉ͔ flutter_webview_plugin ▸ https://pub.dartlang.org/packages/flutter_webview_plugin ▸ ʮ flutter webview ʯͰݕࡧ͢Δͱ1൪ͻ͔͔ͬΔ 4
5. ͦͷ··࢖͏ͱͲ͏ͳΔ͔ 5
6. ͦͷ··࢖ͬͨͱ͖ͷॴײ ΋͏ͪΐͬͱ͍͍ײ͡ʹ͍ͨ͠ ▸ ໭ΕΔΑ͏ʹ͍ͨ͠ ▸ ಡΈࠐΈதͩͬͯΘ͔ΔΑ͏ʹ͍ͨ͠ 6
7. ͍͍ײ͡ʹͨ͠ΒͲ͏ͳ͔ͬͨ 7
8. ΍ͬͨ͜ͱ ▸ ໭ΕΔΑ͏ʹ͍ͨ͠ ▸ UIΛ௥Ճ ▸ ώετϦʔ؅ཧ ▸ ಡΈࠐΈதͩͬͯΘ͔ΔΑ͏ʹ͍ͨ͠ ▸ ϩʔσΟϯάͷදࣔΛ௥Ճ 8
9. github.com/sesta/be_cool_webview Ͱެ։ͯ͠·͢ sesta ( ॳ ) ৄ͘͠࿩͢લʹ
10. ໭ΕΔΑ͏ʹ͍ͨ͠ - UI Λ௥Ճ ▸ WebviewScaffold ͷ persistentFooterButtons Λར༻ ▸ Align ͕ end ʹͳͬͯͯӈ͔Β͔͠٧·Βͳ͍ɺɺɺ ▸ ۤ͠ฆΕͷ MediaQuery Ͱ padding 10 padding
11. ໭ΕΔΑ͏ʹ͍ͨ͠ - ώετϦʔ؅ཧ ▸ Plugin ʹ͸ͦͷखͷػೳ͸Ұ੾ͳ͠ ▸ back ΍Β next ΍Β͸ͳ͠ɺreload(url) ͸͋Δ ▸ url Λ List Ͱ؅ཧͯ͠ɺback͚࣮ͩ૷ ▸ next ͕ೖ్ͬͨ୺ɺindex ͕ඞཁʹͳͬͯ΍΍͍ͨ͜Ί 11
12. ಡΈࠐΈதͩͬͯΘ͔ΔΑ͏ʹ͍ͨ͠ - ϩʔσΟϯάͷදࣔΛ௥Ճ ▸ LinearProgressIndicator Λ࢖༻ ▸ WebviewScaffold ʹ͸ body తͳ΋ͷ͕ͳ͍ͷͰ
 Appbar => Bottom ʹ௥Ճ ▸ valueColor ͷத਎ΛͪΌΜͱࢦఆ͢Ε͹ɺϓϩάϨεײ͕૿͢͸ͣ 12
13. Flutter ͷײ૝ ͳΜ͔͍͍ײ͡ʹͳΔ ▸ ϚςϦΞϧσβΠϯʹଇΓίϯϙʔωϯτ͕ఏڙ͞Ε͍ͯΔͷͰ
 ύʔπΛஔ͍͚ͯͩ͘ͰͦΕͬΆ͘ͳΔ ▸ ͔͠΋ Android ΋ iOS ΋྆ํ ▸ ϨΠΞ΢τΉ͍ͣ ▸ ࠨʹد͍͚ͤͨͩͳΜ͚ͩͲɺɺɺ ▸ എܠͷ৭ม͍͚͑ͨͩͳΜ͚ͩͲɺɺɺ 13
14. END 14