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
Shirankedo NOCで見えてきたeduroam/OpenRoaming運用ノウハウと課題 - BAKUCHIKU BANBAN #2
marokiki
0
150
20250929_QaaS_vol20
mura_shin
0
130
Findy Team+のSOC2取得までの道のり
rvirus0817
0
380
生成AI_その前_に_マルチクラウド時代の信頼できるデータを支えるSnowflakeメタデータ活用術.pdf
cm_mikami
0
120
AWSにおけるTrend Vision Oneの効果について
shimak
0
130
職種別ミートアップで社内から盛り上げる アウトプット文化の醸成と関係強化/ #DevRelKaigi
nishiuma
2
140
Large Vision Language Modelを用いた 文書画像データ化作業自動化の検証、運用 / shibuya_AI
sansan_randd
0
110
後進育成のしくじり〜任せるスキルとリーダーシップの両立〜
matsu0228
7
2.8k
AWS Top Engineer、浮いてませんか? / As an AWS Top Engineer, Are You Out of Place?
yuj1osm
2
130
From Prompt to Product @ How to Web 2025, Bucharest, Romania
janwerner
0
120
データエンジニアがこの先生きのこるには...?
10xinc
0
450
ユニットテストに対する考え方の変遷 / Everyone should watch his live coding
mdstoy
0
130
Featured
See All Featured
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.9k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
36
2.5k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
RailsConf 2023
tenderlove
30
1.2k
Practical Orchestrator
shlominoach
190
11k
Facilitating Awesome Meetings
lara
56
6.6k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.1k
Raft: Consensus for Rubyists
vanstee
139
7.1k
Balancing Empowerment & Direction
lara
4
680
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.2k
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ͷؤுΓ࣍ୈ
͓ΘΓ