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

Flutter?

 Flutter?

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

494a2760dceccc31c4bcdb689041c614?s=128

Koji Wakamiya

August 05, 2021
Tweet

Transcript

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

  2. ͓඼ॻ͖ • Flutterͷ֓ཁͱৄࡉ • Skia, Dart, WidgetTree • Material Design&Cupertino

    • ͜Ε͔ΒͷFlutter • null-safety, static meta programming • Web, Desktop, Embedded
  3. Flutterͷ֓ཁͱৄࡉ 


  4. Flutterͷ֓ཁͱৄࡉ 
 (ཁ͢Δʹશ෦)

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

    Release Preview 1 • 2018.12 Flutter 1.0 • 2021.03 Flutter 2.0
  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
  7. 2015೥ͷ࠷ॳͷϦϦʔε 
 https://medium.com/ fl uttersg/the-art-of- fl utter-hello-world-fd6c30309b5c

  8. 2018೥ͷ1.0ϦϦʔε 
 https://developers.googleblog.com/2018/12/ fl utter-10-googles-portable-ui-toolkit.html

  9. 2021೥ͷ2.0ϦϦʔε 
 https://developers.googleblog.com/2018/12/ fl utter-10-googles-portable-ui-toolkit.html

  10. Flutterͱ͸ʁ • Google͕ఏڙ͢ΔUIπʔϧΩοτ • Webͷٕज़͕ϕʔε(Dart, Skia, DevTool…) • Android, iOS,

    Web, Desktop(Win/Mac/Linux)޲͚ʹϏϧυՄೳ
  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
  12. ͬ͘͟Γଊ͑ΔFlutter • ϚϧνϓϥοτϑΥʔϜ • ϓϥοτϑΥʔϜ͝ͱʹݻ༗ͷίʔυΛॻ͔ͳ͍ • ϩδοΫͷڞ௨ԽͰ͸ͳ͘UIͷڞ௨Խ • 60fpsΛอͭ͜ͱΛڧ͘ҙࣝ •

    ReactNativeͱ΄΅ಉཱͪ͡Ґஔ
  13. ͔͜͜Βৄࡉฤ

  14. Flutterͷඳը • Skia • Φʔϓϯιʔεͷ2DάϥϑΟοΫεΤϯδϯ • Google Chrome΍FuchsiaɺAndroidͳͲͰ࠾༻ • Google͕ओಋͯ͠։ൃ

  15. Flutterͷඳը • Skiaͷ࠾༻ʹΑΔϝϦοτ • C++Ͱॻ͔Ε͓ͯΓɺϚϧνϓϥοτϑΥʔϜͰಈ࡞͢Δ • Skia͕ϓϥοτϑΥʔϜؒͷඳըࠩҟΛٵऩͯ͘͠ΕΔ • Skiaͷ࠾༻ʹΑΔσϝϦοτ •

    3Dͷඳըʹ͸ऑ͍
  16. Flutterͷ࣮ߦ؀ڥ(Dart) • ΋ͱ΋ͱ͸JavaScriptΛஔ͖׵͑Δ໨తͰɺGoogle͕։ൃ • TypeScriptʹෛ͚ͯ͠·ͬͨͷͰํ޲స׵(ͦͯ͠Dart 2΁) • async/await΍traitɺStreamͳͲͷϞμϯͳݴޠػߏ • PubGrabͱ͍͏ઌਐతͳґଘղܾΞϧΰϦζϜ

    • SwiftPM΍gel-rbɺpoetryͰ΋࠾༻ʂ
  17. Flutterͷ࣮ߦ؀ڥ(Dart VM) • GoogleͷV8։ൃऀ͕཰͍͍ͯΔͦΕͳΓҎ্ʹૣ͍VM • σόοάϞʔυ(JIT)ͱϦϦʔεϞʔυ(AOT) • σόοάϞʔυ͸HotReloadΛར༻ͨ͠UIߏங༏ઌ • GCʹΑΔϝϞϦ֬อ

    • Πϯελϯε͕ෆཁʹͳΔͱɺ͙͢ʹϝϞϦΛղ์
  18. FlutterͷWidgetTree • Flutter͸Pure DartͱWidgetͱݺ͹ΕΔཁૉͰߏங͞ΕΔ • Treeߏ଄ͷWidget͕ΞϓϦΛߏ੒͢Δ • App΋WidgetɺRoute΋WidgetɺTextField΋Widget • ը໘ߋ৽ΛWidgetͷഁغ&ੜ੒Ͱ࣮ݱͰ͖Δ

  19. ViewͱWidgetTree

  20. FlutterͱMaterial Designͱ Cupertino 


  21. ͦ΋ͦ΋Material Designͱ͸ • Design Systemͷͻͱͭ • ࢴͷମݧΛϕʔεʹߏங • Z࣠ͷ1dp͸ࢴ1ຕ෼ͷߴ͞(ް͞) •

    Z࣠ͷҟͳΔཁૉͷॏͳΓ߹ΘͤΛshadowͰදݱ • MobileʹݶఆͤͣɺWeb΍Desktop΋ର৅ʹ
  22. ͦ΋ͦ΋Material Designͱ͸ • UIίϯϙʔωϯτΛComponentsͱͯ͠ఆٛ • αΠζͳͲͷSpecsΛࡉ͔͘ఆٛ • ར༻γʔϯͳͲΛࡉ͔͘ݴޠԽ • Dark

    ThemeͳͲͷΧϥʔγεςϜ΋ఆٛ • ը໘ભҠ΍λοϓͳͲͷಈ͖΋ఆٛ
  23. FlutterͱMaterial Design • Flutter͸UIπʔϧΩοτ • Material DesignͷComponents͸΄΅Flutter޲͚ʹ࣮૷ࡁΈ • materialϥΠϒϥϦΛಋೖ͢Δ͚ͩͰMaterial Design

    • AndroidΑΓ΋Flutterͷ࣮૷ͷํ͕ૣ͘ɺਖ਼͍͜͠ͱͷํ͕ଟ͍ • Material DesignͷσβΠφʔ͕FlutterνʔϜʹ͍Δʁ
  24. iOS/macOS޲͚ͷFlutter • iOS޲͚ͷΞϓϦΛ࡞ΔͨΊʹαϙʔτ͞Ε͍ͯΔ • SliderͷσβΠϯͳͲΛOSʹ߹Θͤͯม͑Δ࢓૊Έ • CupertinoϥΠϒϥϦ • NavigationɺActionSheetͳͲͷ࣮૷ •

    iOSඪ४ͷΑ͏ͳݟͨ໨ͷΞϓϦΛ࡞Δ͜ͱ΋Ͱ͖Δ
  25. Flutterʹ͓͚ΔUIߏங • Material Designʹ৐Δͱඇৗʹ௿ίετͰ։ൃ͕Մೳ • Material DesignͰߏங͞ΕͨσβΠϯͳΒ࠶ݱՄೳ • fi gma΍SketchͷMaterial

    Design pluginΛར༻͢ΔͱζϨͳ͍ • ৐Βͳ͍৔ॴ͚ͩίετΛ͔͚ͯରԠ • ͨͩ͠iOSͬΆ͍σβΠϯ͚ͩ͸ɺ͋Δఔ౓࣮ݱՄೳ
  26. ͜Ε͔ΒͷFlutter

  27. FlutterͱDart • Flutter͸Dartͷόʔδϣϯʹ߹Θͤͯػೳ௥Ճ͍ͯ͠Δ • Dart͸΄΅FlutterͷͨΊͷݴޠ • Node.jsͷΑ͏ͳར༻΋Ͱ͖ΔΑ͏ʹͳ͖ͬͯͨ • Docker Image͕ެ։͞ΕΔΑ͏ʹͳͬͨ

  28. Dartͷ৽ػೳͱFlutter • null-safety • Flutter 2͔ΒDartͷnull-safetyʹରԠ • ඪ४Widget͸શͯnullable͔Ͳ͏͔͕໌ه͞Εͨ • AOTͷίϯύΠϧ࣌ʹnullՄೳੑΛߟྀͨ͠ߴ଎Խ͕͞Εͨ

  29. Dartͷ৽ػೳͱFlutter • static meta programming • Data classͷΑ͏ͳimmutableͳσʔλߏ଄Λѻ͏࢓૊Έ • ݱ࣌఺Ͱ͸ίʔυੜ੒πʔϧΛ࢖͏ඞཁ͕͋Δػೳ

    • ਂ͍ΦϒδΣΫτͷൺֱ΍JSON͔ΒͷύʔεͳͲ 
 ϩδοΫߏஙʹΑΓαϙʔτ͕ೖΔ͜ͱʹͳΔ
  30. ࣍ͷϓϥοτϑΥʔϜ • Desktop؀ڥ(Beta) • Windows/macOS/Linux޲͚ͷϏϧυ • ϞόΠϧΞϓϦ͕σεΫτοϓͰಈ͘ͷͰ͸ͳ͘ɺ 
 σεΫτοϓΛλʔήοτʹΞϓϦΛϏϧυͰ͖Δ •

    ૊ΈࠐΈ(ൃදͷΈ) • Toyota͕ंࡌث޲͚ΞϓϦʹFlutterΛ࠾༻
  31. ࣍ͷϓϥοτϑΥʔϜ • Flutter Web • Flutter 2Ͱstable • DesktopͰ͸CanvasKitɺMobileͰ͸HTMLϨϯμϦϯά •

    એݴతͳRouter΋࣮૷ (ͨͩ͠೉ղ)
  32. ·ͱΊ

  33. Flutter? • Material DesignΛ࣮ݱͰ͖ΔUIπʔϧΩοτ • Webٕज़Λϕʔεʹͨ͠ϚϧνϓϥοτϑΥʔϜ • Mobile(Android/iOS) • Web(Mobile/Desktop)

    • Desktop(Win/Mac/Linux)
  34. Flutter? • Material DesignΛ࣮ݱͰ͖ΔUIπʔϧΩοτ • Webٕज़Λϕʔεʹͨ͠ϚϧνϓϥοτϑΥʔϜ • Mobile(Android/iOS) • Web(Mobile/Desktop)

    • Desktop(Win/Mac/Linux) • ͜Ε͔Βͷ৳ͼ͠Ζ͸DartͷؤுΓ࣍ୈ
  35. ͓ΘΓ