Slide 1

Slide 1 text

2023.12.09 Flutter×Jetpack Compose ૬ޓӡ༻ YUMEMI Inc. Flutter Engineer - Onoue Ryotaro @YumNumm (΋͙΋͙) GDG DevFest Tokyo 2023 LT 1 gdg-devfest-tokyo - 2023೥12݄9೔

Slide 2

Slide 2 text

0. whoami - 2023೥4݄͔Β גࣜձࣾΏΊΈͰFlutterΤϯ δχΞͱͯ͠ۈ຿ - 2023೥11݄ͷFlutterKaigi 2023Ͱ͸ɺྛ͞Μ ͱొஃ 2 gdg-devfest-tokyo - 2023೥12݄9೔

Slide 3

Slide 3 text

0. whoami - ஍਒ؔ࿈ͷFlutter੡ΞϓϦέʔγϣϯΛݸਓ ։ൃ͍ͯ͠·͢ - AppStoreʹͯެ։ࡁΈ/PlayετΞ৹ࠪ଴ͪ - HPɿhttps://eqmonitor.app - ΦʔϓϯιʔεͰ͢ - https://github.com/YumNumm/EQMonitor 3 gdg-devfest-tokyo - 2023೥12݄9೔

Slide 4

Slide 4 text

1. Today’s topic Flutter × Jetpack Compose 4 gdg-devfest-tokyo - 2023೥12݄9೔

Slide 5

Slide 5 text

Android Platform Views 1. FlutterͰAndroidͷࢿ࢈Λར༻͢Δख๏ - ݱঢ়ͷFlutterͰ͸ඳը͕ࠔ೉ͳػೳΛ࣮૷͢Δͷʹར༻ - Ex. WebView, ஍ਤ, ө૾࠶ੜ - 3ͭͷΞϓϩʔν - Virtual Display (VD) - Hybrid Composition (HC) - Texture Hybrid Composition (TLHC) https://github.com/ fl utter/ fl utter/wiki/Android-Platform-Views 5 gdg-devfest-tokyo - 2023೥12݄9೔

Slide 6

Slide 6 text

Virtual Display OR Hybrid Composition OR Texture Layer Hybrid Composition 1. FlutterͰAndroidͷࢿ࢈Λར༻͢Δख๏ - Ծ૝σΟεϓϨΠ (Virtual Display - VD) - Android SDK 20+ - ωΠςΟϒཁૉΛVirtual Display΁ϨϯμϦϯά -> όοϑΝ͔Βग़ྗΛऔಘ -> Flutterͷ ΢ΟδΣοτπϦʔ্ʹςΫενϟͱͯ͠ѻ͏ -> Android্ͰςΫενϟͱͯ͠શମΛ ग़ྗ - 👍 - ύϑΥʔϚϯε͕ྑ͍ - 👎 - ΞΫηγϏϦςΟͷܽଛɾΩʔϘʔυपΓͷ੍໿ https://github.com/ fl utter/ fl utter/wiki/Virtual-Display 6 gdg-devfest-tokyo - 2023೥12݄9೔

Slide 7

Slide 7 text

Virtual Display OR Hybrid Composition OR Texture Layer Hybrid Composition 1. FlutterͰAndroidͷࢿ࢈Λར༻͢Δख๏ - Hybrid Composition (HC) - Android SDK 19+ - Flutter 1.20+ - ΢ΟδΣοτπϦʔΛ2෼ׂ (PlatformViewͷ্ɾԼ)ͯ͠ඳը ˠ ϓϥοτϑΥʔϜଆͰ߹ ੒ - 👍 - ωΠςΟϒͷը໘͕ͦͷ··ඳը͞ΕΔͷͰɺΞΫηγϏϦςΟɾΩʔϘʔυपΓͷ໰୊ ͸΄ͱΜͲղܾ (VDͷ՝୊͸ղܾ) - 👎 - ύϑΥʔϚϯε͕ѱ͍ - Android 10ະຬͰ͸ߋʹύϑΥʔϚϯε͕ѱ͍ https://github.com/ fl utter/ fl utter/wiki/Hybrid-Composition#Android 7 gdg-devfest-tokyo - 2023೥12݄9೔

