Intro to Flutter

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

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
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
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)
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