Upgrade to Pro — share decks privately, control downloads, hide ads and more …

FlutterKaigi2021

Koji Wakamiya
November 30, 2021

 FlutterKaigi2021

Koji Wakamiya

November 30, 2021
Tweet

More Decks by Koji Wakamiya

Other Decks in Programming

Transcript

  1. FlutterʹUIϚΠΫϩαʔϏε։ൃΛಋೖ͠ɺ

    ѹ౗తͳDXΛ࣮ݱ͠Α͏ʂ
    Koji Wakamiya(@koji-1009) / FlutterKaigi 2021

    View full-size slide

  2. ࣗݾ঺հ
    • Koji Wakamiya


    • @koji-1009(GitHub)


    • Flutter/Android/iOS


    • Tech lead(mobile client/Studyplus, inc.)

    View full-size slide

  3. ࣗݾ঺հ
    • Flutterͷঢ়ଶ؅ཧͱViewͷߋ৽


    • FlutterͰPluginΛۦ࢖ͯ͠ߴ଎ʹ։ൃ͢Δ


    • "σβΠϯγεςϜ"ͷա౓ͳҰൠԽͱͦͷରԠʹ͍ͭͯ



    fl
    utter_auth_ui(pub.dev)

    View full-size slide

  4. Studyplus, inc.
    • ֶशه࿥؅ཧΞϓϦ Studyplus


    • ࢀߟॻαϒεΫΞϓϦ Porto

    View full-size slide

  5. Studyplus, inc.
    • Studyplus


    • Kotlin or Swift + Add-to-App(Dart)


    • Porto


    • Dart

    View full-size slide

  6. FlutterͰ࠷ߴͷDX

    View full-size slide

  7. ͳͥDX(Developer Experience)?
    • ΞϓϦέʔγϣϯ͕େ͖͘ͳͬͨ࣌ͷ։ൃମݧΛߟ͍͑ͨ


    • FlutterΛ࠾༻͢Δ͜ͱͷϝϦοτΛߋʹ੔ཧ͍ͨ͠

    View full-size slide

  8. FlutterͷDX
    • ҰൠʹޠΒΕ͍ͯΔ΋ͷ


    • એݴతUI


    • Hot Reload


    • ϚϧνϓϥοτϑΥʔϜ

    View full-size slide

  9. FlutterͷDX
    • ҰൠʹޠΒΕ͍ͯͳ͍΋ͷ


    • σϑΝΫτελϯμʔυͷগͳ͞


    • ഁյతͳมߋͷଟ͞


    • εέʔϧͰ͖Δ։ൃख๏

    View full-size slide

  10. FlutterͷDX
    • ҰൠʹޠΒΕ͍ͯͳ͍΋ͷ


    • σϑΝΫτελϯμʔυͷগͳ͞


    • ഁյతͳมߋͷଟ͞


    • εέʔϧͰ͖Δ։ൃख๏

    View full-size slide

  11. Agenda
    • લ൒ɿFlutterͷ։ൃΛߟ͑Δ


    • ϚΠΫϩαʔϏε


    • FlutterͱFlutter Package&Plugin


    • Package&PluginͱGit Repository

    View full-size slide

  12. Agenda
    • ޙ൒ɿ࣮૷αϯϓϧʹΑΔߟ࡯


    • ࣮૷ྫ


    • ։ൃͷਐΊํ


    • ෼ׂʹ͍ͭͯͷߟ࡯

    View full-size slide

  13. Flutterͷ։ൃΛߟ͑Δ
    FlutterͰͲ͏͍ͬͨ։ൃΛ͢Δͱ৺஍Α͍ͷ͔

    View full-size slide

  14. ৺஍Α͍։ൃͷఆٛ
    • मਖ਼΍ػೳ։ൃ͕༰қ


    • ϦϦʔε͕༰қ


    • ΤϯδχΞͷࢀՃ͕༰қ

    View full-size slide

  15. ࡞੒௚ޙͷΞϓϦέʔγϣϯ
    • मਖ਼΍ػೳ։ൃ͕༰қ


    • ϦϦʔε͕༰қ


    • ΤϯδχΞͷࢀՃ͕༰қ

    View full-size slide

  16. ػೳ։ൃ͕௕͘ଓ͍ͨΞϓϦέʔγϣϯ
    • मਖ਼΍ػೳ։ൃ͕༰қʁ


    • ϦϦʔε͕༰қʁ


    • ΤϯδχΞͷࢀՃ͕༰қʁ

    View full-size slide

  17. ௕͘ଓ͍ͨΞϓϦέʔγϣϯͷݕ౼
    • ෳ਺ϓϥοτϑΥʔϜରԠ


    • ଟػೳͳΞϓϦέʔγϣϯ

    View full-size slide

  18. ҭͬͨΞϓϦέʔγϣϯͷݕ౼
    • ෳ਺ϓϥοτϑΥʔϜରԠ


    • ଟػೳͳΞϓϦέʔγϣϯ

    View full-size slide

  19. ෳ਺ϓϥοτϑΥʔϜͷ՝୊
    • ϦϦʔεαΠΫϧ


    • ετΞ৹ࠪͷ༗ແ΍௕͞ͳͲ


    • ϓϥοτϑΥʔϜݻ༗ͷ࣮૷


    • iOSͷAppClips΍AndroidͷSlicesͳͲ

    View full-size slide

  20. ෳ਺ϓϥοτϑΥʔϜͷ՝୊
    • ରԠϓϥοτϑΥʔϜ͕૿͑Δͨͼʹݕ౼͕ඞཁ


    • Flutterͷ࢓૊Έతʹղܾ͕೉͍͠


    • ରԠϓϥοτϑΥʔϜ͝ͱʹ෼ׂͰ͖Δ࢓૊Έ͕ඞཁ

    View full-size slide

  21. ҭͬͨΞϓϦέʔγϣϯͷݕ౼
    • ෳ਺ϓϥοτϑΥʔϜରԠ


    • ଟػೳͳΞϓϦέʔγϣϯ

    View full-size slide

  22. ଟػೳΞϓϦέʔγϣϯͷͭΒ͞
    • ཁ݅ͷෳࡶੑ͕ίʔυʹ൓ө͞Εͯ͠·͏


    • ॲཧ͕ෳࡶʹͳΔ


    • ίʔυྔ͕େ͖͘ͳΔ

    View full-size slide

  23. ଟػೳΞϓϦέʔγϣϯͷͭΒ͞
    • ը໘ભҠ͕ෳࡶʹͳΓɺ։ൃதͷը໘͕දࣔ͠ʹ͘͘ͳΔ


    • UIͷදࣔ৚݅Λ੔͑Δͷ͕೉͘͠ͳΔ


    • ڞ௨͢ΔWidgetͱͦ͏Ͱ͸ͳ͍Widgetͷ൑அ͕೉͘͠ͳΔ

    View full-size slide

  24. ҭͬͨΞϓϦέʔγϣϯͱ޲͖߹͏
    • Presentation Domain Separation


    • ΞϓϦέʔγϣϯΛద੾ʹ෼ׂ͢Δ


    • ෼ׂͨ͠ίʔυΛ؅ཧ͠΍͍͢ঢ়ଶʹอͭ


    • νʔϜʹ߹Θͤͨ؀ڥΛ࡞Δ

    View full-size slide

  25. ϚΠΫϩαʔϏε

    View full-size slide

  26. ϚΠΫϩαʔϏε(microservice)
    • ϚΠΫϩαʔϏεͱ͸ɺΞϓϦέʔγϣϯ։ൃͷख๏·ͨ͸
    ΞʔΩςΫνϟɻΞϓϦέʔγϣϯͷߏ੒ཁૉΛಠཱͨ͠αʔ
    Ϗε܈(ϚΠΫϩαʔϏε)΁෼͚ɺ࿈ܞͤ͞Δख๏Ͱ͢ɻ


    • https://www.redhat.com/ja/topics/microservices

    View full-size slide

  27. ϚΠΫϩαʔϏεͷߟ࡯
    • मਖ਼΍ػೳ։ൃ͕༰қ


    • ϦϦʔε͕༰қ


    • ΤϯδχΞͷࢀՃ͕༰қ

    View full-size slide

  28. मਖ਼΍ػೳ։ൃ͕༰қ
    • ґଘؔ܎͕੔ཧ͞ΕΔ


    • Өڹ͕ݶఆత͔Ͳ͏͔͕Θ͔Δ


    • αʔϏε୯ମͰ΋ಈ࡞νΣοΫ͕Մೳ

    View full-size slide

  29. ϦϦʔε͕༰қ
    • αʔϏε୯ମͰϦϦʔεͷੋඇΛ൑ఆͰ͖Δ


    • αʔϏε୯ମͰස౓Λ؅ཧͰ͖Δ


    • αʔϏεΛ౷߹͢Δଆͱ੾Γ཭ͤΔ


    • ։ൃϦϦʔεͱࢢ৔ϦϦʔε

    View full-size slide

  30. ΤϯδχΞͷࢀՃ͕༰қ
    • ࠷ॳ͔ΒFlutterͷશͯΛ֮͑ͳͯ͘ྑ͍


    • ୲౰͢ΔػೳɺൣғΛߜΔ͜ͱ͕Ͱ͖Δ


    • ϑϨʔϜϫʔΫʹஈ֊తʹ׳ΕΔ͜ͱ͕Ͱ͖Δ


    • Pure DartͳLogic͔Β୲౰͢ΔͳͲ

    View full-size slide

  31. FlutterͰϚΠΫϩαʔϏε։ൃ͸Մೳ͔ʁ
    • ΞϓϦέʔγϣϯ͔ΒϚΠΫϩαʔϏεΛநग़͢Δ


    • ΞϓϦέʔγϣϯͷLogicΛಠཱͤ͞Δ


    • ΞϓϦέʔγϣϯͷWidgetΛಠཱͤ͞Δ


    • ίʔυϕʔεΛಠཱͨ͠୯ҐͰѻ͏

    View full-size slide

  32. FlutterͱFlutter Package&Plugin

    View full-size slide

  33. Flutterͷίʔυ෼ྨ
    • Pure Dart


    • freezed, riverpod


    • Flutter Widget


    • gap, in
    fi
    nite_scroll_pagenation


    • Method Channel



    fi
    rebase_auth, shared_preferences

    View full-size slide

  34. FlutterΞϓϦͷ෼ׂํ๏
    • Flutter Application



    fl
    utter create —template app


    • Dart(Flutter) Package



    fl
    utter create —template package


    • Method Channel (Plugin)



    fl
    utter create —template plugin

    View full-size slide

  35. FlutterΞϓϦͷ෼ׂํ๏
    • ΞϓϦέʔγϣϯͱͯ͠ߏ੒͍ͨ͠


    • Flutter Application


    • ϩδοΫɺදࣔͰ෼ׂ͍ͨ͠


    • Dart(Flutter) Package


    • ϓϥοτϑΥʔϜ͝ͱͷ࣮૷Λ͍ͨ͠


    • Method Channel (Plugin)

    View full-size slide

  36. Package&PluginͱGit Repository

    View full-size slide

  37. FlutterͷPluginͷ؅ཧ
    • pub.dev


    • Privateͳ؀ڥͰར༻Ͱ͖Δpub.dev͸ͳ͍


    • GitHub Packages͸DartʹະରԠ(2021.11ݱࡏ)


    • PrivateͳPluginΛ഑෍͢Δ؀ڥ͕ඞཁ

    View full-size slide

  38. FlutterͷPluginͷ؅ཧ
    • Flutter͸Git RepositoryΛ׆༻Մೳ


    • pubspec.yamlʹgitͱͯ͠௥Ճ


    • Branch΍TagΛࢦఆ͢Δ͜ͱ΋Մೳ


    • https://dart.dev/tools/pub/dependencies

    View full-size slide

  39. Git RepositoryͷϝϦοτ
    • BranchΛ෼͚Δ͜ͱͰɺෳ਺ػೳΛฒߦͯ͠։ൃͰ͖Δ


    • Git TagΛར༻ͨ͠ɺػೳͷόʔδϣχϯά͕Ͱ͖Δ


    • Git Repository΁ͷΞΫηεݖݶΛస༻Ͱ͖Δ

    View full-size slide

  40. Git RepositoryͷσϝϦοτ
    • Pluginͷґଘؔ܎ղܾʹ੍໿͕͋Δ


    • ʮΑΓ৽͍͠ʯόʔδϣϯͷਪҠ͕ಈ࡞͠ͳ͍


    • Git Repository΁ͷΞΫηεʹ޻෉͕ඞཁʹͳΔ͜ͱ͕͋Δ


    • GitHub ActionsͰར༻͢ΔࡍʹSSH Keyͷઃఆ͕ඞཁͳͲ

    View full-size slide

  41. ࣮ݱͰ͖Δͷʁ

    View full-size slide

  42. ࣮૷αϯϓϧʹΑΔߟ࡯
    ϚΠΫϩαʔϏε։ൃΛͲͷΑ͏ʹಋೖ͢Δ͔

    View full-size slide

  43. ࣮૷αϯϓϧ
    • 4ͭͷPackageͰߏ੒͞ΕΔApplication


    • খن໛ͳΞϓϦͷͨΊɺ෼ׂ͠ͳ͍ํ͕։ൃ଎౓͸଎͍


    • ։ൃ͕ਐΜͩ࣌ɺ֦ு͠΍͍͔͢Ͳ͏͔ͷࢀߟʹ


    • https://github.com/koji-1009/kaigi_project_2021

    View full-size slide

  44. ࣮૷αϯϓϧ
    • Application


    • kaigi_project_2021


    • Package


    • kaigi_plugin_a_2021 => Theme


    • kaigi_plugin_b_2021 => HomePage


    • kaigi_plugin_c_2021 => ScreenName


    • kaigi_plugin_d_2021 => ScreenCounter

    View full-size slide

  45. ࣮૷αϯϓϧ(࣮ߦ࣌)
    QSPKFDU@
    QMVHJO@C
    QMVHJO@D QMVHJO@E
    QMVHJO@B

    View full-size slide

  46. ࣮૷αϯϓϧ(࣮ߦ࣌)
    QSPKFDU@
    )PNF1BHF
    4DSFFO/BNF 4DSFFO$PVOUFS
    5IFNF

    View full-size slide

  47. ࣮૷αϯϓϧ(։ൃ࣌)
    )PNF1BHF
    4DSFFO/BNF 4DSFFO$PVOUFS
    5IFNF

    View full-size slide

  48. ࣮૷αϯϓϧͷҙਤ
    • PackageͱApplicationͷؔ܎ੑΛදݱ


    • ApplicationͱPackageͷ྆ํ͕ɺPackageʹґଘ


    • Package͝ͱʹӨڹΛ༩͑Δൣғ͕ҟͳΔ


    • exampleΞϓϦέʔγϣϯʹΑΔPackageͷಈ࡞νΣοΫ

    View full-size slide

  49. ։ൃͷਐΊํ

    View full-size slide

  50. ߏ੒
    • kaigi_project_2021


    • apk΍ipaʹ౷߹


    • ΞϓϦέʔγϣϯݻ༗ͷ࣮૷ͳͲ


    • ΞϓϦΞΠίϯͷઃఆ


    • URLεΩʔϚͷઃఆ

    View full-size slide

  51. ߏ੒
    • Theme(plugin_a)


    • ΞϓϦͷςʔϚWidget


    • LightThemeͱDarkThemeΛ഑෍


    • ଞͷશͯͷUI Package͕ґଘ

    View full-size slide

  52. ߏ੒
    • HomePage(plugin_b)


    • plugin_cͱplugin_dΛ؅ཧ


    • pathͱrouteͷ౷߹

    View full-size slide

  53. ߏ੒
    • Screen(plugin_c, plugin_d)


    • Theme͸plugin_aΛ൓ө


    • ΞϓϦ಺ͷಠཱͨ͠Widget

    View full-size slide

  54. ϦϦʔεͷ࢓ํ
    QSPKFDU@
    QMVHJO@C
    QMVHJO@D QMVHJO@E
    QMVHJO@B
    1.0.0
    1.0.0
    1.0.0 1.0.0
    1.0.0

    View full-size slide

  55. ϦϦʔεͷ࢓ํ
    QMVHJO@C
    QMVHJO@D QMVHJO@E
    QMVHJO@B
    feature/dark_theme
    1.0.0
    1.0.0 1.0.0

    View full-size slide

  56. ϦϦʔεͷ࢓ํ
    QSPKFDU@
    QMVHJO@C
    QMVHJO@D QMVHJO@E
    QMVHJO@B
    1.1.0
    1.0.0
    1.0.0 1.0.0
    1.1.0

    View full-size slide

  57. ϦϦʔεͷ࢓ํ
    QSPKFDU@
    QMVHJO@C
    QMVHJO@D QMVHJO@E
    QMVHJO@B
    1.1.0
    1.0.1
    1.0.1 1.0.0
    1.1.1

    View full-size slide

  58. ϦϦʔεͷॊೈੑ
    • ApplicationͰऔΓࠐ·ͳ͚Ε͹ɺࢢ৔ʹϦϦʔε͞Εͳ͍


    • pubspec.yamlʹࢦఆ͞ΕΔTag΍BranchͰίϯτϩʔϧ


    • ϦϙδτϦͷ࠷৽ΛݟΔɺΑ͏ͳࢦఆ΋Մೳ


    • mainΛ͋͑ͯࢦఆ͠ɺৗʹ࠷৽Λऔಘ͢ΔͳͲ

    View full-size slide

  59. ෼ׂʹ͍ͭͯͷߟ࡯

    View full-size slide

  60. ෼ׂ͢Δ΂͖αΠζ
    • ApplicationΛ෼ׂʹ͸ࡍݶ͕ͳ͍


    • ʮ1 class=1 Packageʯ·Ͱ͍͘ͱ΍Γ͗͢ײ


    • ͨͩ͠Themeͷ৔߹͸ద੾ͳҹ৅


    • ߋ৽ස౓͕ߴ͍΋ͷΛ෼ׂ͠ɺ௿͍΋ͷΛ·ͱΊΔ޻෉ͳͲ

    View full-size slide

  61. ෼ׂ͢Δ΂͖αΠζ
    • ͜ΕҎ্෼ׂෆՄೳ


    • Theme Widget


    • Constants

    View full-size slide

  62. ෼ׂ͢Δ΂͖αΠζ
    • ϏδωεϩδοΫ


    • ෳ਺ͷWidgetͰ࢖͍ճ͢৔߹


    • ࢖͍·Θ͞ͳ͍ͷͰ͋Ε͹ɺWidgetͷதʹด͓ͯ͘͡


    • PDS͕Ͱ͖͍ͯΕ͹ɺ੾Γ཭͠͸༰қ

    View full-size slide

  63. ෼ׂ͢Δ΂͖αΠζ
    • Route


    • Package͝ͱʹRouteʹରԠ͢ΔPathΛఏڙʁ


    • ϓϥοτϑΥʔϜ͝ͱʹҟͳΔRouteΛ࣮ݱʁ


    • Navigator 2ͷϥούʔϥΠϒϥϦʹ΋ґଘ

    View full-size slide

  64. ෼ׂ͢Δ΂͖αΠζ
    • έʔεόΠέʔε͕ͩɺ෦෼తʹ෼ׂΛࢼ͢͜ͱ͸Ͱ͖Δ


    • Add-to-AppͱFlutterΞϓϦͰWidgetΛڞ௨ʹ͢ΔͳͲ


    • Add-to-AppͰ௥Ճ͢ΔWidgetΛ෼ׂ͓ͯ͘͠ͱྑ͍


    • ݕূ൛ΞϓϦέʔγϣϯΛAndroidͰ༻ҙ͠΍͍͢

    View full-size slide

  65. ຊηογϣϯͷఏҊ
    • FlutterͷϚΠΫϩαʔϏε։ൃΛఏҊ


    • ΞϓϦέʔγϣϯΛPackage&Pluginͷू߹ମͱΈͳ͢


    • UIͱϩδοΫΛFlutter Package&Pluginʹ෼ׂ


    • PrivateͳGit RepositoryΛར༻

    View full-size slide