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
55k
コードで見るFlutterアプリの実装
DroidKaigi 2018 2日目 17:40 ~ 18:10
konifar
February 09, 2018
Tweet
Share
More Decks by konifar
See All by konifar
Android開発以外のAndroid開発経験の活かしどころ
konifar
2
700
初めてのiOS関連GitHub ActionsをMarketplaceに公開するまでの実録
konifar
3
210
オーナーシップを持つ領域を明確にする
konifar
14
3.8k
雑に思考を整理する技術と効能
konifar
72
35k
何のための個人目標設定?
konifar
27
14k
30点で打席に立つ
konifar
79
49k
Linterでチョット安心 iOS多言語化対応 / ios-i18n-linter
konifar
2
1.1k
VPoEとして1年 もっとこうすればよかった3選 / VPoE Retrospective
konifar
13
6.2k
Introduction to API Testing Automation by Postman
konifar
1
3.6k
Other Decks in Programming
See All in Programming
Rustではじめる負荷試験
skanehira
5
1.2k
Hono・Prisma・AWSでGeoなAPI開発
nokonoko1203
5
670
LangGraphでのHuman-in-the-Loopの実装
os1ma
3
1k
Mastering AsyncSequence - 使う・作る・他のデザインパターン(クロージャ、Delegate など)から移行する
treastrain
4
1.6k
What we keep in mind when migrating from Serverless Framework to AWS CDK and AWS SAM
kasacchiful
1
140
Amazon BedrockでサーバレスなAIお料理ボットを作成する!!
tosuri13
0
200
いつか使える ObjectSpace / Maybe useful ObjectSpace
euglena1215
2
130
rbs-inlineを導入してYARDからRBSに移行する
euglena1215
1
260
Why Prism?
kddnewton
4
1.7k
GraphQL あるいは React における自律的なデータ取得について
quramy
11
2.8k
【TID2024】模擬講義:プログラマと一緒にゲームをデザインしてみよう!
akatsukigames_tech
0
580
What is Parser
yui_knk
9
4.1k
Featured
See All Featured
How STYLIGHT went responsive
nonsquared
93
5.1k
Writing Fast Ruby
sferik
623
60k
The Cost Of JavaScript in 2023
addyosmani
42
5.2k
Designing Experiences People Love
moore
138
23k
4 Signs Your Business is Dying
shpigford
179
21k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
28
1.6k
Principles of Awesome APIs and How to Build Them.
keavy
125
16k
How to Ace a Technical Interview
jacobian
275
23k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
246
1.3M
Practical Orchestrator
shlominoach
185
10k
Designing with Data
zakiwarfel
98
5k
Building Better People: How to give real-time feedback that sticks.
wjessup
359
18k
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!