Flutter?

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

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. ͓ΘΓ