FlutterKaigi2021 - Speaker Deck

FlutterKaigi2021

by Koji Wakamiya

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

ࣗݾ঺հ • Koji Wakamiya • @koji-1009(GitHub) • Flutter/Android/iOS • Tech lead(mobile client/Studyplus, inc.)

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

FlutterͰ࠷ߴͷDX

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

ҭͬͨΞϓϦέʔγϣϯͱ޲͖߹͏ • Presentation Domain Separation • ΞϓϦέʔγϣϯΛద੾ʹ෼ׂ͢Δ • ෼ׂͨ͠ίʔυΛ؅ཧ͠΍͍͢ঢ়ଶʹอͭ • νʔϜʹ߹Θͤͨ؀ڥΛ࡞Δ

Slide 25

Slide 25 text

ϚΠΫϩαʔϏε

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

FlutterͱFlutter Package&Plugin

Slide 33

Slide 33 text

Flutterͷίʔυ෼ྨ • Pure Dart • freezed, riverpod • Flutter Widget • gap, in fi nite_scroll_pagenation • Method Channel • fi rebase_auth, shared_preferences

Slide 34

Slide 34 text

FlutterΞϓϦͷ෼ׂํ๏ • Flutter Application • fl utter create —template app • Dart(Flutter) Package • fl utter create —template package • Method Channel (Plugin) • fl utter create —template plugin

Slide 35

Slide 35 text

FlutterΞϓϦͷ෼ׂํ๏ • ΞϓϦέʔγϣϯͱͯ͠ߏ੒͍ͨ͠ • Flutter Application • ϩδοΫɺදࣔͰ෼ׂ͍ͨ͠ • Dart(Flutter) Package • ϓϥοτϑΥʔϜ͝ͱͷ࣮૷Λ͍ͨ͠ • Method Channel (Plugin)

Slide 36

Slide 36 text

Package&PluginͱGit Repository

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

Git RepositoryͷσϝϦοτ • Pluginͷґଘؔ܎ղܾʹ੍໿͕͋Δ • ʮΑΓ৽͍͠ʯόʔδϣϯͷਪҠ͕ಈ࡞͠ͳ͍ • Git Repository΁ͷΞΫηεʹ޻෉͕ඞཁʹͳΔ͜ͱ͕͋Δ • GitHub ActionsͰར༻͢ΔࡍʹSSH Keyͷઃఆ͕ඞཁͳͲ

Slide 41

Slide 41 text

࣮ݱͰ͖Δͷʁ

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

࣮૷ྫ

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

࣮૷αϯϓϧ • 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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

։ൃͷਐΊํ

Slide 51

Slide 51 text

ߏ੒ • kaigi_project_2021 • apk΍ipaʹ౷߹ • ΞϓϦέʔγϣϯݻ༗ͷ࣮૷ͳͲ • ΞϓϦΞΠίϯͷઃఆ • URLεΩʔϚͷઃఆ

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

෼ׂʹ͍ͭͯͷߟ࡯

Slide 61

Slide 61 text

෼ׂ͢Δ΂͖αΠζ • ApplicationΛ෼ׂʹ͸ࡍݶ͕ͳ͍ • ʮ1 class=1 Packageʯ·Ͱ͍͘ͱ΍Γ͗͢ײ • ͨͩ͠Themeͷ৔߹͸ద੾ͳҹ৅ • ߋ৽ස౓͕ߴ͍΋ͷΛ෼ׂ͠ɺ௿͍΋ͷΛ·ͱΊΔ޻෉ͳͲ

Slide 62

Slide 62 text

෼ׂ͢Δ΂͖αΠζ • ͜ΕҎ্෼ׂෆՄೳ • Theme Widget • Constants

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

·ͱΊ

Slide 67

Slide 67 text

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

Slide 68

Slide 68 text

Thank you!