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
konifar
February 09, 2018
Programming
28
56k
コードで見るFlutterアプリの実装
DroidKaigi 2018 2日目 17:40 ~ 18:10
konifar
February 09, 2018
Tweet
Share
More Decks by konifar
See All by konifar
物語を動かす行動"量" #エンジニアニメ
konifar
14
5.4k
提案のレベルを上げる #QiitaConference
konifar
79
32k
目安箱の設置とワークさせるポイント
konifar
5
2.1k
サバイバルモード下でのエンジニアリングマネジメント
konifar
30
13k
Android開発以外のAndroid開発経験の活かしどころ
konifar
3
3k
初めてのiOS関連GitHub ActionsをMarketplaceに公開するまでの実録
konifar
3
400
オーナーシップを持つ領域を明確にする
konifar
16
5.7k
雑に思考を整理する技術と効能
konifar
78
44k
何のための個人目標設定?
konifar
34
19k
Other Decks in Programming
See All in Programming
エンジニアのための”最低限いい感じ”デザイン入門
shunshobon
0
130
画像コンペでのベースラインモデルの育て方
tattaka
3
1.9k
State of CSS 2025
benjaminkott
1
120
パスタの技術
yusukebe
1
400
AI時代のドメイン駆動設計-DDD実践におけるAI活用のあり方 / ddd-in-ai-era
minodriven
23
9k
「リーダーは意思決定する人」って本当?~ 学びを現場で活かす、リーダー4ヶ月目の試行錯誤 ~
marina1017
0
240
Google I/O recap web編 大分Web祭り2025
kponda
0
2.9k
🔨 小さなビルドシステムを作る
momeemt
1
480
Flutterと Vibe Coding で個人開発!
hyshu
1
260
Claude Codeで実装以外の開発フロー、どこまで自動化できるか?失敗と成功
ndadayo
2
1.3k
デザインシステムが必須の時代に
yosuke_furukawa
PRO
2
110
なぜ今、Terraformの本を書いたのか? - 著者陣に聞く!『Terraformではじめる実践IaC』登壇資料
fufuhu
4
650
Featured
See All Featured
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1.1k
How GitHub (no longer) Works
holman
315
140k
A Modern Web Designer's Workflow
chriscoyier
695
190k
Statistics for Hackers
jakevdp
799
220k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
How STYLIGHT went responsive
nonsquared
100
5.7k
How to Think Like a Performance Engineer
csswizardry
25
1.8k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
6k
Facilitating Awesome Meetings
lara
55
6.5k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
Transcript
ίʔυͰݟΔ FlutterΞϓϦͷ࣮ 'SJ %SPJE,BJHJ !LPOJGBS
None
Kyash Inc. • Sending and receiving money with kyash
is easy breeze • HP : https://kyash.co/ • Store : https://goo.gl/C594Ri Konifar’s QR
Main topic
DroidKaigi2018 Flutter App https://github.com/konifar/droidkaigi2018-flutter
ࠓ͢͜ͱ • Android/iOSΞϓϦ͕”࡞ΕΔ”ͷΘ͔ͬͨ • “ۀ”Ͱ࠾༻Ͱ͖Δͷʁ
ۀͰ࠾༻͢Δ࣌ʹߟ͑Δ͜ͱ • ੜଘՄೳੑ ެࣜͷαϙʔτ۩߹ɺίϛϡχςΟͷ׆ൃ͞ • ࣮ ϨΠΞτɺωοτϫʔΫ௨৴ɺΩϟογϡ • σόοάɺςετ σόοάπʔϧɺCIɺςετϑϨʔϜϫʔΫ
• ӡ༻ Push NotificationɺAnalyticsɺςετ৴ɺϦϦʔε
ۀͰ࠾༻͢Δ࣌ʹߟ͑Δ͜ͱ • ੜଘՄೳੑ ެࣜͷαϙʔτ۩߹ɺίϛϡχςΟͷ׆ൃ͞ • ࣮ ϨΠΞτɺωοτϫʔΫ௨৴ɺΩϟογϡ • σόοάɺςετ σόοάπʔϧɺCIɺςετϑϨʔϜϫʔΫ
• ӡ༻ Push NotificationɺAnalyticsɺςετ৴ɺϦϦʔε .BJOUPQJD
ۀͰ࠾༻͢Δ࣌ʹߟ͑Δ͜ͱ • ੜଘՄೳੑ ެࣜͷαϙʔτ۩߹ɺίϛϡχςΟͷ׆ൃ͞ • ࣮ ϨΠΞτɺωοτϫʔΫ௨৴ɺΩϟογϡ • σόοάɺςετ σόοάπʔϧɺCIɺςετϑϨʔϜϫʔΫ
• ӡ༻ Push NotificationɺAnalyticsɺςετ৴ɺϦϦʔε ͜ͷΜҰ෦͔͚Ͱ৮Ε·͢
Today’s goal • FlutterΒͳ͔ͬͨਓ => ʮԿ͔࡞ͬͯΈΑ͏͔ͳʯ • Flutterͬͯͨਓ => ʮ͔ͨ͠͠ΒۀͰ͑Δ͔ʁʯ
ࠓ͞ͳ͍͜ͱ • Dartͷݴޠ༷ͷ => JavaʹࣅͯΔɻlanguage-tourΑ͍ɻhttps://www.dartlang.org/guides/language/language-tour • FlutterͷηοτΞοϓͷ => ެࣜυΩϡϝϯτ͕खް͘આ໌ͯ͘͠Ε͍ͯΔɻ https://flutter.io/setup/
• Flutterͷ෦࣮ͷ => https://docs.google.com/presentation/d/1B3p0kP6NV_XMOimRV09Ms75ymIjU5gr6GGIX74Om_DE/edit#slide=id.g2388ebc691_2_112 • ઃܭͷ => ΄ͱΜͲReactͱಉٞ͡ɻ http://fluttersamples.com/ • طଘΞϓϦʹFlutterΛಋೖ͢Δ => Έͱͯ͠Ͱ͖Δɻ https://github.com/flutter/flutter/tree/master/examples/platform_view • iOSͷ => ϦϦʔεେมͱ͚͓͖͍ͩ͑ͯͨɻ
Agenda 1. Flutterͷ͓͞Β͍ (5) 1. Flutterͱ 2. ReactNativeͱͷҧ͍ 3. Androider͔ΒݟͨFlutter
2. Flutterͷίʔυ (15) 1. WidgetʢجຊɺWidgetπϦʔͷߏஙʣ 2. σʔλͷѻ͍ʢωοτϫʔΫ௨৴ɺΩϟογϡʣ 3. ҰҰ (5)
1. Flutterͷ͓͞Β͍
Flutterͱ • OSਪͷσβΠϯʹ߹Θͤͨ៉ྷͳΞϓϦΛ ૉૣ͘࡞ΔͨΊͷΫϩεϓϥοτϑΥʔϜ SDK • Googleɻ։ൃݴޠDart • ϨΠΞτxmlͰͳ͘DartͰWidget Tree
Λॻ͘
ReactNativeͱͷҧ͍ Flutter ReactNative Language Dart Javascript UI Support Support officially
Depends on 3rd party libraries Rendering Own engine JS bridge & Native https://flutter.io/faq/
๛ͳWidget • Material Design Guidelineʹग़ͯ͘Δύλʔϯ ͷUI΄΅શͯެࣜʹαϙʔτ͞Ε͍ͯΔ • WidgetΛΓɺ͍͜ͳ͢͜ͱ͕ߴʹ։ൃ ্͍ͯ͘͠Ͱͱͯॏཁ
ྫ : Scaffold
ྫ : Scaffold "QQ#BS
ྫ : Scaffold %SBXFS
ྫ : Scaffold
ྫ : Scaffold
https://flutter.io/widgets/ A lots of Widgets!!
Androider͔ΒݟͨFlutter • IntelliJͰ։ൃͰ͖Δ • DartJavaͱࣅͯΔɻඪ४ϥΠϒϥϦ͕๛ • Hot ReloadͰमਖ਼͕1ඵͰөɻөͰ͖ͳ ͍࣌ϑϧϦϩʔυ͕ඞཁͱڭ͑ͯ͘ΕΔɻ ϑϧϦϩʔυ10ඵ͘Β͍ʢ࠷ߴʣ
2. ίʔυͰݟΔFlutter
2-1. Widget
Widgetͷجຊ 1. ͯ͢WidgetͰ͋Δ 2. statelessͱstatefulͷೋछྨ͕͋Δ 3. Widget TreeΛΈཱͯΔ
ͯ͢WidgetͰ͋Δ • Icon = Widget • IconButton = Widget •
Positioned = Widget! • ScaleTransition = Widget!!
ͯ͢WidgetͰ͋Δ • Icon = Widget • IconButton = Widget •
Positioned = Widget! • ScaleTransition = Widget!!
ͯ͢WidgetͰ͋Δ • Icon = Widget • IconButton = Widget •
Positioned = Widget • ScaleTransition = Widget!!
ͯ͢WidgetͰ͋Δ • Icon = Widget • IconButton = Widget •
Positioned = Widget • ScaleTransition = Widget "OJNBUJPO
ͯ͢WidgetͰ͋Δ "OJNBUJPO
Stateless & Stateful • ঢ়ଶΛ࣋ͨͳ͍Widgetstatelessʹ͢Δ • ௨৴݁ՌϢʔβʔͷૢ࡞Ͱಈతʹมߋ͕ى ͖Δ߹ͳͲɺstateΛ͖࣋ͭwidget statefulʹ͢Δ
statefulͷྫ: Loadingͷදࣔ
Loadingͷදࣔ -PBEJOHTUBUF
Loadingͷදࣔ $BMMFEPOMZpSTUUJNF
Loadingͷදࣔ -PBEUIFSPPN UBC MJTU
Loadingͷදࣔ $BMMFEBGUFSMPBEJOH
Loadingͷදࣔ $IBOHFETUBUF JOTFU4UBUF
Loadingͷදࣔ TUBUF͕ॻ͖ΘΔͱ CVJME ͕ݺΕͯ8JEHFU͕ॻ͖ΘΔ
ϙΠϯτ • ͲͷWidget͕stateΛ͖͔࣋ͭΛܾΊΔͷ͕ ͍ͪΜେࣄ • ͜ͷTutorialΛಡΉͱstateͷߟ͑ํ͕Θ͔Δ https://flutter.io/tutorials/interactive
2-2. Widget Tree
Widget Tree • FlutterͰWidgetΛೖΕࢠʹͯ͠πϦʔͷΑ ͏ʹϨΠΞτΛΈཱ͍ͯͯ͘ • IntelliJͷFlutter plugin͕αϙʔτͯ͘͠ΕΔ
ಈը : https://goo.gl/wubWiE
Widget Tree ิʢOption + EnterʣΛͬͯWidget TreeΛ ΜͰ͍͖ɺ͍ํ͕Θ͔Βͳ͚ΕWidgetͷ ΫϥεͷϓϩύςΟΛݟͯཧղ͢Δ͜ͱ
2-3. σʔλͷѻ͍
σʔλͷѻ͍ 1. ωοτϫʔΫܦ༝Ͱऔಘ 2. Ϟσϧͷม 3. ϩʔΧϧͰͷΩϟογϡ
FirebaseΛ͔ͭ͏ ެࣜplugin͕༻ҙ͞Ε͍ͯΔ • cloud_firestore https://github.com/flutter/plugins/tree/master/packages/cloud_firestore • firebase_database https://github.com/flutter/plugins/tree/master/packages/firebase_database • firebase_storage
https://github.com/flutter/plugins/tree/master/packages/firebase_storage
cloud_store͔ΒϚΠηογϣϯऔಘ users / $userId / favorites / $sessionId { favorite
: boolean }
cloud_store͔ΒϚΠηογϣϯऔಘ users / $userId / favorites / $sessionId { favorite
: boolean }
cloud_store͔ΒϚΠηογϣϯऔಘ users / $userId / favorites / $sessionId { favorite
: boolean }
cloud_store͔ΒϚΠηογϣϯऔಘ users / $userId / favorites / $sessionId { favorite
: boolean }
httpϥΠϒϥϦΛ͏ • Dartͷhttp package + async, await • dart:convert Ͱύʔε
ηογϣϯҰཡͷऔಘ https://droidkaigi.jp/2018/ sessionize/all.json
ηογϣϯҰཡͷऔಘ
ηογϣϯҰཡͷऔಘ
ϞσϧͷϚοϐϯά • convertϥΠϒϥϦΛͬͯखಈͰΔ͔ • built_valueΛͬͯdeserialize͢Δ͔ https://github.com/google/built_value.dart
Preferenceͷอଘ • ެࣜͷshared_preferences plugin͕͋Δ https://github.com/flutter/plugins/tree/master/packages/shared_preferences • Android/iOSͱʹಈ͘
લճ։͍ͨλϒҐஔͷอଘ
લճ։͍ͨλϒҐஔͷอଘ
લճ։͍ͨλϒҐஔͷอଘ
લճ։͍ͨλϒҐஔͷอଘ
SQLite • sqfliteͰSQLiteΛૢ࡞͢ΔʢAndroid / iOSʣ https://github.com/tekartik/sqflite • Raw SQLͷ࣮ߦʹՃ͑ͯɺInsertɺDeleteɺ UpdateͳͲͷૢ࡞ͷHelper͕༻ҙ͞Ε͍ͯΔ
3. ҰҰ
Q1. CI·ΘͤΔʁ A. Yes ͨͩ͠ɺFlutter x86_64-linux-gnu/ libstdc++.so.6 version GLIBCXX_3.4.18 ͕ඞཁ
ͳͷͰɺಉόʔδϣϯͷڥͰCIΛճ͢ඞཁ͕ ͋Δɻ
Travisͷྫ
Travisͷྫ
Travisͷྫ Setup Flutter
Travisͷྫ Run test
Q2. AnalyticsͲ͏͢Δͷʁ A. FirebaseAnalytics pluginΛ͔ͭ͏ https://github.com/flutter/plugins/tree/master/packages/firebase_analytics
ϖʔδભҠͷτϥοΩϯά
ϩάͷૹ৴
Q3. Push NotificationͲ͏͢Δʁ A. FirebaseMessaging pluginΛ͔ͭ͏ https://github.com/flutter/plugins/tree/master/packages/firebase_messaging
Q4. Animationαϙʔτ͞ΕͯΔʁ A. Yes AnimationɺTransitionWidgetͰදݱ͢Δͷ ͰɺΓํAndroidͱ͍ͩͿҧ͏ https://flutter.io/animations/
Animation Examples ಈը : https://goo.gl/npYoj1
Q5. ϢχοτςετͲ͏ॻ͘ʁ A. mockito.dartɺtest/test.dart Λ͔ͭ͏ https://flutter.io/testing/
Json͔ΒϞσϧʹύʔε͢Δςετ
Json͔ΒϞσϧʹύʔε͢Δςετ
Json͔ΒϞσϧʹύʔε͢Δςετ
Q6. ଟݴޠԽͲ͏Δͷʁ A. dart:intlΛ͔ͭ͏ https://flutter.io/tutorials/internationalization/ ͨͩ͠ɺstrings.xmlͱൺͯΘΓͱ໘ Widgetͷςετ͕ίέΔͷͰɺtester.pump()Λ ݺΜͰ͓͘ϫʔΫΞϥϯυ͕ඞཁ https://github.com/flutter/flutter/issues/1865
Q7. Ϋϥογϡϩάͷऩूํ๏ʁ A. Firebase Crash Reporting ·ͨ SentryΛ ͔ͭ͏ https://github.com/flutter/flutter/issues/614
https://firebase.google.com/docs/crash https://pub.dartlang.org/packages/sentry
Q8. ϥΠϒϥϦΛ୳͢ͱ͖ʁ A. ެࣜϓϥάΠϯ or dart libraryΛݕࡧ͠Α͏ https://github.com/flutter/plugins https://pub.dartlang.org/flutter/packages
None
None
Lots of Libraries!
·ͱΊ
FlutterͷϙΠϯτ • ͲΜͳWidget͕͋Δ͔Δͷ͕େࣄ • ര։ൃͷͨΊʹIntelliJΛ͍͜ͳͦ͏ • ެࣜυΩϡϝϯτͱαϯϓϧ͕๛ͳͷͰࢀ ߟʹ͠Α͏
“ۀ”Ͱ͔ͭ͑Δͷ͔ʁ
͔ͭ͑ͦ͏
݁ہϓϩμΫγϣϯʹ ಥͬࠐΜͰΈͳ͍ͱΘ͔Βͳ͍
ཁ͢Δʹ ”֮ޛ” ࣍ୈ
Kyash Inc. ʹͯɺދࢹᚳʑͱ Ϳͬ͜ΈͷػձΛ͍ͬͯ·͢
Thanks!