Flutter × Jetpack Composeの相互運用 @ GDG Tokyo 2023

Transcript

1. 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೔
2. 0. whoami  - 2023೥4݄͔Β גࣜձࣾΏΊΈͰFlutterΤϯ δχΞͱͯ͠ۈ຿ - 2023೥11݄ͷFlutterKaigi 2023Ͱ͸ɺྛ͞Μ ͱొஃ 2 gdg-devfest-tokyo - 2023೥12݄9೔
3. 0. whoami  - ஍਒ؔ࿈ͷFlutter੡ΞϓϦέʔγϣϯΛݸਓ ։ൃ͍ͯ͠·͢ - AppStoreʹͯެ։ࡁΈ/PlayετΞ৹ࠪ଴ͪ - HPɿhttps://eqmonitor.app - ΦʔϓϯιʔεͰ͢ - https://github.com/YumNumm/EQMonitor 3 gdg-devfest-tokyo - 2023೥12݄9೔
4. 1. Today’s topic Flutter × Jetpack Compose 4 gdg-devfest-tokyo - 2023೥12݄9೔
5. 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೔
6. 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೔
7. 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೔
8. 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೔
9. 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೔
10. 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೔
11. 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೔
12. 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೔
13. 2. ·ͣ͸૊ΜͰΈΔ Flutter × Jetpack Compose 13 gdg-devfest-tokyo - 2023೥12݄9೔
14. 2. Կ࡞Δͷ? Flutterͱ͍͑͹...  14 gdg-devfest-tokyo - 2023೥12݄9೔
15. 2. Կ࡞Δͷ? Flutterͱ͍͑͹... - flutter create ͨ࣌͠ʹͰ͖ΔΧ΢ϯλʔΞϓϦ  15 gdg-devfest-tokyo - 2023೥12݄9೔
16. 2. Կ࡞Δͷ? Flutterͱ͍͑͹... - flutter create ͨ࣌͠ʹͰ͖ΔΧ΢ϯλʔΞϓϦ - Χ΢ϯλʔදࣔ෦෼ΛωΠςΟϒͱ࿈ಈ - ্൒෼: Jetpack ComposeͰදࣔ - Լ൒෼: FlutterͰදࣔ  16 gdg-devfest-tokyo - 2023೥12݄9೔
17. Կ࡞Δͷ? Flutterͱ͍͑͹... - flutter create ͨ࣌͠ʹͰ͖ΔΧ΢ϯλʔΞϓϦ - Χ΢ϯλʔදࣔ෦෼ΛωΠςΟϒ - FloatingActionButton, AppBar͸Flutter - FABλοϓ࣌ʹωΠςΟϒଆ΁ λοϓͨ͜͠ͱΛ௨஌ - ωΠςΟϒͰอ͍࣋ͯ͠ΔΧ΢ϯλʔΛΠϯΫϦϝϯτ͠දࣔ  https://docs. fl utter.dev/platform-integration/android/platform-views 17 gdg-devfest-tokyo - 2023೥12݄9೔
18. 2. ࣮૷! PlatformView - viewΛࣝผ͢ΔͨΊͷจࣈྻ ΛviewType΁ηοτ - PlatformViewsService.initSurface AndroidView APIΛ࢖͏ - TLHC ͳ͍͠͸ HC  Flutter side 18 gdg-devfest-tokyo - 2023೥12݄9೔
19. 2. ࣮૷! Jetpack ComposeΛ৮Δ४උ  Android side https://developer.android.com/jetpack/compose/setup?hl=ja#setup-compose 19 gdg-devfest-tokyo - 2023೥12݄9೔
20. 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೔
21. 2. ࣮૷! FlutterͱAndroidଆͷௐ੔  Android side MainActivity಺ͰɺMethodChannelΛΠϯελϯεԽ PlatformViewFactoryΛొ࿥ 21 gdg-devfest-tokyo - 2023೥12݄9೔
22. 2. ࣮૷! FlutterͱAndroidଆͷௐ੔  Android side ViewFactoryͷcreateؔ਺ΛΦʔόʔϥΠυͯ͠ MyComposeView: PlatformViewΛฦ͢ 22 gdg-devfest-tokyo - 2023೥12݄9೔
23. 2. ࣮૷! FlutterͱAndroidଆͷௐ੔  Android side MyComposeViewͰ͸ ComposeViewΛׂΓ౰ ͯ -> ComposeViewʹCounterAppΛηοτ 23 gdg-devfest-tokyo - 2023೥12݄9೔
24. 2. ࣮૷! Jetpack ComposeͰը໘࡞੒  Android side Composableؔ਺Λ༻ҙͯ͋͛͠Δ ScaffoldͰViewΛߏங͢Δ Column{ Text(), Text() }ͰTextΛॎʹฒ΂Δ 24 gdg-devfest-tokyo - 2023೥12݄9೔
25. 2. ࣮૷! Jetpack ComposeΛ৮Δ४උ  Android side Composableؔ਺Λ༻ҙͯ͋͛͠Δ ScaffoldͰViewΛߏங͢Δ Column{ Text(), Text() }ͰTextΛॎʹฒ΂Δ ॳճίϯϙδγϣϯͰ MethodChannelͷhandlerొ࿥ “Increment”͕ୟ͔Εͨ࣌ʹɺΧ΢ϯλʔΠϯΫϦϝϯτ 25 gdg-devfest-tokyo - 2023೥12݄9೔
26. 2. ࣮૷! Jetpack ComposeΛ৮Δ४උ  Android side Composableؔ਺Λ༻ҙͯ͋͛͠Δ ScaffoldͰViewΛߏங͢Δ Column{ Text(), Text() }ͰTextΛॎʹฒ΂Δ Jetpack ComposeଆͷFAB͕ԡ͞Εͨ࣌ʹ͸ɺMethodChannelͰFlutterଆ ΁௨஌ 26 gdg-devfest-tokyo - 2023೥12݄9೔
27. 2. ࣮૷! Jetpack ComposeΛ৮Δ४උ  Android side 27 gdg-devfest-tokyo - 2023೥12݄9೔
28. 3. ·ͱΊ Flutter × Jetpack Compose 28 gdg-devfest-tokyo - 2023೥12݄9೔
29. ·ͱΊ 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೔
30. - https://github.com/YumNumm/flutter_compose_view ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠!  Follow me on X: @YumNumm 30 gdg-devfest-tokyo - 2023೥12݄9೔