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
何のための個人目標設定?
konifar
23
12k
30点で打席に立つ
konifar
77
46k
Linterでチョット安心 iOS多言語化対応 / ios-i18n-linter
konifar
1
810
VPoEとして1年 もっとこうすればよかった3選 / VPoE Retrospective
konifar
13
5.9k
Introduction to API Testing Automation by Postman
konifar
1
3.4k
Kyash iOSアプリのQAの歴史
konifar
1
9k
エンジニアから見たKyashのPdMのおしごと / An engineer's perspective for PdM roles in Kyash
konifar
3
1.7k
Kyash Androidのイースターエッグ実装 / Kyash Android Easter Eggs
konifar
2
1.1k
Master of Android Theme
konifar
23
13k
Other Decks in Programming
See All in Programming
Honoとhtmx
yusukebe
6
1.1k
使えるマークダウンライブラリを探した結果 RailsアプリケーションからRustを使うことになった話
fursich
0
150
TerraformをやめてCDKでReStartしたあと、 CDKをやめてCDK for TerraformでReStartした話
tmiura0203
0
770
phpunit/php-code-coverageって何をしてるんだ #phperkaigi
o0h
PRO
2
190
sbt-assemblyにハマってDB接続できず時間が溶けた話
wakye5815
1
660
プログラミングを楽しもう! / Enjoy Programming
chobishiba
1
680
Deep Dive 大規模システムアーキテクチャ/開発組織エンジニアリング / Deep Dive Large-Scale System Architecture, Development Organization Engineering
nrslib
4
430
私がエッジを使う理由
chimame
9
3.6k
Material 3で Material 2ぽい見た目にする
numeroanddev
2
220
OpCode目線で眺める PHPコードのカバレッジ
o0h
PRO
2
470
CSRF対策のやり方、そろそろアップデートしませんか / Update your knowledge of CSRF protection
hiro_y
22
12k
まっちすいっち戦争 / match vs switch
takuyakatsusa
1
620
Featured
See All Featured
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
1
1.2k
4 Signs Your Business is Dying
shpigford
174
21k
Visualization
eitanlees
135
14k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
225
51k
Raft: Consensus for Rubyists
vanstee
130
6.2k
Designing for humans not robots
tammielis
247
25k
Principles of Awesome APIs and How to Build Them.
keavy
119
16k
Mobile First: as difficult as doing things right
swwweet
215
8.5k
Statistics for Hackers
jakevdp
789
220k
How GitHub (no longer) Works
holman
301
140k
Building a Scalable Design System with Sketch
lauravandoore
455
32k
Practical Orchestrator
shlominoach
180
9.6k
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!