[ABC2018Autumn]Flutterアプリ開発実践編

ABC 2018 Autumnでのセッション「Flutterアプリ開発実践編」の発表資料です。 #flutter #abc2018a #android #ios

Transcript

1. 2018.10.13 ਆݪɹ݈Ұ(Kenichi Kambara) ABC 2018 Autumn FlutterΞϓϦ։ൃ ࣮ફฤ [Developing Flutter Apps]
2. About me • ϞόΠϧؔ࿈׆ಈ • ࠃ಺֎Ͱͷߨԋ׆ಈ • Droidcon UK/FR/NL/ES/SH • Developers Summit • Android Bazaar and Conference • StackOverflow DevDays • Cloud Days • Google I/O Extended Tokyo 2018 • ॻ੶ࣥච • ݸਓϒϩάʮMobile Dev Blogʯ • ձࣾϒϩάʮਆݪ݈ҰͷAndroidͰ޿͕Δੈքʯ • NTTςΫϊΫϩεɹॴଐ ਆݪɹ݈Ұ(@korodroid)
3. Agenda •Flutter֓ཁ/ΞϓϦ։ൃೖ໳ •FlutterΞϓϦ։ൃ࣮ફ •Flutter࠷৽τϐοΫ
4. ɹօ༷΁ͷΞϯέʔτ 1.Hello FlutterΛ΍ͬͨ͜ͱ͋Δਓʁ 2.FlutterͰ؆୯ͳΞϓϦΛ࡞ͬͨ͜ͱ͕͋Δਓʁ 3.FlutterͰΞϓϦΛϦϦʔεࡁͷਓʁ ?
5. Flutter֓ཁ/ΞϓϦ։ൃೖ໳
6. Flutter ڞ௨ͷιʔεͰiOS/AndroidΞϓϦΛ ։ൃͰ͖ΔSDK(ΫϩεϓϥοτϑΥʔϜ)
   
