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
   

   View Slide

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

   View Slide

3. WebView
   3
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

    View Slide

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

    View Slide

12. ಡΈࠐΈதͩͬͯΘ͔ΔΑ͏ʹ͍ͨ͠ - ϩʔσΟϯάͷදࣔΛ௥Ճ
    ▸ LinearProgressIndicator Λ࢖༻
    ▸ WebviewScaffold ʹ͸ body తͳ΋ͷ͕ͳ͍ͷͰ

    Appbar => Bottom ʹ௥Ճ
    ▸ valueColor ͷத਎ΛͪΌΜͱࢦఆ͢Ε͹ɺϓϩάϨεײ͕૿͢͸ͣ
    12
    

    View Slide

13. Flutter ͷײ૝
    ͳΜ͔͍͍ײ͡ʹͳΔ
    ▸ ϚςϦΞϧσβΠϯʹଇΓίϯϙʔωϯτ͕ఏڙ͞Ε͍ͯΔͷͰ

    ύʔπΛஔ͍͚ͯͩ͘ͰͦΕͬΆ͘ͳΔ
    ▸ ͔͠΋ Android ΋ iOS ΋྆ํ
    ▸ ϨΠΞ΢τΉ͍ͣ
    ▸ ࠨʹد͍͚ͤͨͩͳΜ͚ͩͲɺɺɺ
    ▸ എܠͷ৭ม͍͚͑ͨͩͳΜ͚ͩͲɺɺɺ
    13
    

    View Slide

14. END
    14
    

    View Slide