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
提案のレベルを上げる #QiitaConference
konifar
79
30k
目安箱の設置とワークさせるポイント
konifar
4
2.1k
サバイバルモード下でのエンジニアリングマネジメント
konifar
30
12k
Android開発以外のAndroid開発経験の活かしどころ
konifar
3
2.8k
初めてのiOS関連GitHub ActionsをMarketplaceに公開するまでの実録
konifar
3
380
オーナーシップを持つ領域を明確にする
konifar
16
5.6k
雑に思考を整理する技術と効能
konifar
76
43k
何のための個人目標設定?
konifar
33
17k
30点で打席に立つ
konifar
89
57k
Other Decks in Programming
See All in Programming
生成AIで日々のエラー調査を進めたい
yuyaabo
0
620
CursorはMCPを使った方が良いぞ
taigakono
0
140
セキュリティマネジャー廃止とクラウドネイティブ型サンドボックス活用
kazumura
1
190
エラーって何種類あるの?
kajitack
5
270
Cursor AI Agentと伴走する アプリケーションの高速リプレイス
daisuketakeda
1
120
GraphRAGの仕組みまるわかり
tosuri13
7
450
設計やレビューに悩んでいるPHPerに贈る、クリーンなオブジェクト設計の指針たち
panda_program
3
250
無関心の谷
kanayannet
0
180
ReadMoreTextView
fornewid
1
450
Spring gRPC で始める gRPC 入門 / Introduction to gRPC with Spring gRPC
mackey0225
2
520
地方に住むエンジニアの残酷な現実とキャリア論
ichimichi
2
630
なんとなくわかった気になるブロックテーマ入門/contents.nagoya 2025 6.28
chiilog
0
110
Featured
See All Featured
Making the Leap to Tech Lead
cromwellryan
134
9.3k
The Cult of Friendly URLs
andyhume
79
6.4k
A Tale of Four Properties
chriscoyier
160
23k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
A designer walks into a library…
pauljervisheath
206
24k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Navigating Team Friction
lara
187
15k
Faster Mobile Websites
deanohume
307
31k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.8k
Balancing Empowerment & Direction
lara
1
340
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!