Upgrade to Pro — share decks privately, control downloads, hide ads and more …

コードで見るFlutterアプリの実装

konifar
February 09, 2018

 コードで見るFlutterアプリの実装

DroidKaigi 2018 2日目 17:40 ~ 18:10

konifar

February 09, 2018
Tweet

More Decks by konifar

Other Decks in Programming

Transcript

  1. ίʔυͰݟΔ
    FlutterΞϓϦͷ࣮૷
    'SJ

    %SPJE,BJHJ
    !LPOJGBS

    View full-size slide

  2. Kyash Inc.
    • Sending and receiving money 

    with kyash is easy breeze
    • HP : https://kyash.co/
    • Store : https://goo.gl/C594Ri
    Konifar’s QR

    View full-size slide

  3. DroidKaigi2018 Flutter App
    https://github.com/konifar/droidkaigi2018-flutter

    View full-size slide

  4. ࠓ೔࿩͢͜ͱ
    • Android/iOSΞϓϦ͕”࡞ΕΔ”ͷ͸Θ͔ͬͨ
    • “ۀ຿”Ͱ࠾༻Ͱ͖Δͷʁ

    View full-size slide

  5. ۀ຿Ͱ࠾༻͢Δ࣌ʹߟ͑Δ͜ͱ
    • ੜଘՄೳੑ

    ެࣜͷαϙʔτ۩߹ɺίϛϡχςΟͷ׆ൃ͞
    • ࣮૷

    ϨΠΞ΢τɺωοτϫʔΫ௨৴ɺΩϟογϡ
    • σόοάɺςετ

    σόοάπʔϧɺCIɺςετϑϨʔϜϫʔΫ
    • ӡ༻

    Push NotificationɺAnalyticsɺςετ഑৴ɺϦϦʔε

    View full-size slide

  6. ۀ຿Ͱ࠾༻͢Δ࣌ʹߟ͑Δ͜ͱ
    • ੜଘՄೳੑ

    ެࣜͷαϙʔτ۩߹ɺίϛϡχςΟͷ׆ൃ͞
    • ࣮૷

    ϨΠΞ΢τɺωοτϫʔΫ௨৴ɺΩϟογϡ
    • σόοάɺςετ

    σόοάπʔϧɺCIɺςετϑϨʔϜϫʔΫ
    • ӡ༻

    Push NotificationɺAnalyticsɺςετ഑৴ɺϦϦʔε
    .BJOUPQJD

    View full-size slide

  7. ۀ຿Ͱ࠾༻͢Δ࣌ʹߟ͑Δ͜ͱ
    • ੜଘՄೳੑ

    ެࣜͷαϙʔτ۩߹ɺίϛϡχςΟͷ׆ൃ͞
    • ࣮૷

    ϨΠΞ΢τɺωοτϫʔΫ௨৴ɺΩϟογϡ
    • σόοάɺςετ

    σόοάπʔϧɺCIɺςετϑϨʔϜϫʔΫ
    • ӡ༻

    Push NotificationɺAnalyticsɺςετ഑৴ɺϦϦʔε
    ͜ͷ΁Μ΋Ұ෦͔͚଍Ͱ৮Ε·͢

    View full-size slide

  8. Today’s goal
    • Flutter஌Βͳ͔ͬͨਓ

    => ʮԿ͔࡞ͬͯΈΑ͏͔ͳʯ
    • Flutter஌ͬͯͨਓ

    => ʮ΋͔ͨ͠͠Βۀ຿Ͱ࢖͑Δ͔΋ʁʯ

    View full-size slide

  9. ࠓ೔࿩͞ͳ͍͜ͱ
    • 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ͷ࿩

    => ϦϦʔε͸େมͱ͚ͩ఻͓͖͍͑ͯͨɻ

    View full-size slide

  10. Agenda
    1. Flutterͷ͓͞Β͍ (5෼)
    1. Flutterͱ͸
    2. ReactNativeͱͷҧ͍
    3. Androider͔ΒݟͨFlutter
    2. Flutterͷίʔυ (15෼)
    1. WidgetʢجຊɺWidgetπϦʔͷߏஙʣ
    2. σʔλͷѻ͍ʢωοτϫʔΫ௨৴ɺΩϟογϡʣ
    3. Ұ໰Ұ౴ (5෼)

    View full-size slide

  11. 1. Flutterͷ͓͞Β͍

    View full-size slide

  12. Flutterͱ͸
    • OSਪ঑ͷσβΠϯʹ߹Θͤͨ៉ྷͳΞϓϦΛ
    ૉૣ͘࡞ΔͨΊͷΫϩεϓϥοτϑΥʔϜ
    SDK
    • Google੡ɻ։ൃݴޠ͸Dart
    • ϨΠΞ΢τ͸xmlͰ͸ͳ͘DartͰWidget Tree
    Λॻ͘

    View full-size slide

  13. 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/

    View full-size slide

  14. ๛෋ͳWidget
    • Material Design Guidelineʹग़ͯ͘Δύλʔϯ
    ͷUI͸΄΅શͯެࣜʹαϙʔτ͞Ε͍ͯΔ
    • WidgetΛ஌Γɺ࢖͍͜ͳ͢͜ͱ͕ߴ଎ʹ։ൃ
    ্͍ͯ͘͠Ͱͱͯ΋ॏཁ

    View full-size slide

  15. ྫ : Scaffold

    View full-size slide

  16. ྫ : Scaffold
    "QQ#BS

    View full-size slide

  17. ྫ : Scaffold
    %SBXFS

    View full-size slide

  18. ྫ : Scaffold

    View full-size slide

  19. ྫ : Scaffold

    View full-size slide

  20. https://flutter.io/widgets/
    A lots of Widgets!!

    View full-size slide

  21. Androider͔ΒݟͨFlutter
    • IntelliJͰ։ൃͰ͖Δ
    • Dart͸JavaͱࣅͯΔɻඪ४ϥΠϒϥϦ͕๛෋
    • Hot ReloadͰमਖ਼͕1ඵͰ൓өɻ൓өͰ͖ͳ
    ͍࣌͸ϑϧϦϩʔυ͕ඞཁͱڭ͑ͯ͘ΕΔɻ
    ϑϧϦϩʔυ΋10ඵ͘Β͍ʢ࠷ߴʣ

    View full-size slide

  22. 2. ίʔυͰݟΔFlutter

    View full-size slide

  23. Widgetͷجຊ
    1. ͢΂ͯ͸WidgetͰ͋Δ
    2. statelessͱstatefulͷೋछྨ͕͋Δ
    3. Widget TreeΛ૊ΈཱͯΔ

    View full-size slide

  24. ͢΂ͯ͸WidgetͰ͋Δ
    • Icon = Widget
    • IconButton = Widget
    • Positioned = Widget!
    • ScaleTransition = Widget!!

    View full-size slide

  25. ͢΂ͯ͸WidgetͰ͋Δ
    • Icon = Widget
    • IconButton = Widget
    • Positioned = Widget!
    • ScaleTransition = Widget!!

    View full-size slide

  26. ͢΂ͯ͸WidgetͰ͋Δ
    • Icon = Widget
    • IconButton = Widget
    • Positioned = Widget
    • ScaleTransition = Widget!!

    View full-size slide

  27. ͢΂ͯ͸WidgetͰ͋Δ
    • Icon = Widget
    • IconButton = Widget
    • Positioned = Widget
    • ScaleTransition = Widget
    "OJNBUJPO

    View full-size slide

  28. ͢΂ͯ͸WidgetͰ͋Δ
    "OJNBUJPO

    View full-size slide

  29. Stateless & Stateful
    • ঢ়ଶΛ࣋ͨͳ͍Widget͸statelessʹ͢Δ
    • ௨৴݁Ռ΍Ϣʔβʔͷૢ࡞Ͱಈతʹมߋ͕ى
    ͖Δ৔߹ͳͲɺstateΛ࣋ͭ΂͖widget͸
    statefulʹ͢Δ

    View full-size slide

  30. statefulͷྫ: Loadingͷදࣔ

    View full-size slide

  31. Loadingͷදࣔ
    -PBEJOHTUBUF

    View full-size slide

  32. Loadingͷදࣔ
    $BMMFEPOMZpSTUUJNF

    View full-size slide

  33. Loadingͷදࣔ
    -PBEUIFSPPN UBC
    MJTU

    View full-size slide

  34. Loadingͷදࣔ
    $BMMFEBGUFSMPBEJOH

    View full-size slide

  35. Loadingͷදࣔ
    $IBOHFETUBUF

    JOTFU4UBUF

    View full-size slide

  36. Loadingͷදࣔ
    TUBUF͕ॻ͖׵ΘΔͱ
    CVJME
    ͕ݺ͹Εͯ8JEHFU͕ॻ͖׵ΘΔ

    View full-size slide

  37. ϙΠϯτ
    • ͲͷWidget͕stateΛ࣋ͭ΂͖͔ΛܾΊΔͷ͕
    ͍ͪ͹Μେࣄ
    • ͜ͷTutorialΛಡΉͱstateͷߟ͑ํ͕Θ͔Δ

    https://flutter.io/tutorials/interactive

    View full-size slide

  38. 2-2. Widget Tree

    View full-size slide

  39. Widget Tree
    • FlutterͰ͸WidgetΛೖΕࢠʹͯ͠πϦʔͷΑ
    ͏ʹϨΠΞ΢τΛ૊Έཱ͍ͯͯ͘
    • IntelliJͷFlutter plugin͕αϙʔτͯ͘͠ΕΔ

    View full-size slide

  40. ಈը : https://goo.gl/wubWiE

    View full-size slide

  41. Widget Tree
    ิ׬ʢOption + EnterʣΛ࢖ͬͯWidget TreeΛ
    ૊ΜͰ͍͖ɺ࢖͍ํ͕Θ͔Βͳ͚Ε͹Widgetͷ
    ΫϥεͷϓϩύςΟΛݟͯཧղ͢Δ͜ͱ

    View full-size slide

  42. 2-3. σʔλͷѻ͍

    View full-size slide

  43. σʔλͷѻ͍
    1. ωοτϫʔΫܦ༝Ͱऔಘ
    2. Ϟσϧ΁ͷม׵
    3. ϩʔΧϧͰͷΩϟογϡ

    View full-size slide

  44. 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

    View full-size slide

  45. cloud_store͔ΒϚΠηογϣϯऔಘ
    users / $userId / favorites / $sessionId

    { favorite : boolean }

    View full-size slide

  46. cloud_store͔ΒϚΠηογϣϯऔಘ
    users / $userId / favorites / $sessionId

    { favorite : boolean }

    View full-size slide

  47. cloud_store͔ΒϚΠηογϣϯऔಘ
    users / $userId / favorites / $sessionId

    { favorite : boolean }

    View full-size slide

  48. cloud_store͔ΒϚΠηογϣϯऔಘ
    users / $userId / favorites / $sessionId

    { favorite : boolean }

    View full-size slide

  49. httpϥΠϒϥϦΛ࢖͏
    • Dartͷhttp package + async, await
    • dart:convert Ͱύʔε

    View full-size slide

  50. ηογϣϯҰཡͷऔಘ
    https://droidkaigi.jp/2018/
    sessionize/all.json

    View full-size slide

  51. ηογϣϯҰཡͷऔಘ

    View full-size slide

  52. ηογϣϯҰཡͷऔಘ

    View full-size slide

  53. Ϟσϧ΁ͷϚοϐϯά
    • convertϥΠϒϥϦΛ࢖ͬͯखಈͰ΍Δ͔
    • built_valueΛ࢖ͬͯdeserialize͢Δ͔

    https://github.com/google/built_value.dart

    View full-size slide

  54. Preference΁ͷ஋อଘ
    • ެࣜͷshared_preferences plugin͕͋Δ

    https://github.com/flutter/plugins/tree/master/packages/shared_preferences
    • Android/iOSͱ΋ʹಈ͘

    View full-size slide

  55. લճ։͍ͨλϒҐஔͷอଘ

    View full-size slide

  56. લճ։͍ͨλϒҐஔͷอଘ

    View full-size slide

  57. લճ։͍ͨλϒҐஔͷอଘ

    View full-size slide

  58. લճ։͍ͨλϒҐஔͷอଘ

    View full-size slide

  59. SQLite
    • sqfliteͰSQLiteΛૢ࡞͢ΔʢAndroid / iOSʣ

    https://github.com/tekartik/sqflite
    • Raw SQLͷ࣮ߦʹՃ͑ͯɺInsertɺDeleteɺ
    UpdateͳͲͷૢ࡞ͷHelper͕༻ҙ͞Ε͍ͯΔ

    View full-size slide

  60. 3. Ұ໰Ұ౴

    View full-size slide

  61. Q1. CI·ΘͤΔʁ
    A. Yes
    ͨͩ͠ɺFlutter͸ x86_64-linux-gnu/
    libstdc++.so.6 version GLIBCXX_3.4.18 ͕ඞཁ
    ͳͷͰɺಉόʔδϣϯͷ؀ڥͰCIΛճ͢ඞཁ͕
    ͋Δɻ

    View full-size slide

  62. Travisͷྫ
    Setup Flutter

    View full-size slide

  63. Travisͷྫ
    Run test

    View full-size slide

  64. Q2. AnalyticsͲ͏͢Δͷʁ
    A. FirebaseAnalytics pluginΛ͔ͭ͏

    https://github.com/flutter/plugins/tree/master/packages/firebase_analytics

    View full-size slide

  65. ϖʔδભҠͷτϥοΩϯά

    View full-size slide

  66. ϩάͷૹ৴

    View full-size slide

  67. Q3. Push Notification͸Ͳ͏͢Δʁ
    A. FirebaseMessaging pluginΛ͔ͭ͏

    https://github.com/flutter/plugins/tree/master/packages/firebase_messaging

    View full-size slide

  68. Q4. Animation͸αϙʔτ͞ΕͯΔʁ
    A. Yes
    AnimationɺTransition΋WidgetͰදݱ͢Δͷ
    Ͱɺ΍Γํ͸Androidͱ͍ͩͿҧ͏

    https://flutter.io/animations/

    View full-size slide

  69. Animation Examples
    ಈը : https://goo.gl/npYoj1

    View full-size slide

  70. Q5. ϢχοτςετͲ͏ॻ͘ʁ
    A. mockito.dartɺtest/test.dart Λ͔ͭ͏

    https://flutter.io/testing/

    View full-size slide

  71. Json͔ΒϞσϧʹύʔε͢Δςετ

    View full-size slide

  72. Json͔ΒϞσϧʹύʔε͢Δςετ

    View full-size slide

  73. Json͔ΒϞσϧʹύʔε͢Δςετ

    View full-size slide

  74. Q6. ଟݴޠԽͲ͏΍Δͷʁ
    A. dart:intlΛ͔ͭ͏

    https://flutter.io/tutorials/internationalization/
    ͨͩ͠ɺstrings.xmlͱൺ΂ͯΘΓͱ໘౗
    Widgetͷςετ͕ίέΔͷͰɺtester.pump()Λ
    ݺΜͰ͓͘ϫʔΫΞϥ΢ϯυ͕ඞཁ

    https://github.com/flutter/flutter/issues/1865

    View full-size slide

  75. 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

    View full-size slide

  76. Q8. ϥΠϒϥϦΛ୳͢ͱ͖͸ʁ
    A. ެࣜϓϥάΠϯ or dart libraryΛݕࡧ͠Α͏
    https://github.com/flutter/plugins
    https://pub.dartlang.org/flutter/packages

    View full-size slide

  77. Lots of Libraries!

    View full-size slide

  78. FlutterͷϙΠϯτ
    • ͲΜͳWidget͕͋Δ͔஌Δͷ͕େࣄ
    • ര଎։ൃͷͨΊʹIntelliJΛ࢖͍͜ͳͦ͏
    • ެࣜυΩϡϝϯτͱαϯϓϧ͕๛෋ͳͷͰࢀ
    ߟʹ͠Α͏

    View full-size slide

  79. “ۀ຿”Ͱ͔ͭ͑Δͷ͔ʁ

    View full-size slide

  80. ݁ہϓϩμΫγϣϯʹ
    ಥͬࠐΜͰΈͳ͍ͱΘ͔Βͳ͍

    View full-size slide

  81. ཁ͢Δʹ ”֮ޛ” ࣍ୈ

    View full-size slide

  82. Kyash Inc. ʹͯɺދࢹᚳʑͱ
    Ϳͬ͜ΈͷػձΛ࢕͍ͬͯ·͢

    View full-size slide