2023.12.09 Flutter×Jetpack Compose ૬ޓӡ༻ YUMEMI Inc. Flutter Engineer - Onoue Ryotaro @YumNumm (΋͙΋͙) GDG DevFest Tokyo 2023 LT

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

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

1. Today’s topic Flutter × Jetpack Compose

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

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

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

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ΑΓҾ༻

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

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)

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

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͋·Γৄ͘͠ͳ͍͚Ͳ) ΍ͬͯΈΔ͔͠!

2. ·ͣ͸૊ΜͰΈΔ Flutter × Jetpack Compose

2. Կ࡞Δͷ? Flutterͱ͍͑͹ . ..

2. Կ࡞Δͷ? Flutterͱ͍͑͹ . .. - flutter create ͨ࣌͠ʹͰ͖ΔΧ΢ϯλʔΞϓϦ

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

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

2. ࣮૷! PlatformView - viewΛࣝผ͢ΔͨΊͷจࣈ ྻΛviewType΁ηοτ - PlatformViewsService.ini tSurfaceAndroidView API Λ࢖͏ - TLHC ͳ͍͠͸ HC Flutter side

2. ࣮૷! Jetpack ComposeΛ৮Δ४උ Android side https: // developer.android.com/jetpack/compose/setup?hl=ja#setup-compose

2. ࣮૷! Jetpack ComposeΛ৮Δ४උ Android side https: // developer.android.com/jetpack/compose/setup?hl=ja#setup-compose - android/build.gradle, android/app/build.gradle ΁ґଘͷ ௥Ճ

2. ࣮૷! FlutterͱAndroidଆͷௐ੔ Android side MainActivity಺ͰɺMethodChannelΛΠϯελϯεԽ PlatformViewFactoryΛొ࿥

2. ࣮૷! FlutterͱAndroidଆͷௐ੔ Android side ViewFactoryͷcreateؔ਺ΛΦʔόʔϥΠυͯ͠ MyComposeView: PlatformViewΛฦ͢

2. ࣮૷! FlutterͱAndroidଆͷௐ੔ Android side MyComposeViewͰ͸ ComposeViewΛׂΓ ౰ͯ - > ComposeViewʹCounterAppΛηοτ

2. ࣮૷! Jetpack ComposeͰը໘࡞੒ Android side Composableؔ਺Λ༻ҙͯ͋͛͠Δ ScaffoldͰViewΛߏங͢Δ Column{ Text(), Text() }ͰTextΛॎʹฒ ΂Δ

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

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

2. ࣮૷! Jetpack ComposeΛ৮Δ४උ Android side

3. ·ͱΊ Flutter × Jetpack Compose

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

- https: / / github.com/YumNumm/flutter_compose_view ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠! Follow me on X: @YumNumm