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

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