$30 off During Our Annual Pro Sale. View Details »

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

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

sesta

October 17, 2018
Tweet

More Decks by sesta

Other Decks in Technology

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