Flutter let's try by Aurore Jard

1 Proprietary & Confidential | GDG Android - April 2018
Flutter, let’s try

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

Native Architecture

Flutter Architecture

Flutter Architecture Skia Dart Text Foundation Animation Painting Rendering Widgets Material Gestures Engine (C++) Framework (Dart) Cupertino

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

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

Tools Pubspec.yaml // Manage dependencies $ flutter format // reformat code according to Flutter-style $ flutter analyze // help you find possible mistakes

Tools • Hot Reload

Let’s build an app !

Widgets everywhere !

Everything is a widget

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: <Widget>[ new Text('some text.'), ], ), ), actions: <Widget>[ new FlatButton( child: new Text('OK'), onPressed: () { Navigator.of(context).pop(); }, ), ], new MaterialApp( home: new MyHomeScreen(), )

Examples

Layouts

What you want

Subdivise • Look for rows and columns • Is there a grid? • Any overlapping elements? • Do we need tabs? • Padding, alignment or borders needed?

Subdivise

Let’s code

Let’s code • Montreal forecast ! • Simple ListView App • Async Http code • Details on touch • Display an iOS or Android alert

Future

Package dependency • Get last package version here • Add it to your pubspec.yaml : • Add import : import 'package:http/http.dart' as http;

Future<List<Weather>> 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<Weather> forecast = new List<Weather>(); for(final item in responseJson['list']) { final weather = new Weather.fromJson(item); forecast.add(weather); } return forecast; } Future

Navigation

Navigator.of(context).pop(true); Navigator.of(context).pushNamed('/weather'); new MaterialApp( home: new ForecastScreen(), routes: <String, WidgetBuilder> { '/forecast': (BuildContext context) => new ForecastScreen(), '/weather' : (BuildContext context) => new WeatherScreen() }, ) Push / Pop

Dialog

return new AlertDialog( title: new Text('Hey !'), content: new SingleChildScrollView( child: new ListBody( children: <Widget>[ new Text('Good weather will come back one day.'), new Text('For real ;)'), ], ), ), actions: <Widget>[ new FlatButton( child: new Text('OK'), onPressed: () { Navigator.of(context).pop(); }, ), ], ); AlertDialog

AlertDialog

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); }

AlertDialog

So ?

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)

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

Flutter vs React Native

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

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)

Links • Flutter documentation • Package dependencies • Widgets Catalog • The magic of Flutter • What’s revolutionary about Flutter

Thank you.

Flutter let's try by Aurore Jard

Flutter let's try by Aurore Jard

More Decks by GDG Montreal

Other Decks in Technology

Featured

Transcript