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

FlutterKaigi2021

 FlutterKaigi2021

494a2760dceccc31c4bcdb689041c614?s=128

Koji Wakamiya

November 30, 2021
Tweet

Transcript

  1. FlutterʹUIϚΠΫϩαʔϏε։ൃΛಋೖ͠ɺ 
 ѹ౗తͳDXΛ࣮ݱ͠Α͏ʂ Koji Wakamiya(@koji-1009) / FlutterKaigi 2021

  2. ࣗݾ঺հ • Koji Wakamiya • @koji-1009(GitHub) • Flutter/Android/iOS • Tech

    lead(mobile client/Studyplus, inc.)
  3. ࣗݾ঺հ • Flutterͷঢ়ଶ؅ཧͱViewͷߋ৽ • FlutterͰPluginΛۦ࢖ͯ͠ߴ଎ʹ։ൃ͢Δ • "σβΠϯγεςϜ"ͷա౓ͳҰൠԽͱͦͷରԠʹ͍ͭͯ • fl utter_auth_ui(pub.dev)

  4. Studyplus, inc. • ֶशه࿥؅ཧΞϓϦ Studyplus • ࢀߟॻαϒεΫΞϓϦ Porto

  5. Studyplus, inc. • Studyplus • Kotlin or Swift + Add-to-App(Dart)

    • Porto • Dart
  6. FlutterͰ࠷ߴͷDX

  7. ͳͥDX(Developer Experience)? • ΞϓϦέʔγϣϯ͕େ͖͘ͳͬͨ࣌ͷ։ൃମݧΛߟ͍͑ͨ • FlutterΛ࠾༻͢Δ͜ͱͷϝϦοτΛߋʹ੔ཧ͍ͨ͠

  8. FlutterͷDX • ҰൠʹޠΒΕ͍ͯΔ΋ͷ • એݴతUI • Hot Reload • ϚϧνϓϥοτϑΥʔϜ

  9. FlutterͷDX • ҰൠʹޠΒΕ͍ͯͳ͍΋ͷ • σϑΝΫτελϯμʔυͷগͳ͞ • ഁյతͳมߋͷଟ͞ • εέʔϧͰ͖Δ։ൃख๏

  10. FlutterͷDX • ҰൠʹޠΒΕ͍ͯͳ͍΋ͷ • σϑΝΫτελϯμʔυͷগͳ͞ • ഁյతͳมߋͷଟ͞ • εέʔϧͰ͖Δ։ൃख๏

  11. Agenda • લ൒ɿFlutterͷ։ൃΛߟ͑Δ • ϚΠΫϩαʔϏε • FlutterͱFlutter Package&Plugin • Package&PluginͱGit

    Repository
  12. Agenda • ޙ൒ɿ࣮૷αϯϓϧʹΑΔߟ࡯ • ࣮૷ྫ • ։ൃͷਐΊํ • ෼ׂʹ͍ͭͯͷߟ࡯

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

  14. ৺஍Α͍։ൃͷఆٛ • मਖ਼΍ػೳ։ൃ͕༰қ • ϦϦʔε͕༰қ • ΤϯδχΞͷࢀՃ͕༰қ

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

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

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

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

  19. ෳ਺ϓϥοτϑΥʔϜͷ՝୊ • ϦϦʔεαΠΫϧ • ετΞ৹ࠪͷ༗ແ΍௕͞ͳͲ • ϓϥοτϑΥʔϜݻ༗ͷ࣮૷ • iOSͷAppClips΍AndroidͷSlicesͳͲ

  20. ෳ਺ϓϥοτϑΥʔϜͷ՝୊ • ରԠϓϥοτϑΥʔϜ͕૿͑Δͨͼʹݕ౼͕ඞཁ • Flutterͷ࢓૊Έతʹղܾ͕೉͍͠ • ରԠϓϥοτϑΥʔϜ͝ͱʹ෼ׂͰ͖Δ࢓૊Έ͕ඞཁ

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

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

  23. ଟػೳΞϓϦέʔγϣϯͷͭΒ͞ • ը໘ભҠ͕ෳࡶʹͳΓɺ։ൃதͷը໘͕දࣔ͠ʹ͘͘ͳΔ • UIͷදࣔ৚݅Λ੔͑Δͷ͕೉͘͠ͳΔ • ڞ௨͢ΔWidgetͱͦ͏Ͱ͸ͳ͍Widgetͷ൑அ͕೉͘͠ͳΔ

  24. ҭͬͨΞϓϦέʔγϣϯͱ޲͖߹͏ • Presentation Domain Separation • ΞϓϦέʔγϣϯΛద੾ʹ෼ׂ͢Δ • ෼ׂͨ͠ίʔυΛ؅ཧ͠΍͍͢ঢ়ଶʹอͭ •

    νʔϜʹ߹Θͤͨ؀ڥΛ࡞Δ
  25. ϚΠΫϩαʔϏε

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

  27. ϚΠΫϩαʔϏεͷߟ࡯ • मਖ਼΍ػೳ։ൃ͕༰қ • ϦϦʔε͕༰қ • ΤϯδχΞͷࢀՃ͕༰қ

  28. मਖ਼΍ػೳ։ൃ͕༰қ • ґଘؔ܎͕੔ཧ͞ΕΔ • Өڹ͕ݶఆత͔Ͳ͏͔͕Θ͔Δ • αʔϏε୯ମͰ΋ಈ࡞νΣοΫ͕Մೳ

  29. ϦϦʔε͕༰қ • αʔϏε୯ମͰϦϦʔεͷੋඇΛ൑ఆͰ͖Δ • αʔϏε୯ମͰස౓Λ؅ཧͰ͖Δ • αʔϏεΛ౷߹͢Δଆͱ੾Γ཭ͤΔ • ։ൃϦϦʔεͱࢢ৔ϦϦʔε

  30. ΤϯδχΞͷࢀՃ͕༰қ • ࠷ॳ͔ΒFlutterͷશͯΛ֮͑ͳͯ͘ྑ͍ • ୲౰͢ΔػೳɺൣғΛߜΔ͜ͱ͕Ͱ͖Δ • ϑϨʔϜϫʔΫʹஈ֊తʹ׳ΕΔ͜ͱ͕Ͱ͖Δ • Pure DartͳLogic͔Β୲౰͢ΔͳͲ

  31. FlutterͰϚΠΫϩαʔϏε։ൃ͸Մೳ͔ʁ • ΞϓϦέʔγϣϯ͔ΒϚΠΫϩαʔϏεΛநग़͢Δ • ΞϓϦέʔγϣϯͷLogicΛಠཱͤ͞Δ • ΞϓϦέʔγϣϯͷWidgetΛಠཱͤ͞Δ • ίʔυϕʔεΛಠཱͨ͠୯ҐͰѻ͏

  32. FlutterͱFlutter Package&Plugin

  33. Flutterͷίʔυ෼ྨ • Pure Dart • freezed, riverpod • Flutter Widget

    • gap, in fi nite_scroll_pagenation • Method Channel • fi rebase_auth, shared_preferences
  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
  35. FlutterΞϓϦͷ෼ׂํ๏ • ΞϓϦέʔγϣϯͱͯ͠ߏ੒͍ͨ͠ • Flutter Application • ϩδοΫɺදࣔͰ෼ׂ͍ͨ͠ • Dart(Flutter)

    Package • ϓϥοτϑΥʔϜ͝ͱͷ࣮૷Λ͍ͨ͠ • Method Channel (Plugin)
  36. Package&PluginͱGit Repository

  37. FlutterͷPluginͷ؅ཧ • pub.dev • Privateͳ؀ڥͰར༻Ͱ͖Δpub.dev͸ͳ͍ • GitHub Packages͸DartʹະରԠ(2021.11ݱࡏ) • PrivateͳPluginΛ഑෍͢Δ؀ڥ͕ඞཁ

  38. FlutterͷPluginͷ؅ཧ • Flutter͸Git RepositoryΛ׆༻Մೳ • pubspec.yamlʹgitͱͯ͠௥Ճ • Branch΍TagΛࢦఆ͢Δ͜ͱ΋Մೳ • https://dart.dev/tools/pub/dependencies

  39. Git RepositoryͷϝϦοτ • BranchΛ෼͚Δ͜ͱͰɺෳ਺ػೳΛฒߦͯ͠։ൃͰ͖Δ • Git TagΛར༻ͨ͠ɺػೳͷόʔδϣχϯά͕Ͱ͖Δ • Git Repository΁ͷΞΫηεݖݶΛస༻Ͱ͖Δ

  40. Git RepositoryͷσϝϦοτ • Pluginͷґଘؔ܎ղܾʹ੍໿͕͋Δ • ʮΑΓ৽͍͠ʯόʔδϣϯͷਪҠ͕ಈ࡞͠ͳ͍ • Git Repository΁ͷΞΫηεʹ޻෉͕ඞཁʹͳΔ͜ͱ͕͋Δ •

    GitHub ActionsͰར༻͢ΔࡍʹSSH Keyͷઃఆ͕ඞཁͳͲ
  41. ࣮ݱͰ͖Δͷʁ

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

  43. ࣮૷ྫ

  44. ࣮૷αϯϓϧ • 4ͭͷPackageͰߏ੒͞ΕΔApplication • খن໛ͳΞϓϦͷͨΊɺ෼ׂ͠ͳ͍ํ͕։ൃ଎౓͸଎͍ • ։ൃ͕ਐΜͩ࣌ɺ֦ு͠΍͍͔͢Ͳ͏͔ͷࢀߟʹ • https://github.com/koji-1009/kaigi_project_2021

  45. ࣮૷αϯϓϧ • 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
  46. ࣮૷αϯϓϧ(࣮ߦ࣌) QSPKFDU@ QMVHJO@C QMVHJO@D QMVHJO@E QMVHJO@B

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

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

  49. ࣮૷αϯϓϧͷҙਤ • PackageͱApplicationͷؔ܎ੑΛදݱ • ApplicationͱPackageͷ྆ํ͕ɺPackageʹґଘ • Package͝ͱʹӨڹΛ༩͑Δൣғ͕ҟͳΔ • exampleΞϓϦέʔγϣϯʹΑΔPackageͷಈ࡞νΣοΫ

  50. ։ൃͷਐΊํ

  51. ߏ੒ • kaigi_project_2021 • apk΍ipaʹ౷߹ • ΞϓϦέʔγϣϯݻ༗ͷ࣮૷ͳͲ • ΞϓϦΞΠίϯͷઃఆ •

    URLεΩʔϚͷઃఆ
  52. ߏ੒ • Theme(plugin_a) • ΞϓϦͷςʔϚWidget • LightThemeͱDarkThemeΛ഑෍ • ଞͷશͯͷUI Package͕ґଘ

  53. ߏ੒ • HomePage(plugin_b) • plugin_cͱplugin_dΛ؅ཧ • pathͱrouteͷ౷߹

  54. ߏ੒ • Screen(plugin_c, plugin_d) • Theme͸plugin_aΛ൓ө • ΞϓϦ಺ͷಠཱͨ͠Widget

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

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

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

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

    1.1.1
  59. ϦϦʔεͷॊೈੑ • ApplicationͰऔΓࠐ·ͳ͚Ε͹ɺࢢ৔ʹϦϦʔε͞Εͳ͍ • pubspec.yamlʹࢦఆ͞ΕΔTag΍BranchͰίϯτϩʔϧ • ϦϙδτϦͷ࠷৽ΛݟΔɺΑ͏ͳࢦఆ΋Մೳ • mainΛ͋͑ͯࢦఆ͠ɺৗʹ࠷৽Λऔಘ͢ΔͳͲ

  60. ෼ׂʹ͍ͭͯͷߟ࡯

  61. ෼ׂ͢Δ΂͖αΠζ • ApplicationΛ෼ׂʹ͸ࡍݶ͕ͳ͍ • ʮ1 class=1 Packageʯ·Ͱ͍͘ͱ΍Γ͗͢ײ • ͨͩ͠Themeͷ৔߹͸ద੾ͳҹ৅ •

    ߋ৽ස౓͕ߴ͍΋ͷΛ෼ׂ͠ɺ௿͍΋ͷΛ·ͱΊΔ޻෉ͳͲ
  62. ෼ׂ͢Δ΂͖αΠζ • ͜ΕҎ্෼ׂෆՄೳ • Theme Widget • Constants

  63. ෼ׂ͢Δ΂͖αΠζ • ϏδωεϩδοΫ • ෳ਺ͷWidgetͰ࢖͍ճ͢৔߹ • ࢖͍·Θ͞ͳ͍ͷͰ͋Ε͹ɺWidgetͷதʹด͓ͯ͘͡ • PDS͕Ͱ͖͍ͯΕ͹ɺ੾Γ཭͠͸༰қ

  64. ෼ׂ͢Δ΂͖αΠζ • Route • Package͝ͱʹRouteʹରԠ͢ΔPathΛఏڙʁ • ϓϥοτϑΥʔϜ͝ͱʹҟͳΔRouteΛ࣮ݱʁ • Navigator 2ͷϥούʔϥΠϒϥϦʹ΋ґଘ

  65. ෼ׂ͢Δ΂͖αΠζ • έʔεόΠέʔε͕ͩɺ෦෼తʹ෼ׂΛࢼ͢͜ͱ͸Ͱ͖Δ • Add-to-AppͱFlutterΞϓϦͰWidgetΛڞ௨ʹ͢ΔͳͲ • Add-to-AppͰ௥Ճ͢ΔWidgetΛ෼ׂ͓ͯ͘͠ͱྑ͍ • ݕূ൛ΞϓϦέʔγϣϯΛAndroidͰ༻ҙ͠΍͍͢

  66. ·ͱΊ

  67. ຊηογϣϯͷఏҊ • FlutterͷϚΠΫϩαʔϏε։ൃΛఏҊ • ΞϓϦέʔγϣϯΛPackage&Pluginͷू߹ମͱΈͳ͢ • UIͱϩδοΫΛFlutter Package&Pluginʹ෼ׂ • PrivateͳGit

    RepositoryΛར༻
  68. Thank you!