Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

Flutterͷ֓ཁͱৄࡉ 


Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

Flutter ~֓ཁฤ~ • 2015.04 Flutter First Announce • 2018.06 Flutter Release Preview 1 • 2018.12 Flutter 1.0 • 2021.03 Flutter 2.0

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

2015೥ͷ࠷ॳͷϦϦʔε 
 https://medium.com/ fl uttersg/the-art-of- fl utter-hello-world-fd6c30309b5c

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

͔͜͜Βৄࡉฤ

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

ViewͱWidgetTree

Slide 20

Slide 20 text

FlutterͱMaterial Designͱ Cupertino 


Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

͜Ε͔ΒͷFlutter

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

࣍ͷϓϥοτϑΥʔϜ • Desktop؀ڥ(Beta) • Windows/macOS/Linux޲͚ͷϏϧυ • ϞόΠϧΞϓϦ͕σεΫτοϓͰಈ͘ͷͰ͸ͳ͘ɺ 
 σεΫτοϓΛλʔήοτʹΞϓϦΛϏϧυͰ͖Δ • ૊ΈࠐΈ(ൃදͷΈ) • Toyota͕ंࡌث޲͚ΞϓϦʹFlutterΛ࠾༻

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

·ͱΊ

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

͓ΘΓ