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
400
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
340
Add-to-appの戦い方
d_r_1009
0
1.6k
開発チーム主導で iOSの新機能に対応する 3つのポイント
d_r_1009
0
600
FlutterKaigi2021
d_r_1009
0
1.7k
Room2.1 DatabaseView あるある
d_r_1009
0
680
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
夢の印税生活 / Life on Royalties
tmtms
0
290
帳票Vibe Coding
terurou
0
140
mruby(PicoRuby)で ファミコン音楽を奏でる
kishima
1
290
浸透しなさいRFC 5322&7208
hinono
0
120
現場が抱える様々な問題は “組織設計上” の問題によって生じていることがある / Team-oriented Organization Design 20250827
mtx2s
6
1.5k
あなたの知らない OneDrive
murachiakira
0
240
人を動かすことについて考える
ichimichi
2
330
退屈なことはDevinにやらせよう〜〜Devin APIを使ったVisual Regression Testの自動追加〜
kawamataryo
3
750
アジャイルテストで高品質のスプリントレビューを
takesection
0
120
Devinを使ったモバイルアプリ開発 / Mobile app development with Devin
yanzm
0
190
Understanding Go GC #coefl_go_jp
bengo4com
0
1.1k
Evolution on AI Agent and Beyond - AGI への道のりと、シンギュラリティの3つのシナリオ
masayamoriofficial
0
190
Featured
See All Featured
Six Lessons from altMBA
skipperchong
28
4k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Building Applications with DynamoDB
mza
96
6.6k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Become a Pro
speakerdeck
PRO
29
5.5k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.6k
Making Projects Easy
brettharned
117
6.3k
Building an army of robots
kneath
306
46k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
30
9.6k
We Have a Design System, Now What?
morganepeng
53
7.7k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
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ͷؤுΓ࣍ୈ
͓ΘΓ