Flutter?

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