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

1. 2018.06.09
(Kenichi Kambara)
ABC 2018 Spring
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
•Flutter Tips

4. Flutter

5. Flutter
iOS/Android
SDK( )

6. Flutter
UI/
Dart

7. UI/
iOS/Android UI
https://flutter.io/showcase/

8. Flutter Showcase@Google I/O 2018

9. Flutter is a first-class toolkit for Material

10. https://flutter.io/get-started/editor/

11. (Hot Reload)
https://flutter.io/hot-reload/

12. Dart
Java/Java Script
import 'package:flutter/material.dart';
void main() {
runApp(
new Center(
child: new Text(
' Flutter',
textDirection: TextDirection.ltr,
),
),
);
}

13. Flutter

14. Beta3 6
※ Google I/O 2018
Google I/O 2018
(5/8-10@Mountain View)

15. Google Developers (https://goo.gl/xfGjx1)

16. Medium (https://goo.gl/Eu89WS)

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. 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. Google I/O 2018 Flutter
↓
https://gdg-tokyo.connpass.com/event/84164/

20. Material Theming(https://material.io)

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. Material Theming(https://material.io)

23. (1)Design

24. (1)Design

25. (2)Develop

26. (2)Develop

27. (3)Tools

28. (3)Tools

29. (3)Tools:Material Theme Editor
Sketch Plugin

30. (3)Tools:Gallery(https://gallery.io)
Collaboration Tool

32. (Google I/O 2018 )
Cuts on the cornerBottom app bar + FAB

33. Material Components

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
➡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)

35. [ ]
•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)

36. Flutter

37. Hello Flutter

38. (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/

39. [ ]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)

40. ※Dart
(2/2)

41. (1/7)

42. (2/7)

43. (3/7)

44. (4/7)

45. (5/7)

46. (6/7)

47. (7/7)
• (*.dart)
•
•

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'),
),
),
);
}
}
<project>/libs/main.dart

50. 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)

51. 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

52. Text
AppBar
Body
(Center)
Scaffold
Text

53. 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

54. 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

55. Flutter Tips

56. 1. Hot Reload
Save

57. 1. Hot Reload
(Plugins->Flutter)

58. 1. Hot Reload

59. 2.

60. Scaffold
AppBar
Body
(Container)
2.

61. Text Column
Dropdown
Button
Text
Field
Raised
Button
Dropdown
Button
Text
Field
Scaffold
AppBar
Body
(Container)
2.

62. 3. OS

63. 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

64. 4.

65. 4.
https://pub.dartlang.org/flutter

66. 4.

67. 4. (Android Studio )

68. 4.
import 'package:shared_preferences/shared_preferences.dart';
_saveSampleData(String value) async {
SharedPreferences prefs = await SharedPreferences.getInstance();
await prefs.setString('key1', value);
}

69. 4.
•shared_preferences
•
•SharedPreferences(Android) NSUserDefaults(iOS)
•http
•HTTP
•REST
•firebase
• Firebase
•Flutter Firebase

70. 5.

71. 5. Inspector

72. 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();
}
}

73. 6. Live Templates
stless/stfull/stanim+[Tab]

74. 7. Flutter

75. 7. Flutter

76. 7. Codelabs
https://codelabs.developers.google.com/?cat=Flutter

77. 7. Codelabs
Flutter
Write Your First Flutter App
Flutter
Building Beautiful UIs with Flutter
MDC Series 101/102/103/104
9

78. Summary
•1 Android/iOS
•Flutter ❤ Material
•

79. 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/

80. - 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.