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.

of

[ABC2018Spring]Flutterアプリ開発入門 Slide 1 [ABC2018Spring]Flutterアプリ開発入門 Slide 2 [ABC2018Spring]Flutterアプリ開発入門 Slide 3 [ABC2018Spring]Flutterアプリ開発入門 Slide 4 [ABC2018Spring]Flutterアプリ開発入門 Slide 5 [ABC2018Spring]Flutterアプリ開発入門 Slide 6 [ABC2018Spring]Flutterアプリ開発入門 Slide 7 [ABC2018Spring]Flutterアプリ開発入門 Slide 8 [ABC2018Spring]Flutterアプリ開発入門 Slide 9 [ABC2018Spring]Flutterアプリ開発入門 Slide 10 [ABC2018Spring]Flutterアプリ開発入門 Slide 11 [ABC2018Spring]Flutterアプリ開発入門 Slide 12 [ABC2018Spring]Flutterアプリ開発入門 Slide 13 [ABC2018Spring]Flutterアプリ開発入門 Slide 14 [ABC2018Spring]Flutterアプリ開発入門 Slide 15 [ABC2018Spring]Flutterアプリ開発入門 Slide 16 [ABC2018Spring]Flutterアプリ開発入門 Slide 17 [ABC2018Spring]Flutterアプリ開発入門 Slide 18 [ABC2018Spring]Flutterアプリ開発入門 Slide 19 [ABC2018Spring]Flutterアプリ開発入門 Slide 20 [ABC2018Spring]Flutterアプリ開発入門 Slide 21 [ABC2018Spring]Flutterアプリ開発入門 Slide 22 [ABC2018Spring]Flutterアプリ開発入門 Slide 23 [ABC2018Spring]Flutterアプリ開発入門 Slide 24 [ABC2018Spring]Flutterアプリ開発入門 Slide 25 [ABC2018Spring]Flutterアプリ開発入門 Slide 26 [ABC2018Spring]Flutterアプリ開発入門 Slide 27 [ABC2018Spring]Flutterアプリ開発入門 Slide 28 [ABC2018Spring]Flutterアプリ開発入門 Slide 29 [ABC2018Spring]Flutterアプリ開発入門 Slide 30 [ABC2018Spring]Flutterアプリ開発入門 Slide 31 [ABC2018Spring]Flutterアプリ開発入門 Slide 32 [ABC2018Spring]Flutterアプリ開発入門 Slide 33 [ABC2018Spring]Flutterアプリ開発入門 Slide 34 [ABC2018Spring]Flutterアプリ開発入門 Slide 35 [ABC2018Spring]Flutterアプリ開発入門 Slide 36 [ABC2018Spring]Flutterアプリ開発入門 Slide 37 [ABC2018Spring]Flutterアプリ開発入門 Slide 38 [ABC2018Spring]Flutterアプリ開発入門 Slide 39 [ABC2018Spring]Flutterアプリ開発入門 Slide 40 [ABC2018Spring]Flutterアプリ開発入門 Slide 41 [ABC2018Spring]Flutterアプリ開発入門 Slide 42 [ABC2018Spring]Flutterアプリ開発入門 Slide 43 [ABC2018Spring]Flutterアプリ開発入門 Slide 44 [ABC2018Spring]Flutterアプリ開発入門 Slide 45 [ABC2018Spring]Flutterアプリ開発入門 Slide 46 [ABC2018Spring]Flutterアプリ開発入門 Slide 47 [ABC2018Spring]Flutterアプリ開発入門 Slide 48 [ABC2018Spring]Flutterアプリ開発入門 Slide 49 [ABC2018Spring]Flutterアプリ開発入門 Slide 50 [ABC2018Spring]Flutterアプリ開発入門 Slide 51 [ABC2018Spring]Flutterアプリ開発入門 Slide 52 [ABC2018Spring]Flutterアプリ開発入門 Slide 53 [ABC2018Spring]Flutterアプリ開発入門 Slide 54 [ABC2018Spring]Flutterアプリ開発入門 Slide 55 [ABC2018Spring]Flutterアプリ開発入門 Slide 56 [ABC2018Spring]Flutterアプリ開発入門 Slide 57 [ABC2018Spring]Flutterアプリ開発入門 Slide 58 [ABC2018Spring]Flutterアプリ開発入門 Slide 59 [ABC2018Spring]Flutterアプリ開発入門 Slide 60 [ABC2018Spring]Flutterアプリ開発入門 Slide 61 [ABC2018Spring]Flutterアプリ開発入門 Slide 62 [ABC2018Spring]Flutterアプリ開発入門 Slide 63 [ABC2018Spring]Flutterアプリ開発入門 Slide 64 [ABC2018Spring]Flutterアプリ開発入門 Slide 65 [ABC2018Spring]Flutterアプリ開発入門 Slide 66 [ABC2018Spring]Flutterアプリ開発入門 Slide 67 [ABC2018Spring]Flutterアプリ開発入門 Slide 68 [ABC2018Spring]Flutterアプリ開発入門 Slide 69 [ABC2018Spring]Flutterアプリ開発入門 Slide 70 [ABC2018Spring]Flutterアプリ開発入門 Slide 71 [ABC2018Spring]Flutterアプリ開発入門 Slide 72 [ABC2018Spring]Flutterアプリ開発入門 Slide 73 [ABC2018Spring]Flutterアプリ開発入門 Slide 74 [ABC2018Spring]Flutterアプリ開発入門 Slide 75 [ABC2018Spring]Flutterアプリ開発入門 Slide 76 [ABC2018Spring]Flutterアプリ開発入門 Slide 77 [ABC2018Spring]Flutterアプリ開発入門 Slide 78 [ABC2018Spring]Flutterアプリ開発入門 Slide 79 [ABC2018Spring]Flutterアプリ開発入門 Slide 80
Upcoming SlideShare
What to Upload to SlideShare
Next
Download to read offline and view in fullscreen.

6 Likes

Share

Download to read offline

[ABC2018Spring]Flutterアプリ開発入門

Download to read offline

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

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

[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.
  • HarunoYukinoshita

    Oct. 5, 2019
  • mono0926

    Jul. 28, 2018
  • yonedayoshio

    Jun. 13, 2018
  • gallberry

    Jun. 13, 2018
  • KuriharaJun

    Jun. 9, 2018
  • kogorou

    Jun. 9, 2018

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

Views

Total views

3,224

On Slideshare

0

From embeds

0

Number of embeds

1,388

Actions

Downloads

18

Shares

0

Comments

0

Likes

6

×