Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

This is my presentation file on NTT Tech Conference 5.

#NTTtech
#flutterjp
#flutter

97a7f7899e0df28c3636b8d44bbe6578?s=128

Kenichi Kambara

February 26, 2021
Tweet

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