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

B056544c9785c2f705e076156719ab08?s=47 sesta
October 17, 2018

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

B056544c9785c2f705e076156719ab08?s=128

sesta

October 17, 2018
Tweet

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