Slide 8

Slide 8 text

Virtual Display OR Hybrid Composition OR Texture Layer Hybrid Composition 1-1. FlutterͰAndroidͷࢿ࢈Λར༻͢Δख๏ - Hybrid Composition (HC) - API 19+ - Flutter 1.20+ - ΢ΟδΣοτπϦʔΛ2෼ׂ (PlatformViewͷ্ɾԼ)ͯ͠ඳը ˠ ϓϥοτϑΥʔϜଆͰ߹ ੒ - 👍 - ωΠςΟϒͷը໘͕ͦͷ··ඳը͞ΕΔͷͰɺΞΫηγϏϦςΟɾΩʔϘʔυपΓͷ໰୊ ͸΄ͱΜͲղܾ (VDͷ՝୊͸ղܾ) - 👎 - ύϑΥʔϚϯε͕ѱ͍ - Android 10ະຬͰ͸ߋʹύϑΥʔϚϯε͕ѱ͍ - Voice PocochaͷΤϑΣΫτදࣔύϑΥʔϚϯε (Android 8) - VD: avg. 13.5 ms/frame - HC: avg. 43.0 ms/frame 3ഒఔ౓ͷࠩ! ը૾ɾ಺༰IUUQTFOHJOFFSJOHEFOBDPNCMPHWPJDFQPDPDIBPOFZFBS fl VUUFSΑΓҾ༻ 8 gdg-devfest-tokyo - 2023೥12݄9೔

Slide 9

Slide 9 text

Virtual Display OR Hybrid Composition OR Texture Layer Hybrid Composition 1. FlutterͰAndroidͷࢿ࢈Λར༻͢Δख๏ - Texture Layer Hybrid Composition (TLHC) - Android SDK 23+ - Flutter 3.0+ - VDͱHCͷஔ͖׵͑໨తͷ΋ͷ -> ੍ݶ͕͋ͬͨͷͰ 3ͭΊͷબ୒ࢶʹ - TLHCΛڧ੍͢ΔAPI΋͋Δ͕ɺجຊతʹTLHC->ࣗಈͰHC΁ϑΥʔϧόοΫ͢ΔAPI͕ੜ ͑ͯΔ - 👍 - VD, HCͷ͍͍ͱ͜औΓ - 👎 - Android SDK 23+ - ը໘ߋ৽࣌ʹඞͣΞοϓσʔτ͞ΕΔ͜ͱ͕อূ͞Ε͍ͯͳ͍ (ௐࠪத) https://github.com/ fl utter/ fl utter/wiki/Texture-Layer-Hybrid-Composition 9 gdg-devfest-tokyo - 2023೥12݄9೔

Slide 10

Slide 10 text

Android Platform Views 1-1. FlutterͰAndroidͷࢿ࢈Λར༻͢Δख๏ - ݱঢ়ͷFlutterͰ͸ඳը͕ࠔ೉ͳػೳΛ࣮૷͢Δͷʹར༻ - Ex. WebView, ஍ਤ, ө૾࠶ੜ - 3ͭͷΞϓϩʔν - Virtual Display (VD) - Hybrid Composition (HC) - Texture Hybrid Composition (TLHC) https://github.com/ fl utter/ fl utter/wiki/Android-Platform-Views - Hybrid Composition (HC) - Texture Hybrid Composition (TLHC) 10 gdg-devfest-tokyo - 2023೥12݄9೔

Slide 11

Slide 11 text

Jetpack ComposeΛࢼ͢ 1. Androidͷࢿ࢈...? - Android View (XML Layout) - XMLͰUIΛهड़ ɾ ྑ͘΋ѱ͘΋ϨΨγʔͳٕज़ ɾ ໋ྩత - Jetpack Compose - KotlinͰUIͱϩδοΫΛهड़ ɾ એݴతUI https://github.com/ fl utter/ fl utter/wiki/Texture-Layer-Hybrid-Composition 11 gdg-devfest-tokyo - 2023೥12݄9೔

Slide 12

Slide 12 text

