Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Flutter?
Search
Koji Wakamiya
August 05, 2021
Technology
0
390
Flutter?
2021年7月16日に行った、社内LT大会(2021 1Q振り返り)資料です。
Koji Wakamiya
August 05, 2021
Tweet
Share
More Decks by Koji Wakamiya
See All by Koji Wakamiya
人気サービスをFlutter Webでリプレースするとどうなるのか
d_r_1009
0
1k
モバイルアプリケーション 開発組織の“学び”
d_r_1009
0
330
Add-to-appの戦い方
d_r_1009
0
1.6k
開発チーム主導で iOSの新機能に対応する 3つのポイント
d_r_1009
0
590
FlutterKaigi2021
d_r_1009
0
1.6k
Room2.1 DatabaseView あるある
d_r_1009
0
660
AAC Paging & Kotlin化の紹介
d_r_1009
0
1.2k
JavaからKotlinに書き換えてハマる話
d_r_1009
0
7.6k
CircleCI + fastlaneで快適Androidアプリビルドの巻
d_r_1009
0
1k
Other Decks in Technology
See All in Technology
データ基盤からデータベースまで?広がるユースケースのDatabricksについて教えるよ!
akuwano
3
110
ネットワーク保護はどう変わるのか?re:Inforce 2025最新アップデート解説
tokushun
0
210
Delta airlines®️ USA Contact Numbers: Complete 2025 Support Guide
airtravelguide
0
340
Lazy application authentication with Tailscale
bluehatbrit
0
220
品質と速度の両立:生成AI時代の品質保証アプローチ
odasho
1
370
面倒な作業はAIにおまかせ。Flutter開発をスマートに効率化
ruideengineer
0
260
United airlines®️ USA Contact Numbers: Complete 2025 Support Guide
unitedflyhelp
0
320
【LT会登壇資料】TROCCO新コネクタ「スマレジ」を活用した直営店データの分析
kazari0425
1
100
CDKTFについてざっくり理解する!!~CloudFormationからCDKTFへ変換するツールも作ってみた~
masakiokuda
1
160
第4回Snowflake 金融ユーザー会 Snowflake summit recap
tamaoki
1
300
B2C&B2B&社内向けサービスを抱える開発組織におけるサービス価値を最大化するイニシアチブ管理
belongadmin
2
7.2k
freeeのアクセシビリティの現在地 / freee's Current Position on Accessibility
ymrl
2
210
Featured
See All Featured
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
970
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
The Invisible Side of Design
smashingmag
301
51k
Done Done
chrislema
184
16k
For a Future-Friendly Web
brad_frost
179
9.8k
Building an army of robots
kneath
306
45k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Testing 201, or: Great Expectations
jmmastey
43
7.6k
Transcript
Flutter? 2021 1Q LTେձ @koji-1009, 2021-07-16
͓ॻ͖ • 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/ fl uttersg/the-art-of- fl utter-hello-world-fd6c30309b5c
2018ͷ1.0ϦϦʔε https://developers.googleblog.com/2018/12/ fl utter-10-googles-portable-ui-toolkit.html
2021ͷ2.0ϦϦʔε https://developers.googleblog.com/2018/12/ fl utter-10-googles-portable-ui-toolkit.html
Flutterͱʁ • Google͕ఏڙ͢ΔUIπʔϧΩοτ • Webͷٕज़͕ϕʔε(Dart, Skia, DevTool…) • Android, iOS,
Web, Desktop(Win/Mac/Linux)͚ʹϏϧυՄೳ
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
ͬ͘͟Γଊ͑Δ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Ͱߏங͞ΕͨσβΠϯͳΒ࠶ݱՄೳ • fi gmaSketchͷ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ͷؤுΓ࣍ୈ
͓ΘΓ