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

by sesta

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

WebView 3

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

END 14