Jetpack ComposeΛࢼ͢ 1. Androidͷࢿ࢈...? - Android View (XML Layout) - XMLͰUIΛهड़ ɾ ྑ͘΋ѱ͘΋ϨΨγʔͳٕज़ ɾ ໋ྩత - Jetpack Compose - KotlinͰUIͱϩδοΫΛهड़ ɾ એݴతUI https://github.com/ fl utter/ fl utter/wiki/Texture-Layer-Hybrid-Composition - FlutterͷPlatformViewͰ Android View Λ࢖͏ ˡ ࢁ΄Ͳग़ͯ͘Δ - FlutterͷPlatformViewͰ Jetpack ComposeΛ࢖͏ ˡ ͋·Γग़ͯ͜ͳ͍ (Android͋·Γৄ͘͠ͳ͍͚Ͳ) ΍ͬͯΈΔ͔͠! 12 gdg-devfest-tokyo - 2023೥12݄9೔

Slide 13

Slide 13 text

2. ·ͣ͸૊ΜͰΈΔ Flutter × Jetpack Compose 13 gdg-devfest-tokyo - 2023೥12݄9೔

Slide 14

Slide 14 text

2. Կ࡞Δͷ? Flutterͱ͍͑͹... 14 gdg-devfest-tokyo - 2023೥12݄9೔

Slide 15

Slide 15 text

2. Կ࡞Δͷ? Flutterͱ͍͑͹... - flutter create ͨ࣌͠ʹͰ͖ΔΧ΢ϯλʔΞϓϦ 15 gdg-devfest-tokyo - 2023೥12݄9೔

Slide 16

Slide 16 text

2. Կ࡞Δͷ? Flutterͱ͍͑͹... - flutter create ͨ࣌͠ʹͰ͖ΔΧ΢ϯλʔΞϓϦ - Χ΢ϯλʔදࣔ෦෼ΛωΠςΟϒͱ࿈ಈ - ্൒෼: Jetpack ComposeͰදࣔ - Լ൒෼: FlutterͰදࣔ 16 gdg-devfest-tokyo - 2023೥12݄9೔

Slide 17

Slide 17 text

Կ࡞Δͷ? Flutterͱ͍͑͹... - flutter create ͨ࣌͠ʹͰ͖ΔΧ΢ϯλʔΞϓϦ - Χ΢ϯλʔදࣔ෦෼ΛωΠςΟϒ - FloatingActionButton, AppBar͸Flutter - FABλοϓ࣌ʹωΠςΟϒଆ΁ λοϓͨ͜͠ͱΛ௨஌ - ωΠςΟϒͰอ͍࣋ͯ͠ΔΧ΢ϯλʔΛΠϯΫϦϝϯτ͠දࣔ https://docs. fl utter.dev/platform-integration/android/platform-views 17 gdg-devfest-tokyo - 2023೥12݄9೔

Slide 18

Slide 18 text

2. ࣮૷! PlatformView - viewΛࣝผ͢ΔͨΊͷจࣈྻ ΛviewType΁ηοτ - PlatformViewsService.initSurface AndroidView APIΛ࢖͏ - TLHC ͳ͍͠͸ HC Flutter side 18 gdg-devfest-tokyo - 2023೥12݄9೔

Slide 19

Slide 19 text

2. ࣮૷! Jetpack ComposeΛ৮Δ४උ Android side https://developer.android.com/jetpack/compose/setup?hl=ja#setup-compose 19 gdg-devfest-tokyo - 2023೥12݄9೔

Slide 20

Slide 20 text

2. ࣮૷! Jetpack ComposeΛ৮Δ४උ Android side https://developer.android.com/jetpack/compose/setup?hl=ja#setup-compose - android/build.gradle, android/app/build.gradle ΁ґଘͷ௥Ճ 20 gdg-devfest-tokyo - 2023೥12݄9೔

Slide 21

Slide 21 text

2. ࣮૷! FlutterͱAndroidଆͷௐ੔ Android side MainActivity಺ͰɺMethodChannelΛΠϯελϯεԽ PlatformViewFactoryΛొ࿥ 21 gdg-devfest-tokyo - 2023೥12݄9೔

