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
2. 0. whoami  - 2023೥4݄͔Β גࣜձࣾΏΊΈͰFlutter ΤϯδχΞͱͯ͠ۈ຿ - 2023೥11݄ͷFlutterKaigi 2023Ͱ͸ɺ ྛ͞Μͱొஃ
3. 0. whoami  - ஍਒ؔ࿈ͷFlutter੡ΞϓϦέʔγϣϯΛ ݸਓ։ൃ͍ͯ͠·͢ - AppStoreʹͯެ։ࡁΈ/PlayετΞ৹ࠪ଴ ͪ - HPɿhttps: / / eqmonitor.app - ΦʔϓϯιʔεͰ͢ - https: / / github.com/YumNumm/ EQMonitor
4. 1. Today’s topic Flutter × Jetpack Compose
5. Android Platform Views   1. FlutterͰAndroidͷࢿ࢈Λར༻͢Δख๏ - ݱঢ়ͷFlutterͰ͸ඳը͕ࠔ೉ͳػೳΛ࣮૷͢Δͷʹར༻ - Ex. WebView, ஍ਤ, ө૾࠶ੜ - 3ͭͷΞϓϩʔν - Virtual Display (VD) - Hybrid Composition (HC) - Texture Hybrid Composition (TLHC) https: // github.com/flutter/flutter/wiki/Android-Platform-Views
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/flutter/flutter/wiki/Virtual-Display
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/flutter/flutter/wiki/Hybrid-Composition#Android
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
   ΑΓҾ༻
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/flutter/flutter/wiki/Texture-Layer-Hybrid-Composition
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/flutter/flutter/wiki/Android-Platform-Views - Hybrid Composition (HC) - Texture Hybrid Composition (TLHC)
11. Jetpack ComposeΛࢼ͢  1. Androidͷࢿ࢈ . . . ? - Android View (XML Layout) - XMLͰUIΛهड़ ɾ ྑ͘΋ѱ͘΋ϨΨγʔͳٕज़ ɾ ໋ྩత - Jetpack Compose - KotlinͰUIͱϩδοΫΛهड़ ɾ એݴతUI https: // github.com/flutter/flutter/wiki/Texture-Layer-Hybrid-Composition
12. Jetpack ComposeΛࢼ͢  1. Androidͷࢿ࢈ . . . ? - Android View (XML Layout) - XMLͰUIΛهड़ ɾ ྑ͘΋ѱ͘΋ϨΨγʔͳٕज़ ɾ ໋ྩత - Jetpack Compose - KotlinͰUIͱϩδοΫΛهड़ ɾ એݴతUI https: // github.com/flutter/flutter/wiki/Texture-Layer-Hybrid-Composition - FlutterͷPlatformViewͰ Android View Λ࢖͏ ← ࢁ΄Ͳग़ͯ͘Δ - FlutterͷPlatformViewͰ Jetpack ComposeΛ࢖͏ ← ͋·Γग़ͯ͜ͳ͍ (Android͋·Γৄ͘͠ͳ͍͚Ͳ) ΍ͬͯΈΔ͔͠!
13. 2. ·ͣ͸૊ΜͰΈΔ Flutter × Jetpack Compose
14. 2. Կ࡞Δͷ? Flutterͱ͍͑͹ . .. 
15. 2. Կ࡞Δͷ? Flutterͱ͍͑͹ . .. - flutter create ͨ࣌͠ʹͰ͖ΔΧ΢ϯλʔΞϓϦ 
16. 2. Կ࡞Δͷ? Flutterͱ͍͑͹ . .. - flutter create ͨ࣌͠ʹͰ͖ΔΧ΢ϯλʔΞϓϦ - Χ΢ϯλʔදࣔ෦෼ΛωΠςΟϒͱ࿈ಈ - ্൒෼: Jetpack ComposeͰදࣔ - Լ൒෼: FlutterͰදࣔ 
17. Կ࡞Δͷ? Flutterͱ͍͑͹ . .. - flutter create ͨ࣌͠ʹͰ͖ΔΧ΢ϯλʔΞϓϦ - Χ΢ϯλʔදࣔ෦෼ΛωΠςΟϒ - FloatingActionButton, AppBar͸Flutter - FABλοϓ࣌ʹωΠςΟϒଆ΁ λοϓͨ͜͠ͱΛ௨஌ - ωΠςΟϒͰอ͍࣋ͯ͠ΔΧ΢ϯλʔΛΠϯΫϦϝϯτ͠දࣔ  https: // docs.flutter.dev/platform-integration/android/platform-views
18. 2. ࣮૷! PlatformView - viewΛࣝผ͢ΔͨΊͷจࣈ ྻΛviewType΁ηοτ - PlatformViewsService.ini tSurfaceAndroidView API Λ࢖͏ - TLHC ͳ͍͠͸ HC  Flutter side
19. 2. ࣮૷! Jetpack ComposeΛ৮Δ४උ  Android side https: // developer.android.com/jetpack/compose/setup?hl=ja#setup-compose
20. 2. ࣮૷! Jetpack ComposeΛ৮Δ४උ  Android side https: // developer.android.com/jetpack/compose/setup?hl=ja#setup-compose - android/build.gradle, android/app/build.gradle ΁ґଘͷ ௥Ճ
21. 2. ࣮૷! FlutterͱAndroidଆͷௐ੔  Android side MainActivity಺ͰɺMethodChannelΛΠϯελϯεԽ PlatformViewFactoryΛొ࿥
22. 2. ࣮૷! FlutterͱAndroidଆͷௐ੔  Android side ViewFactoryͷcreateؔ਺ΛΦʔόʔϥΠυͯ͠ MyComposeView: PlatformViewΛฦ͢
23. 2. ࣮૷! FlutterͱAndroidଆͷௐ੔  Android side MyComposeViewͰ͸ ComposeViewΛׂΓ ౰ͯ - > ComposeViewʹCounterAppΛηοτ
24. 2. ࣮૷! Jetpack ComposeͰը໘࡞੒  Android side Composableؔ਺Λ༻ҙͯ͋͛͠Δ ScaffoldͰViewΛߏங͢Δ Column{ Text(), Text() }ͰTextΛॎʹฒ ΂Δ
25. 2. ࣮૷! Jetpack ComposeΛ৮Δ४උ  Android side Composableؔ਺Λ༻ҙͯ͋͛͠Δ ScaffoldͰViewΛߏங͢Δ Column{ Text(), Text() }ͰTextΛॎʹฒ ΂Δ ॳճίϯϙδγϣϯͰ MethodChannelͷhandlerొ࿥ “Increment”͕ୟ͔Εͨ࣌ʹɺΧ΢ϯλʔΠϯΫϦϝϯτ
26. 2. ࣮૷! Jetpack ComposeΛ৮Δ४උ  Android side Composableؔ਺Λ༻ҙͯ͋͛͠Δ ScaffoldͰViewΛߏங͢Δ Column{ Text(), Text() }ͰTextΛॎʹฒ ΂Δ Jetpack ComposeଆͷFAB͕ԡ͞Εͨ࣌ʹ͸ɺMethodChannelͰ Flutterଆ΁௨஌
27. 2. ࣮૷! Jetpack ComposeΛ৮Δ४උ  Android side
28. 3. ·ͱΊ Flutter × Jetpack Compose
29. ·ͱΊ Flutter × Jetpack Compose - Flutter͚ͩͰશͯͷ՝୊ΛղܾͰ͖ΔΘ͚Ͱ͸ͳ͍ - GLSLͰFragment ShaderʹΞΫηεͨ͠Γ Impeller Scene(experimental 3D renderer) ͕͋Δ͕ ΍͸Γ·ͩͰ͖ͳ͍͜ͱ͸ ࢁ΄Ͳ - ωΠςΟϒͷࢿ࢈Λ͋Γ͕ͨ͘ར༻͍͖ͤͯͨͩ͞·͠ΐ͏ - Flutter΋Jetpack Compose΋ ͲͪΒ΋એݴతUI - FlutterΤϯδχΞʹͱͬͯ ਌͠Έ΍͍͢👍 - - > ൺֱత͔ΜͨΜʹωΠςΟϒ࣮૷Ͱ͖Δ - ϓϥάΠϯ͕ແ͍αʔϏεɾෳ਺ͷࢿ࢈Λෳ߹తʹར༻͢Δ৔߹ʹ࢖͑Δ - Jetpack Compose΋ରԠ͍ͯ͠ͳ͍/BetaͳϥΠϒϥϦ΋͋ΔͷͰ஫ҙ 
30. - https: / / github.com/YumNumm/flutter_compose_view ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠!  Follow me on X: @YumNumm