Flutter Ͱ WebView Λ͍͍ײ͡ʹ͢Δ ZOZOςΫϊϩδʔζɹ෢ాमฏ / sesta / ͤͨ͢ 2018/10/17 Flutter Meetup Tokyo #5 1 

ࣗݾ঺հ ෢ాमฏ ▸ גࣜձࣾZOZOςΫϊϩδʔζɺ৽ࣄۀΛ୲౰ ▸ Google Assistant पΓɺFirebaseɺFlutter Λ৮ͬͯΔ ▸ ҰࣇͷύύͰझຯ͸ఉ͍͡Γ ▸ ෰͸ಈ͖΍͢͞ͰબΜͰ͠·͏ 2 

WebView 3 

WebView ΛͲ͏΍ͬͯ૊ΈࠐΉ͔ flutter_webview_plugin ▸ https://pub.dartlang.org/packages/flutter_webview_plugin ▸ ʮ flutter webview ʯͰݕࡧ͢Δͱ1൪ͻ͔͔ͬΔ 4 

ͦͷ··࢖͏ͱͲ͏ͳΔ͔ 5 

ͦͷ··࢖ͬͨͱ͖ͷॴײ ΋͏ͪΐͬͱ͍͍ײ͡ʹ͍ͨ͠ ▸ ໭ΕΔΑ͏ʹ͍ͨ͠ ▸ ಡΈࠐΈதͩͬͯΘ͔ΔΑ͏ʹ͍ͨ͠ 6 

͍͍ײ͡ʹͨ͠ΒͲ͏ͳ͔ͬͨ 7 

΍ͬͨ͜ͱ ▸ ໭ΕΔΑ͏ʹ͍ͨ͠ ▸ UIΛ௥Ճ ▸ ώετϦʔ؅ཧ ▸ ಡΈࠐΈதͩͬͯΘ͔ΔΑ͏ʹ͍ͨ͠ ▸ ϩʔσΟϯάͷදࣔΛ௥Ճ 8 

github.com/sesta/be_cool_webview Ͱެ։ͯ͠·͢ sesta ( ॳ ) ৄ͘͠࿩͢લʹ 

໭ΕΔΑ͏ʹ͍ͨ͠ - UI Λ௥Ճ ▸ WebviewScaffold ͷ persistentFooterButtons Λར༻ ▸ Align ͕ end ʹͳͬͯͯӈ͔Β͔͠٧·Βͳ͍ɺɺɺ ▸ ۤ͠ฆΕͷ MediaQuery Ͱ padding 10 padding 

໭ΕΔΑ͏ʹ͍ͨ͠ - ώετϦʔ؅ཧ ▸ Plugin ʹ͸ͦͷखͷػೳ͸Ұ੾ͳ͠ ▸ back ΍Β next ΍Β͸ͳ͠ɺreload(url) ͸͋Δ ▸ url Λ List Ͱ؅ཧͯ͠ɺback͚࣮ͩ૷ ▸ next ͕ೖ్ͬͨ୺ɺindex ͕ඞཁʹͳͬͯ΍΍͍ͨ͜Ί 11 

ಡΈࠐΈதͩͬͯΘ͔ΔΑ͏ʹ͍ͨ͠ - ϩʔσΟϯάͷදࣔΛ௥Ճ ▸ LinearProgressIndicator Λ࢖༻ ▸ WebviewScaffold ʹ͸ body తͳ΋ͷ͕ͳ͍ͷͰ
 Appbar => Bottom ʹ௥Ճ ▸ valueColor ͷத਎ΛͪΌΜͱࢦఆ͢Ε͹ɺϓϩάϨεײ͕૿͢͸ͣ 12 

Flutter ͷײ૝ ͳΜ͔͍͍ײ͡ʹͳΔ ▸ ϚςϦΞϧσβΠϯʹଇΓίϯϙʔωϯτ͕ఏڙ͞Ε͍ͯΔͷͰ
 ύʔπΛஔ͍͚ͯͩ͘ͰͦΕͬΆ͘ͳΔ ▸ ͔͠΋ Android ΋ iOS ΋྆ํ ▸ ϨΠΞ΢τΉ͍ͣ ▸ ࠨʹد͍͚ͤͨͩͳΜ͚ͩͲɺɺɺ ▸ എܠͷ৭ม͍͚͑ͨͩͳΜ͚ͩͲɺɺɺ 13 

END 14