Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

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

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

Ryotaro Onoue

December 09, 2023
Tweet

More Decks by Ryotaro Onoue

Other Decks in Programming

Transcript

  1. 2023.12.09 Flutter×Jetpack Compose ૬ޓӡ༻ YUMEMI Inc. Flutter Engineer - Onoue

    Ryotaro @YumNumm (΋͙΋͙)  GDG DevFest Tokyo 2023 LT
  2. 0. whoami  - ஍਒ؔ࿈ͷFlutter੡ΞϓϦέʔγϣϯΛ ݸਓ։ൃ͍ͯ͠·͢ - AppStoreʹͯެ։ࡁΈ/PlayετΞ৹ࠪ଴ ͪ -

    HPɿhttps: / / eqmonitor.app - ΦʔϓϯιʔεͰ͢ - https: / / github.com/YumNumm/ EQMonitor
  3. 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
  4. 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
  5. 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
  6. 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ΑΓҾ༻
  7. 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
  8. 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)
  9. 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
  10. 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͋·Γৄ͘͠ͳ͍͚Ͳ) ΍ͬͯΈΔ͔͠!
  11. 2. Կ࡞Δͷ? Flutterͱ͍͑͹ . .. - flutter create ͨ࣌͠ʹͰ͖ΔΧ΢ϯλʔΞϓϦ -

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

    - FloatingActionButton, AppBar͸Flutter - FABλοϓ࣌ʹωΠςΟϒଆ΁ λοϓͨ͜͠ͱΛ௨஌ - ωΠςΟϒͰอ͍࣋ͯ͠ΔΧ΢ϯλʔΛΠϯΫϦϝϯτ͠දࣔ  https: // docs.flutter.dev/platform-integration/android/platform-views
  13. 2. ࣮૷! Jetpack ComposeΛ৮Δ४උ  Android side Composableؔ਺Λ༻ҙͯ͋͛͠Δ ScaffoldͰViewΛߏங͢Δ Column{

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

    Text(), Text() }ͰTextΛॎʹฒ ΂Δ Jetpack ComposeଆͷFAB͕ԡ͞Εͨ࣌ʹ͸ɺMethodChannelͰ Flutterଆ΁௨஌
  15. ·ͱΊ Flutter × Jetpack Compose - Flutter͚ͩͰશͯͷ՝୊ΛղܾͰ͖ΔΘ͚Ͱ͸ͳ͍ - GLSLͰFragment ShaderʹΞΫηεͨ͠Γ

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