Slide 22

Slide 22 text

2. ࣮૷! FlutterͱAndroidଆͷௐ੔ Android side ViewFactoryͷcreateؔ਺ΛΦʔόʔϥΠυͯ͠ MyComposeView: PlatformViewΛฦ͢ 22 gdg-devfest-tokyo - 2023೥12݄9೔

Slide 23

Slide 23 text

2. ࣮૷! FlutterͱAndroidଆͷௐ੔ Android side MyComposeViewͰ͸ ComposeViewΛׂΓ౰ ͯ -> ComposeViewʹCounterAppΛηοτ 23 gdg-devfest-tokyo - 2023೥12݄9೔

Slide 24

Slide 24 text

2. ࣮૷! Jetpack ComposeͰը໘࡞੒ Android side Composableؔ਺Λ༻ҙͯ͋͛͠Δ ScaffoldͰViewΛߏங͢Δ Column{ Text(), Text() }ͰTextΛॎʹฒ΂Δ 24 gdg-devfest-tokyo - 2023೥12݄9೔

Slide 25

Slide 25 text

2. ࣮૷! Jetpack ComposeΛ৮Δ४උ Android side Composableؔ਺Λ༻ҙͯ͋͛͠Δ ScaffoldͰViewΛߏங͢Δ Column{ Text(), Text() }ͰTextΛॎʹฒ΂Δ ॳճίϯϙδγϣϯͰ MethodChannelͷhandlerొ࿥ “Increment”͕ୟ͔Εͨ࣌ʹɺΧ΢ϯλʔΠϯΫϦϝϯτ 25 gdg-devfest-tokyo - 2023೥12݄9೔

Slide 26

Slide 26 text

2. ࣮૷! Jetpack ComposeΛ৮Δ४උ Android side Composableؔ਺Λ༻ҙͯ͋͛͠Δ ScaffoldͰViewΛߏங͢Δ Column{ Text(), Text() }ͰTextΛॎʹฒ΂Δ Jetpack ComposeଆͷFAB͕ԡ͞Εͨ࣌ʹ͸ɺMethodChannelͰFlutterଆ ΁௨஌ 26 gdg-devfest-tokyo - 2023೥12݄9೔

Slide 27

Slide 27 text

2. ࣮૷! Jetpack ComposeΛ৮Δ४උ Android side 27 gdg-devfest-tokyo - 2023೥12݄9೔

Slide 28

Slide 28 text

3. ·ͱΊ Flutter × Jetpack Compose 28 gdg-devfest-tokyo - 2023೥12݄9೔

Slide 29

Slide 29 text

·ͱΊ Flutter × Jetpack Compose - Flutter͚ͩͰશͯͷ՝୊ΛղܾͰ͖ΔΘ͚Ͱ͸ͳ͍ - GLSLͰFragment ShaderʹΞΫηεͨ͠Γ Impeller Scene(experimental 3D renderer) ͕͋Δ͕ ΍͸Γ·ͩͰ͖ͳ͍͜ͱ͸ࢁ΄Ͳ - ωΠςΟϒͷࢿ࢈Λ͋Γ͕ͨ͘ར༻͍͖ͤͯͨͩ͞·͠ΐ͏ - Flutter΋Jetpack Compose΋ ͲͪΒ΋એݴతUI - FlutterΤϯδχΞʹͱͬͯ ਌͠Έ΍͍͢👍 - -> ൺֱత͔ΜͨΜʹωΠςΟϒ࣮૷Ͱ͖Δ - ϓϥάΠϯ͕ແ͍αʔϏεɾෳ਺ͷࢿ࢈Λෳ߹తʹར༻͢Δ৔߹ʹ࢖͑Δ - Jetpack Compose΋ରԠ͍ͯ͠ͳ͍/BetaͳϥΠϒϥϦ΋͋ΔͷͰ஫ҙ 29 gdg-devfest-tokyo - 2023೥12݄9೔

Slide 30

Slide 30 text

- https://github.com/YumNumm/flutter_compose_view ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠! Follow me on X: @YumNumm 30 gdg-devfest-tokyo - 2023೥12݄9೔