Slide 1
Slide 1 text
try! Flutter
Rui Kowase
@rkowase
2018/03/13 potatotips#49
Slide 2
Slide 2 text
Profile
● Name: Rui Kowase / 小和瀬 塁
● Account: @rkowase
2
Skill: Flutter (1day)
Slide 3
Slide 3 text
What’s Flutter
Flutter makes it easy and fast to build beautiful mobile apps.
https://github.com/flutter/flutter
Slide 4
Slide 4 text
Expressive, beautiful UIs
https://flutter.io/
Slide 5
Slide 5 text
Feature
● Build beautiful native apps in record time
● Fast development
● Expressive, beautiful UIs
● Modern, reactive framework
● Access native features and SDKs
● Unified app development
https://flutter.io/
Slide 6
Slide 6 text
Flutter is now in Beta!
https://medium.com/flutter-io/announcing-flutter-beta-1-build-beautiful-native-apps-dc142aea74c0
Slide 7
Slide 7 text
Get Started: Install on macOS
$ git clone -b beta https://github.com/flutter/flutter.git
$ export PATH=`pwd`/flutter/bin:$PATH
$ flutter doctor
https://flutter.io/setup-macos/
Slide 8
Slide 8 text
Get Started: Configure Editor
● Install Flutter plugin (Preferences > Plugins > Browse repositories)
● Restart Android Studio
https://flutter.io/get-started/editor/
Slide 9
Slide 9 text
Hello World
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('Welcome to Flutter'),
),
body: new Center(
child: new Text('Hello World'),
),
),
);
}
}
https://flutter.io/get-started/codelab/
Slide 10
Slide 10 text
Hello World
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('Welcome to Flutter'),
),
body: new Center(
child: new Text('Hello World'),
),
),
);
}
}
https://flutter.io/get-started/codelab/
Immutable
Slide 11
Slide 11 text
Flutter / Android / iOS
Flutter Android iOS
Language Dart Kotlin / Java Swift / Objective-C
Platform Android, iOS, Web Android iOS
Build time 1-5 sec 1-5 min? 1-5 min?
Slide 12
Slide 12 text
Sample app
Feature
● Search GitHub repository
http://github.com/
rkowase/flutter-sample
Slide 13
Slide 13 text
Simple Architecture! (Like a Fat Activity / VC)
Slide 14
Slide 14 text
Sample app - Layout
return new Scaffold(
appBar: new AppBar(
title: new Text(widget.title),
),
body: new Center(
child: new ListView(
padding: const EdgeInsets.symmetric(horizontal: 16.0),
children: [
new TextField(
decoration: const InputDecoration(
hintText: 'Flutter',
labelText: 'Query',
),
maxLines: 1,
controller: _controller,
),
new Container(
padding: const EdgeInsets.all(20.0),
child: new RaisedButton(
child: const Text('Search'),
onPressed: _search,
),
),
container,
Slide 15
Slide 15 text
Sample app - List
new Container(
height: 500.0,
child: new ListView(
key: _listViewKey,
itemExtent: 50.0,
children: _createWidgets(_items),
),
),
Iterable _createWidgets(List items) {
var ret = new List();
if (items == null) {
return ret;
}
items.forEach((item) {
ret.add(
new ListTile(
leading: new CircleAvatar(
backgroundImage: new NetworkImage(item.avatarUrl),
),
title: new Text('${item.name} / ⭐ ${item.starCount}'),
)
);
});
return ret;
}
Slide 16
Slide 16 text
Sample app - API Client
class GithubClient {
Future> get(String query) async {
var url = 'https://api.github.com/search/repositories?sort=stars&q=';
var httpClient = new HttpClient();
try {
var request = await httpClient.getUrl(Uri.parse(url + query));
var response = await request.close();
if (response.statusCode != HttpStatus.OK) {
return null;
}
var json = await response.transform(UTF8.decoder).join();
return GithubRepo.fromJson(json);
} catch (exception) {
return null;
}
}
}
async / await
Slide 17
Slide 17 text
Demo (Hot Reload)
Slide 18
Slide 18 text
Summary
● Official Documents
● Official Widgets
● Multi Platform (Android, iOS, Web)
● IDE Support
● Hot Reload
Slide 19
Slide 19 text
Flutter == ときめきます (Tokimekimasu)
Slide 20
Slide 20 text
Error Screen
Background
#7C160E
Text
#FFFE7F
Slide 21
Slide 21 text
Link
● https://flutter.io/
● https://twitter.com/flutterio
● https://github.com/flutter/flutter
● https://flutter.institute/
● https://startflutter.com/
● https://flutter.rocks/