Slide 1
Slide 1 text
1
Proprietary & Confidential
| GDG Android - April 2018
Flutter, let’s try
Slide 2
Slide 2 text
2
Proprietary & Confidential
| GDG Android - April 2018
Flut.. what ?
● An open-source toolkit, developed by Google
● An SDK that makes building high-performing, modern and beautiful
apps easy
● Works for both Android and iOS
* Currently in Beta 2
Slide 3
Slide 3 text
3
Proprietary & Confidential
| GDG Android - April 2018
Native Architecture
Slide 4
Slide 4 text
4
Proprietary & Confidential
| GDG Android - April 2018
Flutter Architecture
Slide 5
Slide 5 text
5
Proprietary & Confidential
| GDG Android - April 2018
Flutter Architecture
Skia Dart Text
Foundation
Animation Painting
Rendering
Widgets
Material
Gestures
Engine
(C++)
Framework
(Dart)
Cupertino
Slide 6
Slide 6 text
6
Proprietary & Confidential
| GDG Android - April 2018
Dart
● Class-based, single-inheritance, pure object-oriented programming language.
void main() { print('Hello, World!'); }
int fibonacci(int n) {
if (n == 0 || n == 1) return n;
return fibonacci(n - 1) + fibonacci(n - 2);
}
var result = fibonacci(20);
Slide 7
Slide 7 text
7
Proprietary & Confidential
| GDG Android - April 2018
Set-up
Installation : quick and easy, get the Flutter SDK then
$ flutter doctor // to fix issues
$ flutter update // for new version
Editor : use your favorite IDE, Android Studio (Flutter plugin)
1
2
Slide 8
Slide 8 text
8
Proprietary & Confidential
| GDG Android - April 2018
Tools
Pubspec.yaml // Manage dependencies
$ flutter format // reformat code according to Flutter-style
$ flutter analyze // help you find possible mistakes
Slide 9
Slide 9 text
9
Proprietary & Confidential
| GDG Android - April 2018
Tools
● Hot Reload
Slide 10
Slide 10 text
10
Proprietary & Confidential
| GDG Android - April 2018
Let’s build an app !
Slide 11
Slide 11 text
11
Proprietary & Confidential
| GDG Android - April 2018
Widgets everywhere !
Slide 12
Slide 12 text
12
Proprietary & Confidential
| GDG Android - April 2018
Everything is a widget
Slide 13
Slide 13 text
13
Proprietary & Confidential
| GDG Android - April 2018
Code
new Text(
'Hello, $_name! How are you?',
textAlign: TextAlign.center,
style: new TextStyle(fontWeight: FontWeight.bold),
)
new AlertDialog(
title: new Text('Title'),
content: new SingleChildScrollView(
child: new ListBody(
children: [
new Text('some text.'),
],
),
),
actions: [
new FlatButton(
child: new Text('OK'),
onPressed: () {
Navigator.of(context).pop();
},
),
],
new MaterialApp(
home: new MyHomeScreen(),
)
Slide 14
Slide 14 text
14
Proprietary & Confidential
| GDG Android - April 2018
Examples
Slide 15
Slide 15 text
15
Proprietary & Confidential
| GDG Android - April 2018
Layouts
Slide 16
Slide 16 text
16
Proprietary & Confidential
| GDG Android - April 2018
What you want
Slide 17
Slide 17 text
17
Proprietary & Confidential
| GDG Android - April 2018
Subdivise
● Look for rows and columns
● Is there a grid?
● Any overlapping elements?
● Do we need tabs?
● Padding, alignment or borders needed?
Slide 18
Slide 18 text
18
Proprietary & Confidential
| GDG Android - April 2018
Subdivise
Slide 19
Slide 19 text
19
Proprietary & Confidential
| GDG Android - April 2018
Let’s code
Slide 20
Slide 20 text
20
Proprietary & Confidential
| GDG Android - April 2018
Let’s code
● Montreal forecast !
● Simple ListView App
● Async Http code
● Details on touch
● Display an iOS or Android alert
Slide 21
Slide 21 text
21
Proprietary & Confidential
| GDG Android - April 2018
Future
Slide 22
Slide 22 text
22
Proprietary & Confidential
| GDG Android - April 2018
Package dependency
● Get last package version here
● Add it to your pubspec.yaml :
● Add import :
import 'package:http/http.dart' as http;
Slide 23
Slide 23 text
23
Proprietary & Confidential
| GDG Android - April 2018
Future> fetchForecast() async {
final response = await http.get('http://api.openweathermap.org/data/2.5/forecast?q=Montreal,ca');
final responseJson = json.decode(response.body);
List forecast = new List();
for(final item in responseJson['list']) {
final weather = new Weather.fromJson(item);
forecast.add(weather);
}
return forecast;
}
Future
Slide 24
Slide 24 text
24
Proprietary & Confidential
| GDG Android - April 2018
var futureBuilder = new FutureBuilder(
future: _getData(),
builder: (BuildContext context, AsyncSnapshot snapshot) {
switch (snapshot.connectionState) {
case ConnectionState.none:
return new Text("Not started");
case ConnectionState.waiting:
return new Text("loading...");
default:
if(snapshot.hasError)
return new Text('Error: ${snapshot.error}');
else
return createListView(context, snapshot);
}
}
);
FutureBuilder
Slide 25
Slide 25 text
25
Proprietary & Confidential
| GDG Android - April 2018
Navigation
Slide 26
Slide 26 text
26
Proprietary & Confidential
| GDG Android - April 2018
Navigator.of(context).pop(true);
Navigator.of(context).pushNamed('/weather');
new MaterialApp(
home: new ForecastScreen(),
routes: {
'/forecast': (BuildContext context) => new ForecastScreen(),
'/weather' : (BuildContext context) => new WeatherScreen()
},
)
Push / Pop
Slide 27
Slide 27 text
27
Proprietary & Confidential
| GDG Android - April 2018
Dialog
Slide 28
Slide 28 text
28
Proprietary & Confidential
| GDG Android - April 2018
return new AlertDialog(
title: new Text('Hey !'),
content: new SingleChildScrollView(
child: new ListBody(
children: [
new Text('Good weather will come back one day.'),
new Text('For real ;)'),
],
),
),
actions: [
new FlatButton(
child: new Text('OK'),
onPressed: () {
Navigator.of(context).pop();
},
),
],
);
AlertDialog
Slide 29
Slide 29 text
29
Proprietary & Confidential
| GDG Android - April 2018
AlertDialog
Slide 30
Slide 30 text
30
Proprietary & Confidential
| GDG Android - April 2018
import 'package:flutter/foundation.dart' show defaultTargetPlatform;
Detection iOS or Android
if(defaultTargetPlatform == TargetPlatform.iOS) {
showDialog(context: context, builder: _getiOSDialog);
} else {
showDialog(context: context, builder: _getAndroidDialog);
}
Slide 31
Slide 31 text
31
Proprietary & Confidential
| GDG Android - April 2018
AlertDialog
Slide 32
Slide 32 text
32
Proprietary & Confidential
| GDG Android - April 2018
So ?
Slide 33
Slide 33 text
33
Proprietary & Confidential
| GDG Android - April 2018
First impressions
● Easy to set-up and start a projet
● Clear examples and documentation
● Dart : quick and easy to learn
● Dart + Android Studio = feels like coding native ;)
● A lot of Nested object for Layout
● Beta … missing a lot of options to be really cool (Navigation, widget...)
● Same display on iOS/Android (or manage it)
Slide 34
Slide 34 text
34
Proprietary & Confidential
| GDG Android - April 2018
Native vs Flutter
Flutter
Native
● One codebase 2 platforms
● Use the same rendering engine than Native : Sia (performances)
● No access to OEM Widgets
● Access to all device feature easily
● Good performances
● IDE + debug tools
● More docs, samples, community
Slide 35
Slide 35 text
35
Proprietary & Confidential
| GDG Android - April 2018
Flutter vs React Native
Slide 36
Slide 36 text
36
Proprietary & Confidential
| GDG Android - April 2018
Flutter vs React Native
Slide 37
Slide 37 text
37
Proprietary & Confidential
| GDG Android - April 2018
Flutter vs React Native
Flutter
React Native
● Dart vs javascript
● Quicker installation
● IDE + debug tools
● Use OEM widgets so it looks closer to native
● Separate View from logic
● Been around for some time so it’s still far more popular
● Less beta : more possibilities, samples…
● Share code with website as well
Slide 38
Slide 38 text
38
Proprietary & Confidential
| GDG Android - April 2018
Bilan
● As a developer
○ Really attractive
○ Feels close to native coding
○ Good performances
● As a UX/UI
○ Closer to Android than iOS
○ Customizable
● As a client
○ Too Young (you feel the Beta)
Slide 39
Slide 39 text
39
Proprietary & Confidential
| GDG Android - April 2018
Links
● Flutter documentation
● Package dependencies
● Widgets Catalog
● The magic of Flutter
● What’s revolutionary about Flutter
Slide 40
Slide 40 text
40
Proprietary & Confidential
| GDG Android - April 2018
Thank you.