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

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

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

97a7f7899e0df28c3636b8d44bbe6578?s=128

Kenichi Kambara

October 13, 2018
Tweet

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.