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
410
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
350
Add-to-appの戦い方
d_r_1009
0
1.6k
開発チーム主導で iOSの新機能に対応する 3つのポイント
d_r_1009
0
620
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.7k
CircleCI + fastlaneで快適Androidアプリビルドの巻
d_r_1009
0
1.1k
Other Decks in Technology
See All in Technology
Adapty_東京AI祭ハッカソン2025ピッチスライド
shinoyamada
0
210
AI駆動開発を推進するためにサービス開発チームで 取り組んでいること
noayaoshiro
0
240
Access-what? why and how, A11Y for All - Nordic.js 2025
gdomiciano
1
120
ガバメントクラウド(AWS)へのデータ移行戦略の立て方【虎の巻】 / 20251011 Mitsutosi Matsuo
shift_evolve
PRO
2
170
PLaMoの事後学習を支える技術 / PFN LLMセミナー
pfn
PRO
9
4k
from Sakichi Toyoda to Agile
kawaguti
PRO
1
100
神回のメカニズムと再現方法/Mechanisms and Playbook for Kamikai scrumat2025
moriyuya
4
680
これがLambdaレス時代のChatOpsだ!実例で学ぶAmazon Q Developerカスタムアクション活用法
iwamot
PRO
4
170
カンファレンスに託児サポートがあるということ / Having Childcare Support at Conferences
nobu09
1
450
生成AIで「お客様の声」を ストーリーに変える 新潮流「Generative ETL」
ishikawa_satoru
1
360
綺麗なデータマートをつくろう_データ整備を前向きに考える会 / Let's create clean data mart
brainpadpr
3
340
いまさら聞けない ABテスト入門
skmr2348
1
220
Featured
See All Featured
A designer walks into a library…
pauljervisheath
209
24k
Become a Pro
speakerdeck
PRO
29
5.5k
Making the Leap to Tech Lead
cromwellryan
135
9.6k
How To Stay Up To Date on Web Technology
chriscoyier
791
250k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
9
970
Git: the NoSQL Database
bkeepers
PRO
431
66k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.5k
Principles of Awesome APIs and How to Build Them.
keavy
127
17k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
127
53k
Typedesign – Prime Four
hannesfritz
42
2.8k
GraphQLとの向き合い方2022年版
quramy
49
14k
Automating Front-end Workflow
addyosmani
1371
200k
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ͷؤுΓ࣍ୈ
͓ΘΓ