Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

[ABC2018Spring]Flutterアプリ開発入門

1,874 views

Published on

ABC 2018 Springでの発表資料「Flutterアプリ開発入門」のスライドです。

Published in: Technology

[ABC2018Spring]Flutterアプリ開発入門

  1. 1. 2018.06.09 (Kenichi Kambara) ABC 2018 Spring Flutter [Developing Flutter Apps]
  2. 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. 3. Agenda •Flutter •Flutter •Flutter •Flutter Tips
  4. 4. Flutter
  5. 5. Flutter iOS/Android SDK( )
  6. 6. Flutter UI/ Dart
  7. 7. UI/ iOS/Android UI https://flutter.io/showcase/
  8. 8. Flutter Showcase@Google I/O 2018
  9. 9. Flutter is a first-class toolkit for Material
  10. 10. https://flutter.io/get-started/editor/
  11. 11. (Hot Reload) https://flutter.io/hot-reload/
  12. 12. Dart Java/Java Script import 'package:flutter/material.dart'; void main() { runApp( new Center( child: new Text( ' Flutter', textDirection: TextDirection.ltr, ), ), ); }
  13. 13. Flutter
  14. 14. Beta3 6 ※ Google I/O 2018 Google I/O 2018 (5/8-10@Mountain View)
  15. 15. Google Developers (https://goo.gl/xfGjx1)
  16. 16. Medium (https://goo.gl/Eu89WS)
  17. 17. Flutter •Code beautiful UI with Flutter and Material Design https://www.youtube.com/watch?v=hA0hrpR-o8U •Total mobile development made fun with Flutter and Firebase https://www.youtube.com/watch?v=p4yLzYwy_4g [Day1] •Build reactive mobile apps with Flutter https://www.youtube.com/watch?v=RS36gBEp8OI •Add Firebase to your cross-platformReact Native or Flutter app https://www.youtube.com/watch?v=8wQ_MorYCEk •Customize Material Components for your product https://www.youtube.com/watch?v=3VUMl_l-_fI •Build great Material Design products across platforms https://www.youtube.com/watch?v=Ty6VjgVHiko [Day2] [Day3]
  18. 18. 1 •Code beautiful UI with Flutter and Material Design ➡Cool UI Flutter •Total mobile development made fun with Flutter and Firebase ➡Flutter+Firebase •Build reactive mobile apps with Flutter ➡ •Add Firebase to your cross-platformReact Native or Flutter app ➡Firebase React Native/Flutter •Customize Material Components for your product ➡Material Components UI/UX •Build great Material Design products across platforms ➡Material Design (Design/Develop/Tools)
  19. 19. Google I/O 2018 Flutter ↓ https://gdg-tokyo.connpass.com/event/84164/
  20. 20. Material Theming(https://material.io)
  21. 21. Material Theming With material theming, you can create a custom theme of material which is personalized for your product, expressing its brand through color, type, and shape.
  22. 22. Material Theming(https://material.io)
  23. 23. (1)Design
  24. 24. (1)Design
  25. 25. (2)Develop
  26. 26. (2)Develop
  27. 27. (3)Tools
  28. 28. (3)Tools
  29. 29. (3)Tools:Material Theme Editor Sketch Plugin
  30. 30. (3)Tools:Gallery(https://gallery.io) Collaboration Tool
  31. 31. (Google I/O 2018 ) Cuts on the cornerBottom app bar + FAB
  32. 32. Material Components
  33. 33. [ ] / •Code beautiful UI with Flutter and Material Design ➡Cool UI Flutter •Total mobile development made fun with Flutter and Firebase ➡Flutter+Firebase •Build reactive mobile apps with Flutter ➡ •Add Firebase to your cross-platformReact Native or Flutter app ➡Firebase React Native/Flutter •Customize Material Components for your product ➡Material Components UI/UX •Build great Material Design products across platforms ➡Material Design (Design/Develop/Tools)
  34. 34. [ ] •Code beautiful UI with Flutter and Material Design ➡Cool UI Flutter •Total mobile development made fun with Flutter and Firebase ➡Flutter+Firebase •Build reactive mobile apps with Flutter ➡ •Add Firebase to your cross-platformReact Native or Flutter app ➡React Native/Flutter Firebase •Customize Material Components for your product ➡Material Components UI/UX •Build great Material Design products across platforms ➡Material Design (Design/Develop/Tools)
  35. 35. Flutter
  36. 36. Hello Flutter
  37. 37. (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/
  38. 38. [ ]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)
  39. 39. ※Dart (2/2)
  40. 40. (1/7)
  41. 41. (2/7)
  42. 42. (3/7)
  43. 43. (4/7)
  44. 44. (5/7)
  45. 45. (6/7)
  46. 46. (7/7) • (*.dart) • •
  47. 47. Hello Flutter import 'package:flutter/material.dart'; void main() => runApp(new MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return new MaterialApp( title: 'Welcome to Flutter', home: new Scaffold( appBar: new AppBar( title: new Text(' Flutter'), ), body: new Center( child: new Text(' Flutter'), ), ), ); } } <project>/libs/main.dart
  48. 48. Hello Flutter import 'package:flutter/material.dart'; void main() => runApp(new MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return new MaterialApp( title: 'Welcome to Flutter', home: new Scaffold( appBar: new AppBar( title: new Text(' Flutter'), ), body: new Center( child: new Text(' Flutter'), ), ), ); } } Dart (LayoutXML, StoryBoard)
  49. 49. Hello Flutter import 'package:flutter/material.dart'; void main() => runApp(new MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return new MaterialApp( title: 'Welcome to Flutter', home: new Scaffold( appBar: new AppBar( title: new Text(' Flutter'), ), body: new Center( child: new Text(' Flutter'), ), ), ); } } UI
  50. 50. Text AppBar 
 Body
 (Center) Scaffold Text
  51. 51. Dart2 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'), ), ), ); } } new const
  52. 52. 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
  53. 53. Flutter Tips
  54. 54. 1. Hot Reload Save
  55. 55. 1. Hot Reload (Plugins->Flutter)
  56. 56. 1. Hot Reload
  57. 57. 2.
  58. 58. Scaffold AppBar Body
 (Container) 2.
  59. 59. Text Column Dropdown Button Text Field Raised Button Dropdown Button Text Field Scaffold AppBar Body
 (Container) 2.
  60. 60. 3. OS
  61. 61. final ThemeData iOSTheme = ThemeData( primarySwatch: Colors.grey, accentColor: Color(0xFFFF4081), ); final ThemeData defaultTheme = ThemeData( primarySwatch: Colors.blue, accentColor: Color(0xFFFF4081) ); void main() { runApp(MaterialApp( title: ' ', theme: defaultTargetPlatform == TargetPlatform.iOS ? iOSTheme : defaultTheme, home: TaxCalc() )); } 3. OS
  62. 62. 4.
  63. 63. 4. https://pub.dartlang.org/flutter
  64. 64. 4.
  65. 65. 4. (Android Studio )
  66. 66. 4. import 'package:shared_preferences/shared_preferences.dart'; _saveSampleData(String value) async {
 SharedPreferences prefs = await SharedPreferences.getInstance();
 await prefs.setString('key1', value);
 }
  67. 67. 4. •shared_preferences • •SharedPreferences(Android) NSUserDefaults(iOS) 
 •http •HTTP •REST 
 •firebase • Firebase •Flutter Firebase
  68. 68. 5.
  69. 69. 5. Inspector
  70. 70. 6. … class MainPage extends StatefulWidget { @override _MainPageState createState() => _MainPageState(); } class _MainPageState extends State<MainPage> { @override Widget build(BuildContext context) { return Container(); } } class SubPage extends StatelessWidget { @override Widget build(BuildContext context) { return Container(); } }
  71. 71. 6. Live Templates stless/stfull/stanim+[Tab]
  72. 72. 7. Flutter
  73. 73. 7. Flutter
  74. 74. 7. Codelabs https://codelabs.developers.google.com/?cat=Flutter
  75. 75. 7. Codelabs 
 Flutter 
 Write Your First Flutter App
 
 Flutter Building Beautiful UIs with Flutter
 MDC Series 101/102/103/104 9
  76. 76. Summary •1 Android/iOS •Flutter ❤ Material •
  77. 77. References •Flutter
 https://flutter.io
 •Google Codelabs (Flutter)
 https://codelabs.developers.google.com/?cat=Flutter
 •Flutter Sessions on I/O 2018
 https://events.google.com/io/schedule/?topic=flutter
 •Flutter @I/O Extended 2018 Tokyo https://gdg-tokyo.connpass.com/event/84164/
  78. 78. - 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.

×