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
300
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
780
モバイルアプリケーション 開発組織の“学び”
d_r_1009
0
240
Add-to-appの戦い方
d_r_1009
0
1.2k
開発チーム主導で iOSの新機能に対応する 3つのポイント
d_r_1009
0
490
FlutterKaigi2021
d_r_1009
0
1.4k
Room2.1 DatabaseView あるある
d_r_1009
0
540
AAC Paging & Kotlin化の紹介
d_r_1009
0
1.1k
JavaからKotlinに書き換えてハマる話
d_r_1009
0
7.4k
CircleCI + fastlaneで快適Androidアプリビルドの巻
d_r_1009
0
850
Other Decks in Technology
See All in Technology
How to Think Like a Performance Engineer
csswizardry
4
590
Azure AI ことはじめ
tsubakimoto_s
0
130
20240724_cm_odyssey_hibiyatech
hiashisan
0
110
可視化プラットフォームGrafanaの基本と活用方法の全て
hamadakoji
0
230
ソフトウェアエンジニアリングの知見を活かして データ基盤をいい感じにする on Snowflake [MIERUNE BBQ #10]
mtpooh
2
150
[2024最新版]AWS Control Towerを使ったセキュアなマルチアカウント環境の作り方
hiashisan
0
270
コンテナ・K8s研修 - 後半 Kubernetes 基礎&ハンズオン【MIXI 24新卒技術研修】
mixi_engineers
PRO
1
120
Scaling Technical Excellence at 104: Evolution in AWS and Developer Empowerment
scotthsieh825
1
150
技術負債による事業の失敗はなぜ起こるのか / Why do business failures due to technical debt occur?
i35_267
0
190
データ分析を支える技術 生成AI再入門
ishikawa_satoru
0
380
スレットハンティングについて知っておきたいこと
hacket
0
130
LLMアプリケーションの評価の実践と課題 ~PharmaXにおける今後の展望~
pharma_x_tech
2
160
Featured
See All Featured
For a Future-Friendly Web
brad_frost
173
9.2k
Designing for Performance
lara
604
67k
Unsuck your backbone
ammeep
666
57k
RailsConf 2023
tenderlove
16
720
The World Runs on Bad Software
bkeepers
PRO
63
11k
Building Your Own Lightsaber
phodgson
101
5.9k
The Art of Programming - Codeland 2020
erikaheidi
48
13k
Learning to Love Humans: Emotional Interface Design
aarron
269
39k
Thoughts on Productivity
jonyablonski
64
4.1k
Build The Right Thing And Hit Your Dates
maggiecrowley
28
2.2k
Why You Should Never Use an ORM
jnunemaker
PRO
51
8.9k
Happy Clients
brianwarren
94
6.5k
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ͷؤுΓ࣍ୈ
͓ΘΓ