Slide 1
Slide 1 text
2018.10.13
ਆݪɹ݈Ұ(Kenichi Kambara)
ABC 2018 Autumn
FlutterΞϓϦ։ൃ ࣮ફฤ
[Developing Flutter Apps]
Slide 2
Slide 2 text
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)
Slide 3
Slide 3 text
Agenda
•Flutter֓ཁ/ΞϓϦ։ൃೖ
•FlutterΞϓϦ։ൃ࣮ફ
•Flutter࠷৽τϐοΫ
Slide 4
Slide 4 text
ɹօ༷ͷΞϯέʔτ
1.Hello FlutterΛͬͨ͜ͱ͋Δਓʁ
2.FlutterͰ؆୯ͳΞϓϦΛ࡞ͬͨ͜ͱ͕͋Δਓʁ
3.FlutterͰΞϓϦΛϦϦʔεࡁͷਓʁ
?
Slide 5
Slide 5 text
Flutter֓ཁ/ΞϓϦ։ൃೖ
Slide 6
Slide 6 text
Flutter
ڞ௨ͷιʔεͰiOS/AndroidΞϓϦΛ
։ൃͰ͖ΔSDK(ΫϩεϓϥοτϑΥʔϜ)
Slide 7
Slide 7 text
Flutter׆ಈঢ়گ(StackOverflow)
Number of StackOverflow question views tagged with each of four popular UI frameworks over time
(https://bit.ly/2A0tzuK)
Slide 8
Slide 8 text
Flutterͷಛ
ᶃඒ͍͠UI/ߴ͍࣮ߦੑೳ
ᶄߴ͍։ൃޮ
ᶅݴޠDart
Slide 9
Slide 9 text
ᶃඒ͍͠UI/ߴ͍࣮ߦੑೳ
iOS/Android͚ͷࣗલUI
https://flutter.io/showcase/
Slide 10
Slide 10 text
Flutter Showcase@Google I/O 2018
Slide 11
Slide 11 text
ᶄߴ͍։ൃޮ
https://flutter.io/get-started/editor/
Slide 12
Slide 12 text
ᶄߴ͍։ൃޮ
ίʔυมߋΛଈө(Hot Reload)
https://flutter.io/hot-reload/
Slide 13
Slide 13 text
ᶄߴ͍։ൃޮ
ઃఆΛ༧Ί֬ೝ(Plugins->Flutter)
Slide 14
Slide 14 text
ᶄߴ͍։ൃޮ
ڍಈ͕͓͔͘͠ͳͬͨΒɺ
Slide 15
Slide 15 text
ᶅݴޠDart
Java/Java ScriptܦݧऀʹೃછΈ͍͢ݴޠ
import 'package:flutter/material.dart';
void main() {
runApp(
new Center(
child: new Text(
'͜ΜʹͪɺFlutter',
textDirection: TextDirection.ltr,
),
),
);
}
Slide 16
Slide 16 text
ᶅݴޠDart
Java/Java ScriptܦݧऀʹೃછΈ͍͢ݴޠ
import 'package:flutter/material.dart';
void main() {
runApp(
new Center(
child: new Text(
'͜ΜʹͪɺFlutter',
textDirection: TextDirection.ltr,
),
),
);
}
Slide 17
Slide 17 text
ᶅݴޠDart
Java/Java ScriptܦݧऀʹೃછΈ͍͢ݴޠ
import 'package:flutter/material.dart';
void main() {
runApp(
new Center(
child: new Text(
'͜ΜʹͪɺFlutter',
textDirection: TextDirection.ltr,
),
),
);
}
Slide 18
Slide 18 text
ᶅݴޠDart
Java/Java ScriptܦݧऀʹೃછΈ͍͢ݴޠ
import 'package:flutter/material.dart';
void main() {
runApp(
new Center(
child: new Text(
'͜ΜʹͪɺFlutter',
textDirection: TextDirection.ltr,
),
),
);
}
Slide 19
Slide 19 text
ᶅݴޠDart
Java/Java ScriptܦݧऀʹೃછΈ͍͢ݴޠ
import 'package:flutter/material.dart';
void main() {
runApp(
new Center(
child: new Text(
'͜ΜʹͪɺFlutter',
textDirection: TextDirection.ltr,
),
),
);
}
Slide 20
Slide 20 text
ᶅݴޠDart
Dartver.2ʹͳΓnewΛলུՄೳʹ
import 'package:flutter/material.dart';
void main() {
runApp(
new Center(
child: new Text(
'͜ΜʹͪɺFlutter',
textDirection: TextDirection.ltr,
),
),
);
}
※ఆΛද͢constলུՄೳ
Slide 21
Slide 21 text
Flutterͷ͡Ίํ
Slide 22
Slide 22 text
Hello Flutter
Slide 23
Slide 23 text
։ൃڥߏங(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/
Slide 24
Slide 24 text
[ิ]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)
ରॲ๏ڭ͑ͯ͘ΕΔؾ͕ޮౕ͘ʂ
Slide 25
Slide 25 text
։ൃڥߏங(2/2)
ϓϥάΠϯಋೖͰ։ൃ͕ศརʹ
Slide 26
Slide 26 text
ΞϓϦ։ൃ(ΟβʔυʹԊͬͯܗ࡞)
Slide 27
Slide 27 text
ΞϓϦ։ൃ(ςϯϓϨʔτͷ࣮ߦ݁Ռ)
Slide 28
Slide 28 text
ΞϓϦߏ
•ιʔείʔυ(*.dart)
•ύοέʔδఆٛ
•Ϧιʔεఆٛ
Slide 29
Slide 29 text
ΞϓϦ։ൃͷجຊͱͳΔ
࠷খݶͷMaterialରԠΞϓϦͷιʔείʔυ
Slide 30
Slide 30 text
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'),
),
),
);
}
}
/libs/main.dartΛˣʹॻ͖͑
Slide 31
Slide 31 text
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)
Slide 32
Slide 32 text
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ͷؔʹ
Slide 33
Slide 33 text
ߏཁૉશͯΟδΣοτ
πϦʔߏͰߟ͑Δ
Text
AppBar
Body
Scaffold
Text
Center
Slide 34
Slide 34 text
ಈతͳը໘ߋ৽͕ඞཁˠ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 {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
…(লུ)…
StateΛར༻ͯ͠ঢ়ଶཧ
Slide 35
Slide 35 text
FlutterΞϓϦ։ൃ࣮ફ
Slide 36
Slide 36 text
FlutterͷϓϩμΫγϣϯద༻
ʢ։ൃˠϦϦʔεͰΓӽ͑Δ͖՝ʣ
Slide 37
Slide 37 text
ࡐͱ͢ΔΞϓϦ
※ධՁத ※ϦϦʔεࡁ
Slide 38
Slide 38 text
ᶃը໘/ϨΠΞτ
ᶄϏδωεϩδοΫ
ᶅΞΠίϯ
ᶆࠃࡍԽ
ϓϩμΫγϣϯద༻ͰΓӽ͑ͨ՝
Slide 39
Slide 39 text
FlutterͷUIߏஙಛघʁʂ
ʢAndroid/iOSωΠςΟϒͷࢹʣ
՝ᶃ
Slide 40
Slide 40 text
ը໘/ϨΠΞτͷ࣮
※྆ऀΛΈ߹ΘͤΔํ๏͋Γ
(1)DartݴޠΛ༻͍Δํࣜ
(2)GUIΤσΟλΛ༻͍Δํࣜ
Slide 41
Slide 41 text
(1)DartݴޠΛ༻͍Δํࣜ
import 'package:flutter/material.dart';
void main() {
runApp(
new Center(
child: new Text(
'͜ΜʹͪɺFlutter',
textDirection: TextDirection.ltr,
),
),
);
}
ίʔυهड़ˠHot ReloadͰ֬ೝ
Slide 42
Slide 42 text
(2)GUIΤσΟλΛ༻͍Δํࣜ
Flutter Studio (WebΞϓϦ)ͷར༻
http://mutisya.com/
Slide 43
Slide 43 text
͕ɺͦΜͳʹ͘ͳ͍…
ʢDartίʔυΛ৮ΔεΩϧඞਢʣ
Slide 44
Slide 44 text
Scaffold
AppBar Body
(Container)
ը໘࣮ͷϙΠϯτ
ΟδΣοτπϦʔͷཧղ
Slide 45
Slide 45 text
Text Column
Dropdown
Button
Text
Field
Raised
Button
Dropdown
Button
Text
Field
Scaffold
AppBar Body
(Container)
େ͖ͳཁૉˠখ͞ͳཁૉͷॱʹઃܭ
Slide 46
Slide 46 text
ը໘/ϨΠΞτͰ͓͍͑ͨ͞ϙΠϯτ
(a)ΟδΣοτਨ/ਫฏํஔ
(b)ΟδΣοτͷ෯ௐ
(c)ΟδΣοτͷ૬ରൺࢦఆ
Slide 47
Slide 47 text
(a)ΟδΣοτͷਨ/ਫฏํஔ
LinearLayout (android:orientation)
vertical horizontal
Slide 48
Slide 48 text
(a)ΟδΣοτͷਨ/ਫฏํஔ
Column / Row ΟδΣοτ
Column Row
Slide 49
Slide 49 text
(b)ΟδΣοτͷ෯ௐ
wrap_content / match_parent
wrap_content match_parent
Slide 50
Slide 50 text
(b)ΟδΣοτͷ෯ௐ
CrossAxisAlignmentଐੑͷར༻
CrossAxisAlignment.start CrossAxisAlignment.stretch
Slide 51
Slide 51 text
(c)ΟδΣοτͷ૬ରൺࢦఆ
layout_weight
layout_weight=“1”
layout_weight=“2”
Slide 52
Slide 52 text
(c)ΟδΣοτͷ૬ରൺࢦఆ
Expanded+flexଐੑ
ExpandedΟδΣοτ
flex: 1
ExpandedΟδΣοτ
flex: 2
Slide 53
Slide 53 text
(c)ΟδΣοτͷ૬ରൺࢦఆ
Expanded+flexଐੑͷར༻ྫ
child: Container(
child: Column(
mainAxisSize: MainAxisSize.max,
children: [
Expanded(
child: Container(
child: Row(
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [button1],
),
),
flex: 1,
),
Expanded(
child: Container(
child: Row(
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [button2],
),
),
flex: 2,
),
],
),
),
Slide 54
Slide 54 text
ϏδωεϩδοΫ࣮ͷϙΠϯτ
ʢϑϨʔϜϫʔΫඪ४API͚ͩͰඇޮʣ
՝ᶄ
Slide 55
Slide 55 text
ंྠͷൃ໌લʹʮϓϥάΠϯʯௐࠪ
https://pub.dartlang.org/flutter
Slide 56
Slide 56 text
ྫ͑ɺKey-Valueܗࣜͷσʔλอଘ
ᶅ
ᶃ
ᶄ
“sharedpreference”Ͱݕࡧ
Slide 57
Slide 57 text
Android StudioͰͷૢ࡞
ᶃ
ᶄ
Slide 58
Slide 58 text
ϓϥάΠϯΛ༻͍࣮ͨྫ
import 'package:shared_preferences/shared_preferences.dart';
_saveSampleData(String value) async {
SharedPreferences prefs = await SharedPreferences.getInstance();
await prefs.setString('key1', value);
}
Slide 59
Slide 59 text
͓͢͢ΊϓϥάΠϯ
•http
•HTTP௨৴
•REST௨৴Λ؆ܿʹهड़
•firebase
•ΈΜͳେ͖Firebase
•FlutterΞϓϦʹFirebaseͷػೳΛՃ
•share
•ίϯςϯπͷshareػೳ
•SNSϝʔϧ࿈ܞΛ؆୯ʹ࣮ݱ
shareػೳͷ࣮ݱྫ
Slide 60
Slide 60 text
ϦϦʔεʹ༷ʑͳΞΠίϯඞཁ
ʢख࡞ۀͰ४උ͢Δͷ໘ʣ
՝ᶅ
Slide 61
Slide 61 text
σϑΥϧτ ΦϦδφϧ
ΞΠίϯͷ४උ
Slide 62
Slide 62 text
Android/iOS༻ΞΠίϯ
छྨ͍ͬͺ͍
Slide 63
Slide 63 text
ϓϥάΠϯ׆༻Ͱղܾ
pubspec.yaml
dev_dependencies:
# ϥϯνϟʔΞΠίϯ
flutter_launcher_icons: “^0.6.1"
flutter_icons:
android: true
ios: true
image_path: "images/icon.png"
Slide 64
Slide 64 text
࣮ߦͷྲྀΕ
>flutter pub get
>flutter pub pub run flutter_launcher_icons:main
android/iosԼʹΖΖͷΞΠίϯ͕ੜ͞ΕΔʂ
Slide 65
Slide 65 text
ɹ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"
Slide 66
Slide 66 text
ϦϦʔε࣌ʹଟݴޠରԠ͍ͨ͠
ʢຊޠ͚ͩʹ͢Δͷਖ਼ݫ͍͠ʣ
՝ᶆ
Slide 67
Slide 67 text
ࠃࡍԽରԠ
ଟݴޠରԠ͍ͤͨ͞ɻ
ʢগͳ͘ͱຊޠʴӳޠʣ
Slide 68
Slide 68 text
ެࣜαΠτʹΓํ͋Δ͚Ͳ
͔ͳΓख͕ؒ…
Slide 69
Slide 69 text
“Flutter i18n”(Android Studio༻ϓϥάΠϯ)ͷ׆༻
Android StudioͰ”flutter” Λݕࡧ
Slide 70
Slide 70 text
3ͭͷStepʹ͚ͯղઆ
Slide 71
Slide 71 text
Step0. ࣗಈੜϑΝΠϧͷ֬ೝ
ϑΝΠϧ2͕ͭࣗಈੜ
※ੜ͞Εͳ͍߹ɺϓϩδΣΫτΛดͯ͡࠶։͘
Slide 72
Slide 72 text
Step0. ࣗಈੜϑΝΠϧͷ֬ೝ
ྫ.lib/generated/i18n.dart
Slide 73
Slide 73 text
Step1. σϑΥϧτݴޠͷઃఆ
lib/main.dart
Slide 74
Slide 74 text
Step2. ݴޠผϦιʔεͷ४උ
res/values/
strings_en.arb (←Λϕʔεʹstrings_ja.arb࡞)
{
"appTitle": "Flutter App",
"appSumary": "Hello"
}
strings_en.arb
strings_ja.arb
{
"appTitle": "ϑϥολʔΞϓϦ",
"appSumary": “͜Μʹͪ"
}
※ݴޠϦιʔεͷՃɾআɺstrings_*.arbͷϝϯςͷΈʂ
Slide 75
Slide 75 text
Step3. ݴޠผϦιʔεͷར༻
lib/main.dart
Slide 76
Slide 76 text
One more…
Slide 77
Slide 77 text
CoolͳUI/UXͷ࣮ݱ
Slide 78
Slide 78 text
UI/UXͷվળྫ
Slide 79
Slide 79 text
•PaddingΛೖΕΔ
•֎Λ͚ͭΔ
•ϥϕϧΛՃ͢Δ
TextBox
UI/UXͷվળྫ
Slide 80
Slide 80 text
UI/UXͷվળྫ
Slide 81
Slide 81 text
Padding(
padding: EdgeInsets.all(8.0),
child: TextField(
controller: _controllerInput,
decoration: new InputDecoration(
labelText: '༁͍ͨ͠จষ',
border: OutlineInputBorder()),
),
),
ςΩετϘοΫεͷ০ͷ߹
Slide 82
Slide 82 text
ΟδΣοτ׆༻͕伴
TabBar BottomNavigationBar AnimatedOpacity
Slide 83
Slide 83 text
Flutter࠷৽τϐοΫ
Slide 84
Slide 84 text
Google DevelopersެࣜαΠτهࣄ(https://bit.ly/2A0tzuK)
Slide 85
Slide 85 text
Google DevelopersެࣜαΠτهࣄܝࡌαϯϓϧ
[RP2] Cupertino(iOS)ରԠ
UP!
• CupertinoApp
• CupertinoTimerPicker
• CupertinoSegmentedControl
• CupertinoActionSheet
• CupertinoNavigationBar
• CupertinoSliverNavigationBar
• CupertinoPageScaffold
• CupertinoScrollbar
• CupertinoPicker
Slide 86
Slide 86 text
Summary
•1ιʔεͰAndroid/iOS͚ΞϓϦ։ൃ
•ϓϥάΠϯ׆༻Ͱޮతͳ։ൃΛʂ
•ϓϩμΫγϣϯద༻Մೳʂ
Slide 87
Slide 87 text
- 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.