Flutter?

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

Transcript

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

   View Slide

2. ͓඼ॻ͖
   • Flutterͷ֓ཁͱৄࡉ
   
   
   • Skia, Dart, WidgetTree
   
   
   • Material Design&Cupertino
   
   
   • ͜Ε͔ΒͷFlutter
   
   
   • null-safety, static meta programming
   
   
   • Web, Desktop, Embedded
   

   View Slide

3. Flutterͷ֓ཁͱৄࡉ
   

   

   View Slide

4. Flutterͷ֓ཁͱৄࡉ
   

   (ཁ͢Δʹશ෦)
   

   View 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 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 Slide

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

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

   View Slide

8. 2018೥ͷ1.0ϦϦʔε
   

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

   View Slide

9. 2021೥ͷ2.0ϦϦʔε
   

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

   View Slide

10. Flutterͱ͸ʁ
    • Google͕ఏڙ͢ΔUIπʔϧΩοτ
    
    
    • Webͷٕज़͕ϕʔε(Dart, Skia, DevTool…)
    
    
    • Android, iOS, Web, Desktop(Win/Mac/Linux)޲͚ʹϏϧυՄೳ
    

    View 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 Slide

12. ͬ͘͟Γଊ͑ΔFlutter
    • ϚϧνϓϥοτϑΥʔϜ
    
    
    • ϓϥοτϑΥʔϜ͝ͱʹݻ༗ͷίʔυΛॻ͔ͳ͍
    
    
    • ϩδοΫͷڞ௨ԽͰ͸ͳ͘UIͷڞ௨Խ
    
    
    • 60fpsΛอͭ͜ͱΛڧ͘ҙࣝ
    
    
    • ReactNativeͱ΄΅ಉཱͪ͡Ґஔ
    

    View Slide

13. ͔͜͜Βৄࡉฤ
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

17. Flutterͷ࣮ߦ؀ڥ(Dart VM)
    • GoogleͷV8։ൃऀ͕཰͍͍ͯΔͦΕͳΓҎ্ʹૣ͍VM
    
    
    • σόοάϞʔυ(JIT)ͱϦϦʔεϞʔυ(AOT)
    
    
    • σόοάϞʔυ͸HotReloadΛར༻ͨ͠UIߏங༏ઌ
    
    
    • GCʹΑΔϝϞϦ֬อ
    
    
    • Πϯελϯε͕ෆཁʹͳΔͱɺ͙͢ʹϝϞϦΛղ์
    

    View Slide

18. FlutterͷWidgetTree
    • Flutter͸Pure DartͱWidgetͱݺ͹ΕΔཁૉͰߏங͞ΕΔ
    
    
    • Treeߏ଄ͷWidget͕ΞϓϦΛߏ੒͢Δ
    
    
    • App΋WidgetɺRoute΋WidgetɺTextField΋Widget
    
    
    • ը໘ߋ৽ΛWidgetͷഁغ&ੜ੒Ͱ࣮ݱͰ͖Δ
    

    View Slide

19. ViewͱWidgetTree
    

    View Slide

20. FlutterͱMaterial Designͱ
    Cupertino
    

    

    View Slide

21. ͦ΋ͦ΋Material Designͱ͸
    • Design Systemͷͻͱͭ
    
    
    • ࢴͷମݧΛϕʔεʹߏங
    
    
    • Z࣠ͷ1dp͸ࢴ1ຕ෼ͷߴ͞(ް͞)
    
    
    • Z࣠ͷҟͳΔཁૉͷॏͳΓ߹ΘͤΛshadowͰදݱ
    
    
    • MobileʹݶఆͤͣɺWeb΍Desktop΋ର৅ʹ
    

    View Slide

22. ͦ΋ͦ΋Material Designͱ͸
    • UIίϯϙʔωϯτΛComponentsͱͯ͠ఆٛ
    
    
    • αΠζͳͲͷSpecsΛࡉ͔͘ఆٛ
    
    
    • ར༻γʔϯͳͲΛࡉ͔͘ݴޠԽ
    
    
    • Dark ThemeͳͲͷΧϥʔγεςϜ΋ఆٛ
    
    
    • ը໘ભҠ΍λοϓͳͲͷಈ͖΋ఆٛ
    

    View Slide

