Slide 1
Slide 1 text
Examples Flutter code
2018/04/18
Flutter Meetup Tokyo #1 @sho5nn
1
Slide 2
Slide 2 text
• twitter : @sho5nn
• Android ΞϓϦ։ൃ͕ϝΠϯ
• ࠷ۙ ReactNative
• Flutter झຯͰ 15h ΄Ͳ
2
Slide 3
Slide 3 text
https:/
/flutter.io/docs/
• Flutter ެࣜυΩϡϝϯτ
3
Slide 4
Slide 4 text
https:/
/flutter.io/docs/
• αϯϓϧίʔυ͕ॆ࣮͍ͯ͠Δ
• ͦͷதͰ Cookbook ͱ͍͏ίʔυϨγϐ͕ࢀߟʹͳΔ
4
Slide 5
Slide 5 text
https:/
/flutter.io/docs/
• ๛ͳαϯϓϧίʔυɺॳֶऀʹͱͬͯ͋Γ͕͍ͨʂ
• αϯϓϧίʔυΛ৮ͬͯ Flutter ʹ׳Ε͍ͯ͜͏ !!!
5
Slide 6
Slide 6 text
Agenda
• Cookbook ͷհ
6
Slide 7
Slide 7 text
Cookbook
https:/
/flutter.io/cookbook/
• ࣮ύλʔϯผʹίʔυϨγϐ͕
༻ҙ͞Ε͍ͯΔ
• ίϐϖͰ͍͍࣮ͩͨߦՄೳ
7
Slide 8
Slide 8 text
Cookbook
• UI
• SnackBar, Tab & ViewPager
• Images, Lists, Animation
• Navigation, Forms, Handling
Gestures
• Networking
• Persistence
8
Slide 9
Slide 9 text
Cookbook
• UI
• SnackBar, Tab & ViewPager
• Images, Lists, Animation
• Navigation, Forms, Handling
Gestures
• Networking
• Persistence
9
Slide 10
Slide 10 text
Displaying SnackBars
10
Slide 11
Slide 11 text
class SnackBarPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new Center(
child: new RaisedButton(
onPressed: () {
final snackBar = new SnackBar(
content: new Text('Yay! A SnackBar!'),
action: new SnackBarAction(
label: 'Undo',
onPressed: () {
// Some code to undo the change!
},
),
);
// Find the Scaffold in the Widget tree and use it to show a SnackBar!
Scaffold.of(context).showSnackBar(snackBar);
},
child: new Text('Show SnackBar'),
11
Slide 12
Slide 12 text
class SnackBarPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new Center(
child: new RaisedButton(
onPressed: () {
final snackBar = new SnackBar(
content: new Text('Yay! A SnackBar!'),
action: new SnackBarAction(
label: 'Undo',
onPressed: () {
// Some code to undo the change!
},
),
);
// Find the Scaffold in the Widget tree and use it to show a SnackBar!
Scaffold.of(context).showSnackBar(snackBar);
},
child: new Text('Show SnackBar'),
12
Slide 13
Slide 13 text
class SnackBarPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new Center(
child: new RaisedButton(
onPressed: () {
final snackBar = new SnackBar(
content: new Text('Yay! A SnackBar!'),
action: new SnackBarAction(
label: 'Undo',
onPressed: () {
// Some code to undo the change!
},
),
);
// Find the Scaffold in the Widget tree and use it to show a SnackBar!
Scaffold.of(context).showSnackBar(snackBar);
},
child: new Text('Show SnackBar'),
13
Slide 14
Slide 14 text
Networking / Fetch data from the internet
14
Slide 15
Slide 15 text
Networking / Fetch data from the internet
Add the http package to pubspec.yaml
dependencies:
http:
15
Slide 16
Slide 16 text
appBar: new AppBar(
title: new Text('Fetch Data Example'),
),
body: new Center(
child: new FutureBuilder(
future: fetchPost(),
builder: (context, snapshot) {
if (snapshot.hasData) {
return new Text(snapshot.data.title);
} else if (snapshot.hasError) {
return new Text("${snapshot.error}");
}
// By default, show a loading spinner
return new CircularProgressIndicator();
},
16
Slide 17
Slide 17 text
appBar: new AppBar(
title: new Text('Fetch Data Example'),
),
body: new Center(
child: new FutureBuilder(
future: fetchPost(), // original method, return Future instance
builder: (context, snapshot) {
if (snapshot.hasData) {
return new Text(snapshot.data.title);
} else if (snapshot.hasError) {
return new Text("${snapshot.error}");
}
// By default, show a loading spinner
return new CircularProgressIndicator();
},
17
Slide 18
Slide 18 text
appBar: new AppBar(
title: new Text('Fetch Data Example'),
),
body: new Center(
child: new FutureBuilder(
future: fetchPost(),
builder: (context, snapshot) { // lambda
if (snapshot.hasData) {
return new Text(snapshot.data.title);
} else if (snapshot.hasError) {
return new Text("${snapshot.error}");
}
// By default, show a loading spinner
return new CircularProgressIndicator();
},
18
Slide 19
Slide 19 text
appBar: new AppBar(
title: new Text('Fetch Data Example'),
),
body: new Center(
child: new FutureBuilder( // extends StatefulWidget
future: fetchPost(),
builder: (context, snapshot) {
if (snapshot.hasData) {
return new Text(snapshot.data.title);
} else if (snapshot.hasError) {
return new Text("${snapshot.error}");
}
// By default, show a loading spinner
return new CircularProgressIndicator();
},
19
Slide 20
Slide 20 text
appBar: new AppBar(
title: new Text('Fetch Data Example'),
),
body: new Center(
child: new FutureBuilder( // extends StatefulWidget
future: fetchPost(),
builder: (context, snapshot) {
if (snapshot.hasData) {
return new Text(snapshot.data.title);
} else if (snapshot.hasError) {
return new Text("${snapshot.error}");
}
// By default, show a loading spinner
return new CircularProgressIndicator();
},
20
Slide 21
Slide 21 text
·ͱΊ
• Flutter ৮Γ࢝Ίʹ
Cookbook Λࢀߟʹ͢Δͷ༗ޮ
• ͦͷଞʹɺϦετදࣔɺσʔλ
ӬଓԽɺը໘ؒͷσʔλड͚
͠ͳͲͷίʔυ͋Γɺ͋Γ͕
ͪͳ࣮·͋·͋Χόʔ͞Ε
ͯͯخ͍͠
• αϯϓϧίʔυͰ
Flutter ʹ׳Ε͍ͯ͜͏ ✌
21