7. 
    Flutter׆ಈঢ়گ(StackOverflow) Number of StackOverflow question views tagged with each of four popular UI frameworks over time (https://bit.ly/2A0tzuK)
8. Flutterͷಛ௃ ᶃඒ͍͠UI/ߴ͍࣮ߦੑೳ ᶄߴ͍։ൃޮ཰ ᶅݴޠ͸Dart
   
9. ᶃඒ͍͠UI/ߴ͍࣮ߦੑೳ iOS/Android޲͚ͷࣗલUI https://flutter.io/showcase/
   
10. Flutter Showcase@Google I/O 2018
    
11. ᶄߴ͍։ൃޮ཰ https://flutter.io/get-started/editor/
    
12. ᶄߴ͍։ൃޮ཰ ίʔυมߋΛଈ൓ө(Hot Reload) https://flutter.io/hot-reload/
    
13. ᶄߴ͍։ൃޮ཰
     ઃఆΛ༧Ί֬ೝ(Plugins->Flutter)
14. ᶄߴ͍։ൃޮ཰
     ڍಈ͕͓͔͘͠ͳͬͨΒɺ
15. ᶅݴޠ͸Dart Java/Java Scriptܦݧऀʹ͸ೃછΈ΍͍͢ݴޠ import 'package:flutter/material.dart'; void main() { runApp( new Center( child: new Text( '͜Μʹͪ͸ɺFlutter', textDirection: TextDirection.ltr, ), ), ); }
    
16. ᶅݴޠ͸Dart Java/Java Scriptܦݧऀʹ͸ೃછΈ΍͍͢ݴޠ import 'package:flutter/material.dart'; void main() { runApp( new Center( child: new Text( '͜Μʹͪ͸ɺFlutter', textDirection: TextDirection.ltr, ), ), ); }
    
17. ᶅݴޠ͸Dart Java/Java Scriptܦݧऀʹ͸ೃછΈ΍͍͢ݴޠ import 'package:flutter/material.dart'; void main() { runApp( new Center( child: new Text( '͜Μʹͪ͸ɺFlutter', textDirection: TextDirection.ltr, ), ), ); }
    
18. ᶅݴޠ͸Dart Java/Java Scriptܦݧऀʹ͸ೃછΈ΍͍͢ݴޠ import 'package:flutter/material.dart'; void main() { runApp( new Center( child: new Text( '͜Μʹͪ͸ɺFlutter', textDirection: TextDirection.ltr, ), ), ); }
    
19. ᶅݴޠ͸Dart Java/Java Scriptܦݧऀʹ͸ೃછΈ΍͍͢ݴޠ import 'package:flutter/material.dart'; void main() { runApp( new Center( child: new Text( '͜Μʹͪ͸ɺFlutter', textDirection: TextDirection.ltr, ), ), ); }
    
20. ᶅݴޠ͸Dart Dart͸ver.2ʹͳΓnewΛলུՄೳʹ import 'package:flutter/material.dart'; void main() { runApp( new Center( child: new Text( '͜Μʹͪ͸ɺFlutter', textDirection: TextDirection.ltr, ), ), ); }
     ※ఆ਺Λද͢const΋লུՄೳ
21. Flutterͷ͸͡Ίํ
    
22. Hello Flutter
    
23. ։ൃ؀ڥߏங(1/2) 1.Flutter SDKͷೖख
 $ git clone -b master https://github.com/flutter/flutter.git
 
 2. PATHͷ௥Ճ
 $ export PATH=`pwd`/flutter/bin:$PATH 3.ηοτΞοϓঢ়گͷνΣοΫ
 $ flutter doctor zip൛΋͋ΓɻࠔͬͨΒɺflutter doctor https://flutter.io/get-started/install/
    
24. [ิ଍]flutter doctor $ flutter doctor Doctor summary (to see all details, run flutter doctor -v): [✓] Flutter (Channel beta, v0.4.4, on Mac OS X 10.13.3 17D47, locale ja-JP) [✓] Android toolchain - develop for Android devices (Android SDK 27.0.3) [!] iOS toolchain - develop for iOS devices (Xcode 9.4) ✗ CocoaPods not installed. CocoaPods is used to retrieve the iOS platform side's plugin code that responds to your plugin usage on the Dart side. Without resolving iOS dependencies with CocoaPods, plugins will not work on iOS. For more info, see https://flutter.io/platform-plugins To install: brew install cocoapods pod setup [✓] Android Studio ✗ Flutter plugin not installed; this adds Flutter specific functionality. ✗ Dart plugin not installed; this adds Dart specific functionality. [✓] Android Studio (version 3.1) [✓] Connected devices (2 available) ରॲ๏΋ڭ͑ͯ͘ΕΔؾ͕ޮౕ͘ʂ
    
25. ։ൃ؀ڥߏங(2/2) ϓϥάΠϯಋೖͰ։ൃ͕ศརʹ
    
26. ΞϓϦ։ൃ(΢ΟβʔυʹԊͬͯ਽ܗ࡞੒)
    
27. ΞϓϦ։ൃ(ςϯϓϨʔτͷ࣮ߦ݁Ռ)
    
28. ΞϓϦߏ੒ •ιʔείʔυ(*.dart) •ύοέʔδఆٛ •Ϧιʔεఆٛ
    
29. ΞϓϦ։ൃͷجຊͱͳΔ ࠷খݶͷMaterialରԠΞϓϦͷιʔείʔυ
    
30. Hello Flutter import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Welcome to Flutter', home: Scaffold( appBar: AppBar( title: Text('͸͡ΊͯͷFlutter'), ), body: Center( child: Text('͜Μʹͪ͸ɺFlutter'), ), ), ); } } <project>/libs/main.dartΛˣʹॻ͖׵͑
    
31. Hello Flutter import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Welcome to Flutter', home: Scaffold( appBar: AppBar( title: Text('͸͡ΊͯͷFlutter'), ), body: Center( child: Text('͜Μʹͪ͸ɺFlutter'), ), ), ); } } ը໘ͷ։ൃ΋DartͰ(LayoutXML, StoryBoard)
    
32. Hello Flutter import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Welcome to Flutter', home: Scaffold( appBar: AppBar( title: Text('͸͡ΊͯͷFlutter'), ), body: Center( child: Text('͜Μʹͪ͸ɺFlutter'), ), ), ); } } ίʔυͱUIͷؔ܎ʹ஫໨
    
33. ߏ੒ཁૉ͸શͯ΢ΟδΣοτ πϦʔߏ଄Ͱߟ͑Δ Text AppBar 
 Body Scaffold Text
     Center
34. ಈతͳը໘ߋ৽͕ඞཁˠStatefulWidget import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return new MaterialApp( home: new MyHomePage(title: 'Welcome to Flutter'), ); } } class MyHomePage extends StatefulWidget { MyHomePage({Key key, this.title}) : super(key: key); final String title; @override _MyHomePageState createState() => new _MyHomePageState(); } class _MyHomePageState extends State<MyHomePage> { int _counter = 0; void _incrementCounter() { setState(() { _counter++; }); } …(লུ)… StateΛར༻ͯ͠ঢ়ଶ؅ཧ
    
35. FlutterΞϓϦ։ൃ࣮ફ
    
36. 
     FlutterͷϓϩμΫγϣϯద༻ ʢ։ൃˠϦϦʔεͰ৐Γӽ͑Δ΂͖՝୊ʣ
37. 
     ୊ࡐͱ͢ΔΞϓϦ ※ධՁத ※ϦϦʔεࡁ
38. 
     ᶃը໘/ϨΠΞ΢τ ᶄϏδωεϩδοΫ ᶅΞΠίϯ ᶆࠃࡍԽ ϓϩμΫγϣϯద༻Ͱ৐Γӽ͑ͨ՝୊
39. FlutterͷUIߏங͸ಛघʁʂ ʢAndroid/iOSωΠςΟϒ԰ͷࢹ఺ʣ ՝୊ᶃ
40. ը໘/ϨΠΞ΢τͷ࣮૷ ※྆ऀΛ૊Έ߹ΘͤΔํ๏΋͋Γ
     (1)DartݴޠΛ௚઀༻͍Δํࣜ (2)GUIΤσΟλΛ༻͍Δํࣜ
41. 
     (1)DartݴޠΛ௚઀༻͍Δํࣜ import 'package:flutter/material.dart'; void main() { runApp( new Center( child: new Text( '͜Μʹͪ͸ɺFlutter', textDirection: TextDirection.ltr, ), ), ); } ίʔυهड़ˠHot ReloadͰ֬ೝ
42. 
     (2)GUIΤσΟλΛ༻͍Δํࣜ Flutter Studio (WebΞϓϦ)ͷར༻ http://mutisya.com/
43. 
     ͕ɺͦΜͳʹ؁͘ͳ͍… ʢDartίʔυΛ௚઀৮ΔεΩϧ͸ඞਢʣ
44. 
     Scaffold AppBar Body
 (Container) ը໘࣮૷ͷϙΠϯτ ΢ΟδΣοτπϦʔͷཧղ
45. 
     Text Column Dropdown Button Text Field Raised Button Dropdown Button Text Field Scaffold AppBar Body
 (Container) େ͖ͳཁૉˠখ͞ͳཁૉͷॱʹઃܭ
46. 
     ը໘/ϨΠΞ΢τͰ͓͍͑ͨ͞ϙΠϯτ (a)΢ΟδΣοτਨ௚/ਫฏํ޲഑ஔ (b)΢ΟδΣοτͷ෯ௐ੔ (c)΢ΟδΣοτͷ૬ରൺ཰ࢦఆ
47. 
     (a)΢ΟδΣοτͷਨ௚/ਫฏํ޲഑ஔ LinearLayout (android:orientation) vertical horizontal
48. 
     (a)΢ΟδΣοτͷਨ௚/ਫฏํ޲഑ஔ Column / Row ΢ΟδΣοτ Column Row
49. 
     (b)΢ΟδΣοτͷ෯ௐ੔ wrap_content / match_parent wrap_content match_parent
50. 
     (b)΢ΟδΣοτͷ෯ௐ੔ CrossAxisAlignmentଐੑͷར༻ CrossAxisAlignment.start CrossAxisAlignment.stretch
51. 
     (c)΢ΟδΣοτͷ૬ରൺ཰ࢦఆ layout_weight layout_weight=“1” layout_weight=“2”
52. 
     (c)΢ΟδΣοτͷ૬ରൺ཰ࢦఆ Expanded+flexଐੑ Expanded΢ΟδΣοτ
 flex: 1 Expanded΢ΟδΣοτ
 flex: 2
53. 
     (c)΢ΟδΣοτͷ૬ରൺ཰ࢦఆ Expanded+flexଐੑͷར༻ྫ child: Container( child: Column( mainAxisSize: MainAxisSize.max, children: <Widget>[ Expanded( child: Container( child: Row( mainAxisSize: MainAxisSize.max, crossAxisAlignment: CrossAxisAlignment.stretch, children: <Widget>[button1], ), ), flex: 1, ), Expanded( child: Container( child: Row( mainAxisSize: MainAxisSize.max, crossAxisAlignment: CrossAxisAlignment.stretch, children: <Widget>[button2], ), ), flex: 2, ), ], ), ),
54. ϏδωεϩδοΫ࣮૷ͷϙΠϯτ ʢϑϨʔϜϫʔΫඪ४API͚ͩͰ͸ඇޮ཰ʣ ՝୊ᶄ
55. 
     ंྠͷൃ໌લʹʮϓϥάΠϯʯௐࠪ https://pub.dartlang.org/flutter
56. 
     ྫ͑͹ɺKey-Valueܗࣜͷσʔλอଘ ᶅ ᶃ ᶄ “sharedpreference”Ͱݕࡧ
57. 
     Android StudioͰͷૢ࡞ ᶃ ᶄ
58. 
     ϓϥάΠϯΛ༻͍࣮ͨ૷ྫ import 'package:shared_preferences/shared_preferences.dart'; _saveSampleData(String value) async {
 SharedPreferences prefs = await SharedPreferences.getInstance();
 await prefs.setString('key1', value);
 }
59. 
     ͓͢͢ΊϓϥάΠϯ •http •HTTP௨৴ •REST௨৴Λ؆ܿʹهड़
 •firebase •ΈΜͳେ޷͖Firebase •FlutterΞϓϦʹ΋FirebaseͷػೳΛ௥Ճ •share •ίϯςϯπͷshareػೳ •SNS΍ϝʔϧ࿈ܞΛ؆୯ʹ࣮ݱ shareػೳͷ࣮ݱྫ
60. 
     ϦϦʔεʹ༷ʑͳΞΠίϯඞཁ ʢख࡞ۀͰ४උ͢Δͷ΋໘౗ʣ ՝୊ᶅ
61. 
     σϑΥϧτ ΦϦδφϧ ΞΠίϯͷ४උ
62. 
     Android/iOS༻ΞΠίϯ छྨ͍ͬͺ͍
63. 
     ϓϥάΠϯ׆༻Ͱղܾ pubspec.yaml dev_dependencies: # ϥϯνϟʔΞΠίϯ flutter_launcher_icons: “^0.6.1" flutter_icons: android: true ios: true image_path: "images/icon.png"
64. 
     ࣮ߦͷྲྀΕ >flutter pub get >flutter pub pub run flutter_launcher_icons:main android/ios഑Լʹ΋Ζ΋ΖͷΞΠίϯ͕ੜ੒͞ΕΔʂ
65. 
     ɹAdaptive Iconsʹ΋ରԠ pubspec.yaml flutter_icons: android: true ios: "Example-Icon" image_path: "images/icon.png" image_path_android: "images/icon_android.png" image_path_ios: "images/icon_ios.png" adaptive_icon_background: "#FFFAFAFA" adaptive_icon_foreground: "images/icon-foreground.png"
66. ϦϦʔε࣌ʹଟݴޠରԠ͍ͨ͠ ʢ೔ຊޠ͚ͩʹ͢Δͷ͸ਖ਼௚ݫ͍͠ʣ ՝୊ᶆ
67. 
     ࠃࡍԽରԠ ଟݴޠରԠ͍ͤͨ͞ɻ
    ʢগͳ͘ͱ΋೔ຊޠʴӳޠʣ
68. 
     ެࣜαΠτʹ΍Γํ͋Δ͚Ͳ ͔ͳΓख͕ؒ…
69. 
     “Flutter i18n”(Android Studio༻ϓϥάΠϯ)ͷ׆༻ Android StudioͰ”flutter” Λݕࡧ
70. 
     3ͭͷStepʹ෼͚ͯղઆ
71. 
     Step0. ࣗಈੜ੒ϑΝΠϧͷ֬ೝ ϑΝΠϧ2͕ͭࣗಈੜ੒ ※ੜ੒͞Εͳ͍৔߹͸ɺϓϩδΣΫτΛดͯ͡࠶౓։͘
72. 
     Step0. ࣗಈੜ੒ϑΝΠϧͷ֬ೝ ྫ.lib/generated/i18n.dart
73. 
     Step1. σϑΥϧτݴޠͷઃఆ lib/main.dart
74. 
     Step2. ݴޠผϦιʔεͷ४උ res/values/
 strings_en.arb (←Λϕʔεʹstrings_ja.arb΋࡞੒) { "appTitle": "Flutter App", "appSumary": "Hello" } strings_en.arb strings_ja.arb { "appTitle": "ϑϥολʔΞϓϦ", "appSumary": “͜Μʹͪ͸" } ※ݴޠϦιʔεͷ௥Ճɾ࡟আ౳͸ɺstrings_*.arbͷϝϯςͷΈʂ
75. 
     Step3. ݴޠผϦιʔεͷར༻ lib/main.dart
76. 
     One more…
77. 
     CoolͳUI/UXͷ࣮ݱ
78. 
     UI/UXͷվળྫ
79. 
     •PaddingΛೖΕΔ •֎࿮Λ͚ͭΔ •ϥϕϧΛ௥Ճ͢Δ TextBox UI/UXͷվળྫ
80. 
     UI/UXͷվળྫ
81. 
     Padding( padding: EdgeInsets.all(8.0), child: TextField( controller: _controllerInput, decoration: new InputDecoration( labelText: '຋༁͍ͨ͠จষ', border: OutlineInputBorder()), ), ), ςΩετϘοΫεͷ૷০ͷ৔߹
82. 
     ΢ΟδΣοτ׆༻͕伴 TabBar BottomNavigationBar AnimatedOpacity
83. Flutter࠷৽τϐοΫ
84. Google DevelopersެࣜαΠτهࣄ(https://bit.ly/2A0tzuK)
    
85. 
     Google DevelopersެࣜαΠτهࣄܝࡌαϯϓϧ [RP2] Cupertino(iOS)ରԠ UP! • CupertinoApp • CupertinoTimerPicker • CupertinoSegmentedControl • CupertinoActionSheet • CupertinoNavigationBar • CupertinoSliverNavigationBar • CupertinoPageScaffold • CupertinoScrollbar • CupertinoPicker
86. 
     Summary •1ιʔεͰAndroid/iOS޲͚ΞϓϦ։ൃ •ϓϥάΠϯ׆༻Ͱޮ཰తͳ։ൃΛʂ •ϓϩμΫγϣϯద༻΋Մೳʂ
87. - Please let me know if you have any requests 
 such as technical speeches, technical writings and so on. Facebook:http://fb.com/kanbara.kenichi Google+:+Kenichi Kambara LinkedIn:http://www.linkedin.com/in/korodroid Twitter:@korodroid Thank you so much.