[NTT Tech Conference]Flutterアプリ開発スタートアップwithTips

This is my presentation file on NTT Tech Conference 5.

#NTTtech
#flutterjp
#flutter

Transcript

1. 2021.02.26 Kenichi Kambara (@korodroid) FlutterΞϓϦ։ൃελʔτΞοϓ with Tips
2. About me •Mobile App Development •Speeches (e.g. 9 International confs.) •Writings (e.g. 5 Dev Books) •[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ͷ͸͡Ίํ •ޮ཰తͳ։ൃͷਐΊํ(Tipsू) Agenda
5. Flutter֓ཁ
6. Flutter ڞ௨ͷιʔεͰiOS/Android౳޲͚ΞϓϦΛ ։ൃͰ͖ΔSDK(ΫϩεϓϥοτϑΥʔϜ)  ※σεΫτοϓ/WebରԠ΋ਐߦத
7. Flutterͷಛ௃ 1.ඒ͍͠UI/ߴ͍࣮ߦੑೳ 2.ߴ͍։ൃޮ཰ 3.ݴޠ͸Dart 
8. 1.ඒ͍͠UI/ߴ͍࣮ߦੑೳ https://flutter.dev/showcase iOS/Android޲͚ͷࣗલUI(≠ϥούʔ) 
9. 2.ߴ͍։ൃޮ཰ ίʔυมߋΛଈ൓ө(Hot Reload) 
10. 3.ݴޠ͸Dart Java/Java Scriptܦݧऀʹ͸ೃછΈ΍͍͢ݴޠ(UI࡞Γ΋Dart) import 'package:flutter/material.dart'; void main() { runApp( Center( child: Text( '͜Μʹͪ͸ɺFlutter', textDirection: TextDirection.ltr, ), ), ); } 
11. Flutterͷ͸͡Ίํ
12. ·ͣ͸ײ֮Λ௫Ή (࿅शʹ͓͢͢Ί) ։ൃ؀ڥ 1. IDEΛར༻͢Δํ๏ •Android Studio •Visual Studio Code •IntelliJ IDEA 2. IDEΛར༻͠ͳ͍ํ๏ •Flutter Studio
 &DartPad ࢖͍׳Ε͍ͯΕ͹ ࠷ॳ͔Βͪ͜ΒͰ 
13. ·ͣ͸ײ֮Λ௫Ή (࿅शʹ͓͢͢Ί) ։ൃ؀ڥ 1. IDEΛར༻͢Δํ๏ •Android Studio •Visual Studio Code •IntelliJ IDEA 2. IDEΛར༻͠ͳ͍ํ๏ •Flutter Studio
 &DartPad ࢖͍׳Ε͍ͯΕ͹ ࠷ॳ͔Βͪ͜ΒͰ 
14. (ຊདྷ͸DartͰUI࡞Γ)GUIπʔϧΛ࢖ͬͯɺUIσβΠϯՄೳ 1. ը໘Λ࡞Δ(Flutter Studio) 
15. Web্ͰDartίʔσΟϯά&Flutterʹ΋ରԠ  2. ࣮ߦ͢Δ(DartPad)
16. ·ͣ͸ײ֮Λ௫Ή (࿅शʹ͓͢͢Ί) ։ൃ؀ڥ 1. IDEΛར༻͢Δํ๏ •Android Studio •Visual Studio Code •IntelliJ IDEA 2. IDEΛར༻͠ͳ͍ํ๏ •Flutter Studio
 &DartPad ࢖͍׳Ε͍ͯΕ͹ ࠷ॳ͔Βͪ͜ΒͰ 
17. ։ൃ؀ڥߏஙˠΞϓϦ࣮ߦ͸͕ͬͭΓলུ ʢৄࡉ͸ެࣜαΠτ౳Ͱ🙇ʣ 
18. ೖ໳࣌ʹԡ͍͑ͨ͞ϙΠϯτ •FlutterΞϓϦͷϑΝΠϧߏ੒ •ը໘ͷ࡞Γํ •ϏδωεϩδοΫͷޮ཰తͳ࣮૷
19. FlutterΞϓϦͷϑΝΠϧߏ੒  ιʔείʔυ(*.dart) •ϥΠϒϥϦఆٛ •Ϧιʔεఆٛ(ը૾ͳͲ)
20. ը໘ͷ։ൃ΋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'), ), ), ); } }
21. એݴతUIϑϨʔϜϫʔΫ 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'), ), ), ); } }
22. πϦʔߏ଄Ͱେ͖ͳཁૉˠখ͞ͳཁૉͷॱংͰ ߏ੒ཁૉ͸શͯWidget(΢ΟδΣοτ)  Text AppBar 
 Body Scaffold Text Center
23. 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++; }); } …(লུ)…
24. ϏδωεϩδοΫͷޮ཰తͳ࣮૷  https://pub.dev/ ंྠͷൃ໌લʹʮύοέʔδʯௐࠪ
25. ྫ͑͹ɺKey-Valueܗࣜͷσʔλอଘ “sharedpreference”Ͱݕࡧ  3 1 2 pubspec.yaml΁ͷఆٛํ๏ Πϯετʔϧํ๏
 (IDEͳΒಉظϘλϯԡ͚ͩ͢) ϥΠϒϥϦͷΠϯϙʔτ
