Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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
    1 gdg-devfest-tokyo - 2023೥12݄9೔

    View full-size slide

  2. 0. whoami

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

    View full-size slide

  3. 0. whoami

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

    View full-size slide

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

    View full-size slide

  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೔

    View full-size slide

  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೔

    View full-size slide

  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೔

    View full-size slide

  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೔

    View full-size slide

  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೔

    View full-size slide

  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೔

    View full-size slide

  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೔

    View full-size slide

  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೔

    View full-size slide

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

    View full-size slide

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

    14 gdg-devfest-tokyo - 2023೥12݄9೔

    View full-size slide

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

    15 gdg-devfest-tokyo - 2023೥12݄9೔

    View full-size slide

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

    16 gdg-devfest-tokyo - 2023೥12݄9೔

    View full-size slide

  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೔

    View full-size slide

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

    Flutter side
    18 gdg-devfest-tokyo - 2023೥12݄9೔

    View full-size slide

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

    Android side
    https://developer.android.com/jetpack/compose/setup?hl=ja#setup-compose
    19 gdg-devfest-tokyo - 2023೥12݄9೔

    View full-size slide

  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೔

    View full-size slide

  21. 2. ࣮૷!
    FlutterͱAndroidଆͷௐ੔

    Android side
    MainActivity಺ͰɺMethodChannelΛΠϯελϯεԽ
    PlatformViewFactoryΛొ࿥
    21 gdg-devfest-tokyo - 2023೥12݄9೔

    View full-size slide

  22. 2. ࣮૷!
    FlutterͱAndroidଆͷௐ੔

    Android side
    ViewFactoryͷcreateؔ਺ΛΦʔόʔϥΠυͯ͠
    MyComposeView: PlatformViewΛฦ͢
    22 gdg-devfest-tokyo - 2023೥12݄9೔

    View full-size slide

  23. 2. ࣮૷!
    FlutterͱAndroidଆͷௐ੔

    Android side
    MyComposeViewͰ͸ ComposeViewΛׂΓ౰
    ͯ
    -> ComposeViewʹCounterAppΛηοτ
    23 gdg-devfest-tokyo - 2023೥12݄9೔

    View full-size slide

  24. 2. ࣮૷!
    Jetpack ComposeͰը໘࡞੒

    Android side
    Composableؔ਺Λ༻ҙͯ͋͛͠Δ
    ScaffoldͰViewΛߏங͢Δ
    Column{ Text(), Text() }ͰTextΛॎʹฒ΂Δ
    24 gdg-devfest-tokyo - 2023೥12݄9೔

    View full-size slide

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

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

    View full-size slide

  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೔

    View full-size slide

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

    Android side
    27 gdg-devfest-tokyo - 2023೥12݄9೔

    View full-size slide

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

    View full-size slide

  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೔

    View full-size slide

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

    Follow me on X: @YumNumm
    30 gdg-devfest-tokyo - 2023೥12݄9೔

    View full-size slide