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

Flutter?

 Flutter?

2021年7月16日に行った、社内LT大会(2021 1Q振り返り)資料です。

Koji Wakamiya

August 05, 2021
Tweet

More Decks by Koji Wakamiya

Other Decks in Technology

Transcript

  1. Flutter?
    2021 1Q LTେձ
    @koji-1009, 2021-07-16

    View full-size slide

  2. ͓඼ॻ͖
    • Flutterͷ֓ཁͱৄࡉ


    • Skia, Dart, WidgetTree


    • Material Design&Cupertino


    • ͜Ε͔ΒͷFlutter


    • null-safety, static meta programming


    • Web, Desktop, Embedded

    View full-size slide

  3. Flutterͷ֓ཁͱৄࡉ

    View full-size slide

  4. Flutterͷ֓ཁͱৄࡉ

    (ཁ͢Δʹશ෦)

    View full-size slide

  5. Flutter ~֓ཁฤ~
    • 2015.04 Flutter First Announce


    • 2018.06 Flutter Release Preview 1


    • 2018.12 Flutter 1.0


    • 2021.03 Flutter 2.0

    View full-size slide

  6. Flutter ~֓ཁฤ~
    • 2015.04 Flutter First Announce


    • 2018.06 Flutter Release Preview 1


    • 2018.12 Flutter 1.0


    • 2019.09 Porto Release


    • 2021.03 Flutter 2.0

    View full-size slide

  7. 2015೥ͷ࠷ॳͷϦϦʔε

    https://medium.com/
    fl
    uttersg/the-art-of-
    fl
    utter-hello-world-fd6c30309b5c

    View full-size slide

  8. 2018೥ͷ1.0ϦϦʔε

    https://developers.googleblog.com/2018/12/
    fl
    utter-10-googles-portable-ui-toolkit.html

    View full-size slide

  9. 2021೥ͷ2.0ϦϦʔε

    https://developers.googleblog.com/2018/12/
    fl
    utter-10-googles-portable-ui-toolkit.html

    View full-size slide

  10. Flutterͱ͸ʁ
    • Google͕ఏڙ͢ΔUIπʔϧΩοτ


    • Webͷٕज़͕ϕʔε(Dart, Skia, DevTool…)


    • Android, iOS, Web, Desktop(Win/Mac/Linux)޲͚ʹϏϧυՄೳ

    View full-size slide

  11. https://
    fl
    utter.dev
    Flutter SDK is Google's UI toolkit for crafting
    beautiful, natively compiled applications for
    mobile, web, and desktop from a single codebase.
    11

    View full-size slide

  12. ͬ͘͟Γଊ͑ΔFlutter
    • ϚϧνϓϥοτϑΥʔϜ


    • ϓϥοτϑΥʔϜ͝ͱʹݻ༗ͷίʔυΛॻ͔ͳ͍


    • ϩδοΫͷڞ௨ԽͰ͸ͳ͘UIͷڞ௨Խ


    • 60fpsΛอͭ͜ͱΛڧ͘ҙࣝ


    • ReactNativeͱ΄΅ಉཱͪ͡Ґஔ

    View full-size slide

  13. ͔͜͜Βৄࡉฤ

    View full-size slide

  14. Flutterͷඳը
    • Skia


    • Φʔϓϯιʔεͷ2DάϥϑΟοΫεΤϯδϯ


    • Google Chrome΍FuchsiaɺAndroidͳͲͰ࠾༻


    • Google͕ओಋͯ͠։ൃ

    View full-size slide

  15. Flutterͷඳը
    • Skiaͷ࠾༻ʹΑΔϝϦοτ


    • C++Ͱॻ͔Ε͓ͯΓɺϚϧνϓϥοτϑΥʔϜͰಈ࡞͢Δ


    • Skia͕ϓϥοτϑΥʔϜؒͷඳըࠩҟΛٵऩͯ͘͠ΕΔ


    • Skiaͷ࠾༻ʹΑΔσϝϦοτ


    • 3Dͷඳըʹ͸ऑ͍

    View full-size slide

  16. Flutterͷ࣮ߦ؀ڥ(Dart)
    • ΋ͱ΋ͱ͸JavaScriptΛஔ͖׵͑Δ໨తͰɺGoogle͕։ൃ


    • TypeScriptʹෛ͚ͯ͠·ͬͨͷͰํ޲స׵(ͦͯ͠Dart 2΁)


    • async/await΍traitɺStreamͳͲͷϞμϯͳݴޠػߏ


    • PubGrabͱ͍͏ઌਐతͳґଘղܾΞϧΰϦζϜ


    • SwiftPM΍gel-rbɺpoetryͰ΋࠾༻ʂ

    View full-size slide

  17. Flutterͷ࣮ߦ؀ڥ(Dart VM)
    • GoogleͷV8։ൃऀ͕཰͍͍ͯΔͦΕͳΓҎ্ʹૣ͍VM


    • σόοάϞʔυ(JIT)ͱϦϦʔεϞʔυ(AOT)


    • σόοάϞʔυ͸HotReloadΛར༻ͨ͠UIߏங༏ઌ


    • GCʹΑΔϝϞϦ֬อ


    • Πϯελϯε͕ෆཁʹͳΔͱɺ͙͢ʹϝϞϦΛղ์

    View full-size slide

  18. FlutterͷWidgetTree
    • Flutter͸Pure DartͱWidgetͱݺ͹ΕΔཁૉͰߏங͞ΕΔ


    • Treeߏ଄ͷWidget͕ΞϓϦΛߏ੒͢Δ


    • App΋WidgetɺRoute΋WidgetɺTextField΋Widget


    • ը໘ߋ৽ΛWidgetͷഁغ&ੜ੒Ͱ࣮ݱͰ͖Δ

    View full-size slide

  19. ViewͱWidgetTree

    View full-size slide

  20. FlutterͱMaterial Designͱ
    Cupertino

    View full-size slide

  21. ͦ΋ͦ΋Material Designͱ͸
    • Design Systemͷͻͱͭ


    • ࢴͷମݧΛϕʔεʹߏங


    • Z࣠ͷ1dp͸ࢴ1ຕ෼ͷߴ͞(ް͞)


    • Z࣠ͷҟͳΔཁૉͷॏͳΓ߹ΘͤΛshadowͰදݱ


    • MobileʹݶఆͤͣɺWeb΍Desktop΋ର৅ʹ

    View full-size slide

  22. ͦ΋ͦ΋Material Designͱ͸
    • UIίϯϙʔωϯτΛComponentsͱͯ͠ఆٛ


    • αΠζͳͲͷSpecsΛࡉ͔͘ఆٛ


    • ར༻γʔϯͳͲΛࡉ͔͘ݴޠԽ


    • Dark ThemeͳͲͷΧϥʔγεςϜ΋ఆٛ


    • ը໘ભҠ΍λοϓͳͲͷಈ͖΋ఆٛ

    View full-size slide

  23. FlutterͱMaterial Design
    • Flutter͸UIπʔϧΩοτ


    • Material DesignͷComponents͸΄΅Flutter޲͚ʹ࣮૷ࡁΈ


    • materialϥΠϒϥϦΛಋೖ͢Δ͚ͩͰMaterial Design


    • AndroidΑΓ΋Flutterͷ࣮૷ͷํ͕ૣ͘ɺਖ਼͍͜͠ͱͷํ͕ଟ͍


    • Material DesignͷσβΠφʔ͕FlutterνʔϜʹ͍Δʁ

    View full-size slide

  24. iOS/macOS޲͚ͷFlutter
    • iOS޲͚ͷΞϓϦΛ࡞ΔͨΊʹαϙʔτ͞Ε͍ͯΔ


    • SliderͷσβΠϯͳͲΛOSʹ߹Θͤͯม͑Δ࢓૊Έ


    • CupertinoϥΠϒϥϦ


    • NavigationɺActionSheetͳͲͷ࣮૷


    • iOSඪ४ͷΑ͏ͳݟͨ໨ͷΞϓϦΛ࡞Δ͜ͱ΋Ͱ͖Δ

    View full-size slide

  25. Flutterʹ͓͚ΔUIߏங
    • Material Designʹ৐Δͱඇৗʹ௿ίετͰ։ൃ͕Մೳ


    • Material DesignͰߏங͞ΕͨσβΠϯͳΒ࠶ݱՄೳ



    fi
    gma΍SketchͷMaterial Design pluginΛར༻͢ΔͱζϨͳ͍


    • ৐Βͳ͍৔ॴ͚ͩίετΛ͔͚ͯରԠ


    • ͨͩ͠iOSͬΆ͍σβΠϯ͚ͩ͸ɺ͋Δఔ౓࣮ݱՄೳ

    View full-size slide

  26. ͜Ε͔ΒͷFlutter

    View full-size slide

  27. FlutterͱDart
    • Flutter͸Dartͷόʔδϣϯʹ߹Θͤͯػೳ௥Ճ͍ͯ͠Δ


    • Dart͸΄΅FlutterͷͨΊͷݴޠ


    • Node.jsͷΑ͏ͳར༻΋Ͱ͖ΔΑ͏ʹͳ͖ͬͯͨ


    • Docker Image͕ެ։͞ΕΔΑ͏ʹͳͬͨ

    View full-size slide

  28. Dartͷ৽ػೳͱFlutter
    • null-safety


    • Flutter 2͔ΒDartͷnull-safetyʹରԠ


    • ඪ४Widget͸શͯnullable͔Ͳ͏͔͕໌ه͞Εͨ


    • AOTͷίϯύΠϧ࣌ʹnullՄೳੑΛߟྀͨ͠ߴ଎Խ͕͞Εͨ

    View full-size slide

  29. Dartͷ৽ػೳͱFlutter
    • static meta programming


    • Data classͷΑ͏ͳimmutableͳσʔλߏ଄Λѻ͏࢓૊Έ


    • ݱ࣌఺Ͱ͸ίʔυੜ੒πʔϧΛ࢖͏ඞཁ͕͋Δػೳ


    • ਂ͍ΦϒδΣΫτͷൺֱ΍JSON͔ΒͷύʔεͳͲ

    ϩδοΫߏஙʹΑΓαϙʔτ͕ೖΔ͜ͱʹͳΔ

    View full-size slide

  30. ࣍ͷϓϥοτϑΥʔϜ
    • Desktop؀ڥ(Beta)


    • Windows/macOS/Linux޲͚ͷϏϧυ


    • ϞόΠϧΞϓϦ͕σεΫτοϓͰಈ͘ͷͰ͸ͳ͘ɺ

    σεΫτοϓΛλʔήοτʹΞϓϦΛϏϧυͰ͖Δ


    • ૊ΈࠐΈ(ൃදͷΈ)


    • Toyota͕ंࡌث޲͚ΞϓϦʹFlutterΛ࠾༻

    View full-size slide

  31. ࣍ͷϓϥοτϑΥʔϜ
    • Flutter Web


    • Flutter 2Ͱstable


    • DesktopͰ͸CanvasKitɺMobileͰ͸HTMLϨϯμϦϯά


    • એݴతͳRouter΋࣮૷ (ͨͩ͠೉ղ)

    View full-size slide

  32. Flutter?
    • Material DesignΛ࣮ݱͰ͖ΔUIπʔϧΩοτ


    • Webٕज़Λϕʔεʹͨ͠ϚϧνϓϥοτϑΥʔϜ


    • Mobile(Android/iOS)


    • Web(Mobile/Desktop)


    • Desktop(Win/Mac/Linux)

    View full-size slide

  33. Flutter?
    • Material DesignΛ࣮ݱͰ͖ΔUIπʔϧΩοτ


    • Webٕज़Λϕʔεʹͨ͠ϚϧνϓϥοτϑΥʔϜ


    • Mobile(Android/iOS)


    • Web(Mobile/Desktop)


    • Desktop(Win/Mac/Linux)


    • ͜Ε͔Βͷ৳ͼ͠Ζ͸DartͷؤுΓ࣍ୈ

    View full-size slide