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

Intro to Flutter

Intro to Flutter

モバイルメソッド大阪 第2回 https://classmethod.connpass.com/event/97832/ での発表資料です。
解説はこちら https://kwmt27.net/2018/09/15/intro-to-flutter/

Ce6acc3536b0e0340b5f0569d3394c9c?s=128

Yasutaka Kawamoto

September 15, 2018
Tweet

Transcript

  1. Intro to Flutter 2018/09/14 ϞόΠϧϝιουେࡕ ୈ2ճ

  2. • Տຊ ହ޹(͔Θ΋ͱ ΍͔ͨ͢) • ॴଐɿגࣜձࣾ tech vein 
 (େࡕࢢதԝ۠ຊொ)

    • ϞόΠϧΞϓϦΤϯδχΞ • GitHub: kwmt ɺtwitter: kwmt27 • Google I/O2018 ॳࢀՃ 2 ࣗݾ঺հ
  3. 3 ࣗݾ঺հ • Flutterྺ 3ϲ݄ऑ • νϟοτΞϓϦ➡ΛFlutterͰ࡞੒த

  4. 3 ࣗݾ঺հ • Flutterྺ 3ϲ݄ऑ • νϟοτΞϓϦ➡ΛFlutterͰ࡞੒த

  5. • FlutterΛ৮ͬͯΈͨ͘ͳΔ͜ͱ͕໨ඪ ࠓ೔࣋ͬͯؼͬͯ΋Β͍͍ͨ΋ͷʢΰʔϧʣ 4

  6. • React Native΍Xamarinͱͷҧ͍ ࿩͞ͳ͍͜ͱ 5

  7. 6

  8. AndroidͱiOSͷΞϓϦΛ࡞͍ͬͯͩ͘͞ 6

  9. AndroidͱiOSͷΞϓϦΛ࡞͍ͬͯͩ͘͞ ྆OSରԠͷΞϓϦΛ࡞Γ͍ͨ 6

  10. • ೔ຊਓ޲͚ͷΞϓϦ͔ͩΒ·ͣ͸iOS͔Β࡞Δ͜ͱ ʹ͠Α͏ʂ • ͓٬͞Μ͔Β • ΋͏ͪΐͬͱ͜͏͍ͨ͠ͳ͊ɺ • ͜ͷύλʔϯͰ͓ͪΔΜ͚ͩͲɺɺɺ •

    ͱ͔ରԠ͍ͯͨ͠Β • 1ϲ݄༧ఆ͕2ϲ݄ɺ3ϲ݄ɺɺɺ 7
  11. • ೔ຊਓ޲͚ͷΞϓϦ͔ͩΒ·ͣ͸iOS͔Β࡞Ζ͏ʂ • େମͰ͖ͨΜ͚ͩͲɺ͜͜࢖͍ʹ͍͔͘Β΋͏ͪΐͬ ͱ͜͏͍ͨ͠ͳ͊ɻ • ͋ʂ࢖ͬͯΈͯࢥ͚ͬͨͲɺ͋ͷػೳઈରϦϦʔε· Ͱʹ͸͍Δ΍Μʂ • ͱ͔ରԠ͍ͯͨ͠Β

    • 1ϲ݄༧ఆ͕2ϲ݄ɺ3ϲ݄ɺɺɺ • ͱɺͳ͔ͳ͔Android͕։ൃͰ͖ͳ͍ɾɾɾ 8
  12. ͬͯɺͳΔ͜ͱͳ͍Ͱ͔͢ʁ 9

  13. • ΋͠ɺωΠςΟϒฒΈʹαΫαΫಈ͘ΞϓϦ͕1ͭ ͷιʔείʔυͰॻ͚Δͱͨ͠Βʁ • ΋͠ɺϓϩάϥϛϯάݴޠ͕Kotlin΍Swiftͱ͸ҧ͏ ͚Ͳɺ͍͍ͦͦ͜͜ײ͡ͷݴޠͩͬͨͱͨ͠Βʁ • ΋͠ɺ։ൃεϐʔυΛ্͛ΕΔͱͨ͠Βʁ 10

  14. 11

  15. 11

  16. 12 ωΠςΟϒUIʹͻ͚ΛͱΒͳ͍ඒ͍͠UI

  17. 12 ωΠςΟϒUIʹͻ͚ΛͱΒͳ͍ඒ͍͠UI

  18. ͢΂͕ͯWidgetͰߏ੒͞Ε·͢ 13

  19. ͢΂͕ͯWidgetͰߏ੒͞Ε·͢ 14

  20. ͢΂͕ͯWidgetͰߏ੒͞Ε·͢ Column( children: <Widget>[ Icon(Icons.share, color: color), Container( margin: EdgeInsets.only(top:

    8.0), child: Text( “SHARE”, style: new TextStyle( fontSize: 12.0, color: color, ), ), ) ], ) 15
  21. ͢΂͕ͯWidgetͰߏ੒͞Ε·͢ Column( children: <Widget>[ Icon(Icons.share, color: color), Container( margin: EdgeInsets.only(top:

    8.0), child: Text( “SHARE”, style: new TextStyle( fontSize: 12.0, color: color, ), ), ) ], ) 15
  22. ͢΂͕ͯWidgetͰߏ੒͞Ε·͢ Column( children: <Widget>[ Icon(Icons.share, color: color), Container( margin: EdgeInsets.only(top:

    8.0), child: Text( “SHARE”, style: new TextStyle( fontSize: 12.0, color: color, ), ), ) ], ) 15
  23. ͢΂͕ͯWidgetͰߏ੒͞Ε·͢ Column( children: <Widget>[ Icon(Icons.share, color: color), Container( margin: EdgeInsets.only(top:

    8.0), child: Text( “SHARE”, style: new TextStyle( fontSize: 12.0, color: color, ), ), ) ], ) 15
  24. AndroidɺiOSͰಈ͖·͢ 16

  25. • JavaʹࣅͨΦϒδΣΫτࢦ޲ݴޠ • first-class object • ܕਪ࿦ • async, await

    • Ξϩʔؔ਺ • ৚݅෇͖ϝϯόΞΫηε ?. • ΦϖϨʔλΛOverrideͰ͖Δ • Listૢ࡞(map, where(filter)͕࢖͑Δ)
  26. • ΞϯμʔείΞͰprivateΛද͢ • Cascase notation(..) • Future, Stream

  27. • ΞϯμʔείΞͰprivateΛද͢ • Cascase notation(..) • Future, Stream

  28. • Πέͯͳ͍ͱࢥ͏ͱ͜Ζ • ߦ຤ͷηϛίϩϯ͕ඞཁ • ֦ுؔ਺͕ͳ͍ • https://github.com/dart-lang/sdk/issues/9991 • Enum͕࢖͍ʹ͍͘

    • enum Type { hoge("΄͛") } Έ͍ͨͳ͜ͱ͕Ͱ͖ ͳ͍
  29. Dart͸ͦͦ͜͜ྑͦ͞͏ͳײ͡͠·ͤΜ͔ʁ 20

  30. • Flutter sdkΛzipΛμ΢ϯϩʔυɾղౚ • flutterίϚϯυ΁ͷPathΛ௨ͯ͠ • $ flutter doctor Getting

    started https://github.com/flutter/flutter/issues/14050 • homebrew͸αϙʔτ͞Εͯͳ͍
  31. ΤσΟλ(IDE)

  32. 23

  33. 24

  34. 25 ϓϩδΣΫτߏ੒

  35. 25 ϓϩδΣΫτߏ੒ Dart

  36. 25 ϓϩδΣΫτߏ੒ Native

  37. 26 ϓϩδΣΫτߏ੒ Android iOS

  38. 27 Open iOS module in Xcode

  39. 28 ύοέʔδ؅ཧ

  40. 28 ύοέʔδ؅ཧ ύοέʔδ؅ཧ

  41. 29 pubspec.yaml

  42. 30 ϓϩδΣΫτ࣮ߦ

  43. 31 ϓϩδΣΫτ࣮ߦ

  44. 32 ϗοτϦϩʔυ • Demo

  45. 33 ·ͱΊ • ΋͠ɺAndroid ͱiOSͰωΟςΟϒฒΈʹαΫαΫಈ͘Ξϓ Ϧ͕1ͭͷιʔείʔυͰॻ͚Δͱͨ͠Βʁ • →ɹNativeʹίϯύΠϧ͞ΕΔͨΊɺαΫαΫಈ͘ίʔυ ͕̍ͭͷιʔείʔυ͔͚ͦ͏Ͱ͢ΑͶ •

    ΋͠ɺϓϩάϥϛϯάݴޠ͕Kotlin΍Swiftͱ͸ҧ͏͚Ͳɺͦ ͍͍ͦ͜͜ײ͡ͷݴޠͩͬͨͱͨ͠Βʁ • →ɹDart͸ͦͦ͜͜ྑͦ͞͏ • ΋͠ɺ։ൃεϐʔυΛ্͛ΕΔͱͨ͠Βʁ • →ɹϗοτϦϩʔυ࠷ߴʂ
  46. One more thing…

  47. 35 NativeͷػೳʹΞΫηεՄೳ https://flutter.io/platform-channels/ Flutter Android iOS

  48. 35 NativeͷػೳʹΞΫηεՄೳ https://flutter.io/platform-channels/ Flutter MethodChannel Android iOS

  49. 36 υΩϡϝϯτ͕๛෋

  50. 36 υΩϡϝϯτ͕๛෋ Flutter for Web devs Flutter for Android devs

    Flutter for iOS devs Flutter for React Native devs Flutter for Xamarin.Forms devs
  51. 37 υΩϡϝϯτ͕๛෋

  52. 38 Flutter Gallery

  53. 39 Flutter Gallery

  54. 40 Flutter͸ਓؾ https://medium.com/flutter-io/flutter-release-preview-1-943a9b6ee65a?linkId=53249457

  55. 40 Flutter͸ਓؾ Beta 1ϦϦʔε Google IO 2018 https://medium.com/flutter-io/flutter-release-preview-1-943a9b6ee65a?linkId=53249457

  56. 41 Flutter͸ਓؾ https://medium.com/flutter-io/flutter-release-preview-1-943a9b6ee65a?linkId=53249457

  57. 42 Flutter Japan User Group

  58. 43 GDGਆށ

  59. 44 Flutter͋Δ͋Δ https://speakerdeck.com/yasi/flutteraruaru

  60. 45 GDGਆށ https://gdgkobe.doorkeeper.jp/events/78737

  61. 45 GDGਆށ ͋ͱ19ਓࢀՃͰ͖·͢ɻ https://gdgkobe.doorkeeper.jp/events/78737

  62. • υΩϡϝϯτ͕๛෋ͰɺFlutter Gallery͸ࢀߟʹͳΔ • Flutter͸ਓؾ্ঢத • Flutterษڧձ΋౦ژ΍ؔ੢Ͱ࣮ࢪ͞ΕͯΔͷͰɺڵຯ ͕͋Γ·ͨ͠ΒࢀՃͯ͠ΈΔͱྑ͍͔΋͠Ε·ͤΜɻ ·ͱΊ

  63. Q & A 47