26. “^0.5.8” Android StudioͰͷૢ࡞  1 2
27. ύοέʔδΛར༻࣮ͨ͠૷ྫ  import 'package:shared_preferences/shared_preferences.dart'; _saveSampleData(String value) async {
 SharedPreferences prefs = await SharedPreferences.getInstance();
 await prefs.setString('key1', value);
 }
28. 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/
29. ޮ཰తͳ։ൃͷਐΊํ(Tipsू)
30. FlutterΞϓϦ։ൃͷߴ଎Խ ίʔσΟϯάฤ ศརϓϥάΠϯฤ ※ࠓճ͸Android StudioΛར༻͠·͢ɻ
31. ίʔσΟϯάฤ
32. [Before]΢ΟδΣοτΛશͯखॻ͖ class MainPage extends StatelessWidget { @override Widget build(BuildContext context) { return Container(); } } // Stateless Widget 
33. stless/stfull/stanim+[Tab] Key [After 1] ϥΠϒςϯϓϨʔτͷ׆༻ 
34. [After 1] ϥΠϒςϯϓϨʔτͷ׆༻ 
35. [After 2] Flutter Snippets ΑΓଟ͘ͷςϯϓϨʔτ 
36. [After 3] ࣗલςϯϓϨʔτ Α͘࢖͏΋ͷ͸ɺࣗ෼Ͱ᪳᪯ͳ͘ొ࿥ʂ 
37. Ϣʔεέʔε:ը໘ͷվ଄ 
38. Select Widget & ALT+ENTER [After 4] ίʔυΞγετػೳͷ׆༻ 
39. ศརϓϥάΠϯฤ
40. [Plugin 1] FlutterGen ΞηοτɾϑΥϯτɾΧϥʔ౳ͷ؅ཧࢧԉ [wasabeef͞Μ]https://github.com/FlutterGen/flutter_gen // Before class MainPage extends StatelessWidget { @override Widget build(BuildContext context) { return Image.asset("assets/images/chara1.png"); } } // After 
41. [Plugin 2] Flutter Enhancement Suite ύοέʔδͷಋೖࢧԉ [Marius Höfler͞Μ]https://plugins.jetbrains.com/plugin/12693-flutter-enhancement-suite 
42. [Plugin 3] FlutterJsonBeanFactory JSONͷར༻ࢧԉ [zhangruiyu͞Μ]https://plugins.jetbrains.com/plugin/11415-flutterjsonbeanfactory 
43. •ϝϯςφϯε͠қ͍UIͷ࡞Γํ
 ʢ֊૚Λਂ͘͠ա͗ͳ͍Α͏ʹϩδοΫ෼ׂʣ •ΞϓϦͷঢ়ଶ؅ཧ
 ɹ(Provider/Riverpod/BLoC౳)  [Ԡ༻]࣍ʹԡ͍͑ͨ͞ϙΠϯτ
44. Conclusion  •1ιʔεͰAndroid/iOS+αΞϓϦ։ൃ •ϓϩμΫγϣϯద༻΋Մೳ •TipsΛϑϧ׆༻ͯ͠ޮ཰తͳ։ൃΛʂ
45.  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