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

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

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

97a7f7899e0df28c3636b8d44bbe6578?s=128

Kenichi Kambara

October 13, 2018
Tweet

Transcript

  1. 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)
  2. 7.

      Flutter׆ಈঢ়گ(StackOverflow) Number of StackOverflow question views tagged with

    each of four popular UI frameworks over time (https://bit.ly/2A0tzuK)
  3. 15.

    ᶅݴޠ͸Dart Java/Java Scriptܦݧऀʹ͸ೃછΈ΍͍͢ݴޠ import 'package:flutter/material.dart'; void main() { runApp( new

    Center( child: new Text( '͜Μʹͪ͸ɺFlutter', textDirection: TextDirection.ltr, ), ), ); }  
  4. 16.

    ᶅݴޠ͸Dart Java/Java Scriptܦݧऀʹ͸ೃછΈ΍͍͢ݴޠ import 'package:flutter/material.dart'; void main() { runApp( new

    Center( child: new Text( '͜Μʹͪ͸ɺFlutter', textDirection: TextDirection.ltr, ), ), ); }  
  5. 17.

    ᶅݴޠ͸Dart Java/Java Scriptܦݧऀʹ͸ೃછΈ΍͍͢ݴޠ import 'package:flutter/material.dart'; void main() { runApp( new

    Center( child: new Text( '͜Μʹͪ͸ɺFlutter', textDirection: TextDirection.ltr, ), ), ); }  
  6. 18.

    ᶅݴޠ͸Dart Java/Java Scriptܦݧऀʹ͸ೃછΈ΍͍͢ݴޠ import 'package:flutter/material.dart'; void main() { runApp( new

    Center( child: new Text( '͜Μʹͪ͸ɺFlutter', textDirection: TextDirection.ltr, ), ), ); }  
  7. 19.

    ᶅݴޠ͸Dart Java/Java Scriptܦݧऀʹ͸ೃછΈ΍͍͢ݴޠ import 'package:flutter/material.dart'; void main() { runApp( new

    Center( child: new Text( '͜Μʹͪ͸ɺFlutter', textDirection: TextDirection.ltr, ), ), ); }  
  8. 20.

    ᶅݴޠ͸Dart Dart͸ver.2ʹͳΓnewΛলུՄೳʹ import 'package:flutter/material.dart'; void main() { runApp( new Center(

    child: new Text( '͜Μʹͪ͸ɺFlutter', textDirection: TextDirection.ltr, ), ), ); }   ※ఆ਺Λද͢const΋লུՄೳ
  9. 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/  
  10. 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) ରॲ๏΋ڭ͑ͯ͘ΕΔؾ͕ޮౕ͘ʂ  
  11. 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Λˣʹॻ͖׵͑  
  12. 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)  
  13. 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ͷؔ܎ʹ஫໨  
  14. 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Λར༻ͯ͠ঢ়ଶ؅ཧ  
  15. 41.

      (1)DartݴޠΛ௚઀༻͍Δํࣜ import 'package:flutter/material.dart'; void main() { runApp( new

    Center( child: new Text( '͜Μʹͪ͸ɺFlutter', textDirection: TextDirection.ltr, ), ), ); } ίʔυهड़ˠHot ReloadͰ֬ೝ
  16. 45.

      Text Column Dropdown Button Text Field Raised Button

    Dropdown Button Text Field Scaffold AppBar Body
 (Container) େ͖ͳཁૉˠখ͞ͳཁૉͷॱʹઃܭ
  17. 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, ), ], ), ),
  18. 64.

      ࣮ߦͷྲྀΕ >flutter pub get >flutter pub pub run

    flutter_launcher_icons:main android/ios഑Լʹ΋Ζ΋ΖͷΞΠίϯ͕ੜ੒͞ΕΔʂ
  19. 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"
  20. 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ͷϝϯςͷΈʂ
  21. 81.

      Padding( padding: EdgeInsets.all(8.0), child: TextField( controller: _controllerInput, decoration:

    new InputDecoration( labelText: '຋༁͍ͨ͠จষ', border: OutlineInputBorder()), ), ), ςΩετϘοΫεͷ૷০ͷ৔߹
  22. 85.

      Google DevelopersެࣜαΠτهࣄܝࡌαϯϓϧ [RP2] Cupertino(iOS)ରԠ UP! • CupertinoApp •

    CupertinoTimerPicker • CupertinoSegmentedControl • CupertinoActionSheet • CupertinoNavigationBar • CupertinoSliverNavigationBar • CupertinoPageScaffold • CupertinoScrollbar • CupertinoPicker
  23. 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.