23. FlutterͱMaterial Design
    • Flutter͸UIπʔϧΩοτ
    
    
    • Material DesignͷComponents͸΄΅Flutter޲͚ʹ࣮૷ࡁΈ
    
    
    • materialϥΠϒϥϦΛಋೖ͢Δ͚ͩͰMaterial Design
    
    
    • AndroidΑΓ΋Flutterͷ࣮૷ͷํ͕ૣ͘ɺਖ਼͍͜͠ͱͷํ͕ଟ͍
    
    
    • Material DesignͷσβΠφʔ͕FlutterνʔϜʹ͍Δʁ
    

    View Slide

24. iOS/macOS޲͚ͷFlutter
    • iOS޲͚ͷΞϓϦΛ࡞ΔͨΊʹαϙʔτ͞Ε͍ͯΔ
    
    
    • SliderͷσβΠϯͳͲΛOSʹ߹Θͤͯม͑Δ࢓૊Έ
    
    
    • CupertinoϥΠϒϥϦ
    
    
    • NavigationɺActionSheetͳͲͷ࣮૷
    
    
    • iOSඪ४ͷΑ͏ͳݟͨ໨ͷΞϓϦΛ࡞Δ͜ͱ΋Ͱ͖Δ
    

    View Slide

25. Flutterʹ͓͚ΔUIߏங
    • Material Designʹ৐Δͱඇৗʹ௿ίετͰ։ൃ͕Մೳ
    
    
    • Material DesignͰߏங͞ΕͨσβΠϯͳΒ࠶ݱՄೳ
    
    
    •
    fi
    gma΍SketchͷMaterial Design pluginΛར༻͢ΔͱζϨͳ͍
    
    
    • ৐Βͳ͍৔ॴ͚ͩίετΛ͔͚ͯରԠ
    
    
    • ͨͩ͠iOSͬΆ͍σβΠϯ͚ͩ͸ɺ͋Δఔ౓࣮ݱՄೳ
    

    View Slide

26. ͜Ε͔ΒͷFlutter
    

    View Slide

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

    View Slide

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

    View Slide

29. Dartͷ৽ػೳͱFlutter
    • static meta programming
    
    
    • Data classͷΑ͏ͳimmutableͳσʔλߏ଄Λѻ͏࢓૊Έ
    
    
    • ݱ࣌఺Ͱ͸ίʔυੜ੒πʔϧΛ࢖͏ඞཁ͕͋Δػೳ
    
    
    • ਂ͍ΦϒδΣΫτͷൺֱ΍JSON͔ΒͷύʔεͳͲ
    

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

    View Slide

30. ࣍ͷϓϥοτϑΥʔϜ
    • Desktop؀ڥ(Beta)
    
    
    • Windows/macOS/Linux޲͚ͷϏϧυ
    
    
    • ϞόΠϧΞϓϦ͕σεΫτοϓͰಈ͘ͷͰ͸ͳ͘ɺ
    

    σεΫτοϓΛλʔήοτʹΞϓϦΛϏϧυͰ͖Δ
    
    
    • ૊ΈࠐΈ(ൃදͷΈ)
    
    
    • Toyota͕ंࡌث޲͚ΞϓϦʹFlutterΛ࠾༻
    

    View Slide

31. ࣍ͷϓϥοτϑΥʔϜ
    • Flutter Web
    
    
    • Flutter 2Ͱstable
    
    
    • DesktopͰ͸CanvasKitɺMobileͰ͸HTMLϨϯμϦϯά
    
    
    • એݴతͳRouter΋࣮૷ (ͨͩ͠೉ղ)
    

    View Slide

32. ·ͱΊ
    

    View Slide

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

    View Slide

34. Flutter?
    • Material DesignΛ࣮ݱͰ͖ΔUIπʔϧΩοτ
    
    
    • Webٕज़Λϕʔεʹͨ͠ϚϧνϓϥοτϑΥʔϜ
    
    
    • Mobile(Android/iOS)
    
    
    • Web(Mobile/Desktop)
    
    
    • Desktop(Win/Mac/Linux)
    
    
    • ͜Ε͔Βͷ৳ͼ͠Ζ͸DartͷؤுΓ࣍ୈ
    

    View Slide

35. ͓ΘΓ
    

    View Slide