【東北TECH道場オンライン講座】Flutterアプリ開発入門

【東北TECH道場オンライン講座】で発表させていただいた資料です。「Flutterアプリ開発入門」についてです。

#東北TECH道場 #flutterjp

Transcript

1. 2020.08.18 Kenichi Kambara (@korodroid) FlutterΞϓϦ։ൃೖ໳ ౦๺TECHಓ৔ΦϯϥΠϯߨ࠲
2. About me •Mobile App Development •Technical Speeches •Technical Writings •[Official] Evangelist at NTT TechnoCross •[Private] iplatform.org Kenichi Kambara (@korodroid)
3. About my product (Private works) Sekaiphone(Kotlin/Swift+Firebase) MyToDo(Flutter+Firebase)
4. •Flutter֓ཁ •Flutterͷ͸͡Ίํ •FlutterΞϓϦ։ൃೖ໳ •FlutterΞϓϦ։ൃ࣮ફ Agenda
5. օ༷΁ͷΞϯέʔτ(Y/N) 1. AndroidΞϓϦΛ࡞ͬͨ͜ͱ͕͋Δʁ(Kotlin/Java) 2. iOSΞϓϦΛ࡞ͬͨ͜ͱ͕͋Δʁ(Swift/Objective-C) 3. Hello FlutterΛ΍ͬͨ͜ͱ͋Δʁ 4. FlutterͰΞϓϦΛ࡞ͬͨ͜ͱ͕͋Δʁ
6. Flutter֓ཁ
7. Flutter ڞ௨ͷιʔεͰiOS/Android౳޲͚ΞϓϦΛ ։ൃͰ͖ΔSDK(ΫϩεϓϥοτϑΥʔϜ) 
8. ϞόΠϧ୺຤γΣΞ(୺຤ΞΫηεϕʔε) StatCounter (http://gs.statcounter.com/os-market-share/mobile/worldwide) 
9. ΫϩεϓϥοτϑΥʔϜΛऔΓר͘ঢ়گ Number of StackOverflow question views tagged with each of four popular UI frameworks over time (https://bit.ly/2A0tzuK) 
10. Flutterͷಛ௃ 1.ඒ͍͠UI/ߴ͍࣮ߦੑೳ 2.ߴ͍։ൃޮ཰ 3.ݴޠ͸Dart 
11. 1.ඒ͍͠UI/ߴ͍࣮ߦੑೳ  https://flutter.dev/showcase iOS/Android޲͚ͷࣗલUI
12.  1.ඒ͍͠UI/ߴ͍࣮ߦੑೳ Flutter Showcase@Google I/O 2018
13. 2.ߴ͍։ൃޮ཰ ίʔυมߋΛଈ൓ө(Hot Reload) 
14. 3.ݴޠ͸Dart Java/Java Scriptܦݧऀʹ͸ೃછΈ΍͍͢ݴޠ import 'package:flutter/material.dart'; void main() { runApp( Center( child: Text( '͜Μʹͪ͸ɺFlutter', textDirection: TextDirection.ltr, ), ), ); } 
15. Flutterͷ͸͡Ίํ
16. Hello Flutter 
17. ։ൃ؀ڥ ※ίϚϯυϥΠϯͳͲଞʹ΋खஈ͸৭ʑ͋Γ·͢ɻ  •Webϒϥ΢β •DartPad •IDE •Android Studio •Visual Studio Code •IntelliJ IDEA
18. ͬ͘͞ͱ։࢝ •Webϒϥ΢β •DartPad •IDE •Android Studio •Visual Studio Code •IntelliJ IDEA طʹܦݧ͋Ε͹ ͪ͜ΒͰ  ։ൃ؀ڥ
19. DartPadฤ ίʔυΛॻ͍ͯɺͬ͘͞ͱಈ࡞֬ೝ ※Github Gistʹ΋ରԠ  https://dartpad.dev
20. Dart͚ͩͰͳ͘Flutterʹ΋ରԠʂ  DartPadฤ
21. σϞ 1 [DartPadΛ৮ͬͯΈΔ]
22. Android Studioฤ 1.Flutter SDKͷೖख $ git clone https://github.com/flutter/flutter.git 2. PATHͷ௥Ճ $ export PATH=`pwd`/flutter/bin:$PATH 3.ηοτΞοϓঢ়گͷνΣοΫ $ flutter doctor https://flutter.dev/get-started/install/ zip൛΋͋ΓɻࠔͬͨΒɺflutter doctor 
23. [ิ଍]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) 
24. Android Studioฤ ϓϥάΠϯಋೖͰ։ൃ͕ศརʹ 
25. ΞϓϦ։ൃ(΢ΟβʔυʹԊͬͯ਽ܗ࡞੒) 
26. ΞϓϦ։ൃ(΢Οβʔυ1/4) 
27.  ΞϓϦ։ൃ(΢Οβʔυ2/4)
28. ΞϓϦ։ൃ(΢Οβʔυ3/4) 
29. ΞϓϦ։ൃ(΢Οβʔυ4/4) 
30. ΞϓϦ։ൃ(ςϯϓϨʔτͷ࣮ߦ݁Ռ) 
31. ΞϓϦߏ੒  •ιʔείʔυ(*.dart) •ύοέʔδఆٛ •Ϧιʔεఆٛ
32. σϞ 2 [FlutterΞϓϦΛߏ੒͢ΔϑΝΠϧ]
33. FlutterΞϓϦ։ൃೖ໳
34. Hello Flutter <project>/lib/main.dartΛˣʹॻ͖׵͑  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'), ), ), ); } }
35. σϞ 3 [FlutterΞϓϦͷ࣮૷ˠ࣮ߦ]
36. Hello Flutter ը໘ͷ։ൃ΋Dart(LayoutXML, StoryBoard)  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'), ), ), ); } }
37. Hello Flutter ίʔυͱUIͷؔ܎ʹ஫໨  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'), ), ), ); } }
38. πϦʔߏ଄Ͱߟ͑Δ ߏ੒ཁૉ͸શͯWidget(΢ΟδΣοτ)  Text AppBar Body Scaffold Text Center
39. StateΛར༻ͯ͠ঢ়ଶ؅ཧ [Ԡ༻]ಈతͳը໘ߋ৽ˠ(·ͣ͸)StatefulWidget  import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: MyHomePage(title: 'Welcome to Flutter'), ); } } class MyHomePage extends StatefulWidget { MyHomePage({Key key, this.title}) : super(key: key); final String title; @override _MyHomePageState createState() => _MyHomePageState(); } class _MyHomePageState extends State<MyHomePage> { int _counter = 0; void _incrementCounter() { setState(() { _counter++; }); } …(লུ)…
40. FlutterΞϓϦ։ൃ࣮ફ
41. FlutterͷϓϩμΫγϣϯద༻ ʢ։ൃˠϦϦʔεͰ৐Γӽ͑Δ΂͖՝୊ʣ 
42. ϓϩμΫγϣϯద༻Ͱ৐Γӽ͑Δ΂͖՝୊ ᶃը໘/ϨΠΞ΢τ ᶄϏδωεϩδοΫ 
43. ՝୊ᶃ  FlutterͷUIߏங͸ಛघʁʂ ʢAndroid/iOSωΠςΟϒ԰ͷࢹ఺ʣ
44. ը໘/ϨΠΞ΢τͷ࣮૷  ※྆ऀΛ૊Έ߹ΘͤΔํ๏΋͋Γ 1. DartݴޠΛ௚઀༻͍Δํࣜ 2. GUIΤσΟλΛ༻͍Δํࣜ
45. 1. DartݴޠΛ௚઀༻͍Δํࣜ ίʔυهड़ˠHot ReloadͰ֬ೝ  import 'package:flutter/material.dart'; void main() { runApp( Center( child: Text( '͜Μʹͪ͸ɺFlutter', textDirection: TextDirection.ltr, ), ), ); }
46. 2. GUIΤσΟλΛ༻͍Δํࣜ Flutter Studio (WebΞϓϦ)ͷར༻  https://flutterstudio.app/
47. σϞ 4 [Flutter Studio ࣮ԋ]
48. ͕ɺͦΜͳʹ؁͘ͳ͍… ʢDartίʔυΛ௚઀৮ΔεΩϧ͸ඞਢʣ 
49. ը໘࣮૷ͷϙΠϯτ ΢ΟδΣοτπϦʔͷཧղ  Scaffold AppBar Body (Container)
50. େ͖ͳཁૉˠখ͞ͳཁૉͷॱʹઃܭ  Text Column Dropdown Button Text Field Raised Button Dropdown Button Text Field Scaffold AppBar Body (Container)
51. ը໘/ϨΠΞ΢τͰ͓͍͑ͨ͞ϙΠϯτ  a. ΢ΟδΣοτਨ௚/ਫฏํ޲഑ஔ b. ΢ΟδΣοτͷ෯ௐ੔ c. ΢ΟδΣοτͷ૬ରൺ཰ࢦఆ
52. a. ΢ΟδΣοτͷਨ௚/ਫฏํ޲഑ஔ  LinearLayout (android:orientation) vertical horizontal
53. a. ΢ΟδΣοτͷਨ௚/ਫฏํ޲഑ஔ  Column Row Column / Row ΢ΟδΣοτ
54. b. ΢ΟδΣοτͷ෯ௐ੔  wrap_content match_parent wrap_content / match_parent
55. b. ΢ΟδΣοτͷ෯ௐ੔  CrossAxisAlignment.start CrossAxisAlignment.stretch CrossAxisAlignmentଐੑͷར༻
56. c. ΢ΟδΣοτͷ૬ରൺ཰ࢦఆ  layout_weight layout_weight=“1” layout_weight=“2”
57. c. ΢ΟδΣοτͷ૬ରൺ཰ࢦఆ  Expanded+flexଐੑ Expanded΢ΟδΣοτ flex: 1 Expanded΢ΟδΣοτ flex: 2
58. 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, ), ], ), ),
59. ՝୊ᶄ  ϏδωεϩδοΫ࣮૷ͷϙΠϯτ ʢϑϨʔϜϫʔΫඪ४API͚ͩͰ͸ඇޮ཰ʣ
60. ंྠͷൃ໌લʹʮύοέʔδʯௐࠪ  https://pub.dev/
61. ྫ͑͹ɺKey-Valueܗࣜͷσʔλอଘ “sharedpreference”Ͱݕࡧ  3 1 2
62. “^0.5.8” Android StudioͰͷઃఆ  1 2
63. ύοέʔδΛར༻࣮ͨ͠૷ྫ  import 'package:shared_preferences/shared_preferences.dart'; _saveSampleData(String value) async { SharedPreferences prefs = await SharedPreferences.getInstance(); await prefs.setString('key1', value); }
64. Flutterೖ໳࣌ʹ͓͍͑ͨ͞Dartཁૉ  • _ (privateʹ૬౰) • https://dart.dev/guides/language/language-tour#libraries-and-visibility • .. (Χεέʔυه๏) • https://dart.dev/guides/language/language-tour#cascade-notation- • … (Spreadԋࢉࢠ) • https://dart.dev/guides/language/language-tour#spread-operator • Future / Stream (ඇಉظॲཧ) • https://dart.dev/tutorials/language/streams ref. Dart Official Site https://dart.dev/
65. One More…
66. CoolͳUI/UXͷ࣮ݱ
67. UI/UXͷվળྫ 
68. UI/UXͷվળྫ  •PaddingΛೖΕΔ •֎࿮Λ͚ͭΔ •ϥϕϧΛ௥Ճ͢Δ TextBox
69. UI/UXͷվળྫ 
70. ςΩετϘοΫεͷ૷০ͷ৔߹  Padding( padding: EdgeInsets.all(8.0), child: TextField( controller: _controllerInput, decoration: InputDecoration( labelText: '຋༁͍ͨ͠จষ', border: OutlineInputBorder()), ), ),
71. ΢ΟδΣοτ׆༻͕伴  TabBar BottomNavigationBar AnimatedOpacity
72. Summary •1ιʔεͰAndroid/iOS޲͚ΞϓϦ։ൃ •ϓϩμΫγϣϯద༻΋Մೳ •ଞʹ΋৭ʑɺͰ΋ΞϓϦ1ຊ࡞Δͱྑ͍͔΋  ྫ)ΞʔΩςΫνϟɺΫϥ΢υ࿈ܞͳͲ
73. •Flutter https://flutter.dev •Google Codelabs (Flutter) https://codelabs.developers.google.com/?cat=Flutter Reference 
74. Please let me know if you have any requests such as technical speeches, technical writings and so on. Facebook:http://fb.com/kanbara.kenichi Twitter:@korodroid LinkedIn:http://www.linkedin.com/in/korodroid Thank you so much