2021年7月16日に行った、社内LT大会(2021 1Q振り返り)資料です。
Flutter?2021 1Q LTେձ@koji-1009, 2021-07-16
View Slide
͓ॻ͖• Flutterͷ֓ཁͱৄࡉ• Skia, Dart, WidgetTree• Material Design&Cupertino• ͜Ε͔ΒͷFlutter• null-safety, static meta programming• Web, Desktop, Embedded
Flutterͷ֓ཁͱৄࡉ
Flutterͷ֓ཁͱৄࡉ (ཁ͢Δʹશ෦)
Flutter ~֓ཁฤ~• 2015.04 Flutter First Announce• 2018.06 Flutter Release Preview 1• 2018.12 Flutter 1.0• 2021.03 Flutter 2.0
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
2015ͷ࠷ॳͷϦϦʔε https://medium.com/fluttersg/the-art-of-flutter-hello-world-fd6c30309b5c
2018ͷ1.0ϦϦʔε https://developers.googleblog.com/2018/12/flutter-10-googles-portable-ui-toolkit.html
2021ͷ2.0ϦϦʔε https://developers.googleblog.com/2018/12/flutter-10-googles-portable-ui-toolkit.html
Flutterͱʁ• Google͕ఏڙ͢ΔUIπʔϧΩοτ• Webͷٕज़͕ϕʔε(Dart, Skia, DevTool…)• Android, iOS, Web, Desktop(Win/Mac/Linux)͚ʹϏϧυՄೳ
https://flutter.devFlutter SDK is Google's UI toolkit for craftingbeautiful, natively compiled applications formobile, web, and desktop from a single codebase.11
ͬ͘͟Γଊ͑ΔFlutter• ϚϧνϓϥοτϑΥʔϜ• ϓϥοτϑΥʔϜ͝ͱʹݻ༗ͷίʔυΛॻ͔ͳ͍• ϩδοΫͷڞ௨ԽͰͳ͘UIͷڞ௨Խ• 60fpsΛอͭ͜ͱΛڧ͘ҙࣝ• ReactNativeͱ΄΅ಉཱͪ͡Ґஔ
͔͜͜Βৄࡉฤ
Flutterͷඳը• Skia• Φʔϓϯιʔεͷ2DάϥϑΟοΫεΤϯδϯ• Google ChromeFuchsiaɺAndroidͳͲͰ࠾༻• Google͕ओಋͯ͠։ൃ
Flutterͷඳը• Skiaͷ࠾༻ʹΑΔϝϦοτ• C++Ͱॻ͔Ε͓ͯΓɺϚϧνϓϥοτϑΥʔϜͰಈ࡞͢Δ• Skia͕ϓϥοτϑΥʔϜؒͷඳըࠩҟΛٵऩͯ͘͠ΕΔ• Skiaͷ࠾༻ʹΑΔσϝϦοτ• 3Dͷඳըʹऑ͍
Flutterͷ࣮ߦڥ(Dart)• ͱͱJavaScriptΛஔ͖͑ΔతͰɺGoogle͕։ൃ• TypeScriptʹෛ͚ͯ͠·ͬͨͷͰํస(ͦͯ͠Dart 2)• async/awaittraitɺStreamͳͲͷϞμϯͳݴޠػߏ• PubGrabͱ͍͏ઌਐతͳґଘղܾΞϧΰϦζϜ• SwiftPMgel-rbɺpoetryͰ࠾༻ʂ
Flutterͷ࣮ߦڥ(Dart VM)• GoogleͷV8։ൃऀ͕͍͍ͯΔͦΕͳΓҎ্ʹૣ͍VM• σόοάϞʔυ(JIT)ͱϦϦʔεϞʔυ(AOT)• σόοάϞʔυHotReloadΛར༻ͨ͠UIߏங༏ઌ• GCʹΑΔϝϞϦ֬อ• Πϯελϯε͕ෆཁʹͳΔͱɺ͙͢ʹϝϞϦΛղ์
FlutterͷWidgetTree• FlutterPure DartͱWidgetͱݺΕΔཁૉͰߏங͞ΕΔ• TreeߏͷWidget͕ΞϓϦΛߏ͢Δ• AppWidgetɺRouteWidgetɺTextFieldWidget• ը໘ߋ৽ΛWidgetͷഁغ&ੜͰ࣮ݱͰ͖Δ
ViewͱWidgetTree
FlutterͱMaterial DesignͱCupertino
ͦͦMaterial Designͱ• Design Systemͷͻͱͭ• ࢴͷମݧΛϕʔεʹߏங• Z࣠ͷ1dpࢴ1ຕͷߴ͞(ް͞)• Z࣠ͷҟͳΔཁૉͷॏͳΓ߹ΘͤΛshadowͰදݱ• MobileʹݶఆͤͣɺWebDesktopରʹ
ͦͦMaterial Designͱ• UIίϯϙʔωϯτΛComponentsͱͯ͠ఆٛ• αΠζͳͲͷSpecsΛࡉ͔͘ఆٛ• ར༻γʔϯͳͲΛࡉ͔͘ݴޠԽ• Dark ThemeͳͲͷΧϥʔγεςϜఆٛ• ը໘ભҠλοϓͳͲͷಈ͖ఆٛ
FlutterͱMaterial Design• FlutterUIπʔϧΩοτ• Material DesignͷComponents΄΅Flutter͚ʹ࣮ࡁΈ• materialϥΠϒϥϦΛಋೖ͢Δ͚ͩͰMaterial Design• AndroidΑΓFlutterͷ࣮ͷํ͕ૣ͘ɺਖ਼͍͜͠ͱͷํ͕ଟ͍• Material DesignͷσβΠφʔ͕FlutterνʔϜʹ͍Δʁ
iOS/macOS͚ͷFlutter• iOS͚ͷΞϓϦΛ࡞ΔͨΊʹαϙʔτ͞Ε͍ͯΔ• SliderͷσβΠϯͳͲΛOSʹ߹Θͤͯม͑ΔΈ• CupertinoϥΠϒϥϦ• NavigationɺActionSheetͳͲͷ࣮• iOSඪ४ͷΑ͏ͳݟͨͷΞϓϦΛ࡞Δ͜ͱͰ͖Δ
Flutterʹ͓͚ΔUIߏங• Material DesignʹΔͱඇৗʹίετͰ։ൃ͕Մೳ• Material DesignͰߏங͞ΕͨσβΠϯͳΒ࠶ݱՄೳ•figmaSketchͷMaterial Design pluginΛར༻͢ΔͱζϨͳ͍• Βͳ͍ॴ͚ͩίετΛ͔͚ͯରԠ• ͨͩ͠iOSͬΆ͍σβΠϯ͚ͩɺ͋Δఔ࣮ݱՄೳ
͜Ε͔ΒͷFlutter
FlutterͱDart• FlutterDartͷόʔδϣϯʹ߹ΘͤͯػೳՃ͍ͯ͠Δ• Dart΄΅FlutterͷͨΊͷݴޠ• Node.jsͷΑ͏ͳར༻Ͱ͖ΔΑ͏ʹͳ͖ͬͯͨ• Docker Image͕ެ։͞ΕΔΑ͏ʹͳͬͨ
Dartͷ৽ػೳͱFlutter• null-safety• Flutter 2͔ΒDartͷnull-safetyʹରԠ• ඪ४Widgetશͯnullable͔Ͳ͏͔͕໌ه͞Εͨ• AOTͷίϯύΠϧ࣌ʹnullՄೳੑΛߟྀͨ͠ߴԽ͕͞Εͨ
Dartͷ৽ػೳͱFlutter• static meta programming• Data classͷΑ͏ͳimmutableͳσʔλߏΛѻ͏Έ• ݱ࣌ͰίʔυੜπʔϧΛ͏ඞཁ͕͋Δػೳ• ਂ͍ΦϒδΣΫτͷൺֱJSON͔ΒͷύʔεͳͲ ϩδοΫߏஙʹΑΓαϙʔτ͕ೖΔ͜ͱʹͳΔ
࣍ͷϓϥοτϑΥʔϜ• Desktopڥ(Beta)• Windows/macOS/Linux͚ͷϏϧυ• ϞόΠϧΞϓϦ͕σεΫτοϓͰಈ͘ͷͰͳ͘ɺ σεΫτοϓΛλʔήοτʹΞϓϦΛϏϧυͰ͖Δ• ΈࠐΈ(ൃදͷΈ)• Toyota͕ंࡌث͚ΞϓϦʹFlutterΛ࠾༻
࣍ͷϓϥοτϑΥʔϜ• Flutter Web• Flutter 2Ͱstable• DesktopͰCanvasKitɺMobileͰHTMLϨϯμϦϯά• એݴతͳRouter࣮ (ͨͩ͠ղ)
·ͱΊ
Flutter?• Material DesignΛ࣮ݱͰ͖ΔUIπʔϧΩοτ• Webٕज़Λϕʔεʹͨ͠ϚϧνϓϥοτϑΥʔϜ• Mobile(Android/iOS)• Web(Mobile/Desktop)• Desktop(Win/Mac/Linux)
Flutter?• Material DesignΛ࣮ݱͰ͖ΔUIπʔϧΩοτ• Webٕज़Λϕʔεʹͨ͠ϚϧνϓϥοτϑΥʔϜ• Mobile(Android/iOS)• Web(Mobile/Desktop)• Desktop(Win/Mac/Linux)• ͜Ε͔Βͷ৳ͼ͠ΖDartͷؤுΓ࣍ୈ
͓ΘΓ