$30 off During Our Annual Pro Sale. View Details »

Flutter let's try by Aurore Jard

Flutter let's try by Aurore Jard

Exploration of Flutter and some first feedbacks

GDG Montreal

April 18, 2018
Tweet

More Decks by GDG Montreal

Other Decks in Technology

Transcript

  1. 1 Proprietary & Confidential | GDG Android - April 2018

    Flutter, let’s try
  2. 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
  3. 3 Proprietary & Confidential | GDG Android - April 2018

    Native Architecture
  4. 4 Proprietary & Confidential | GDG Android - April 2018

    Flutter Architecture
  5. 5 Proprietary & Confidential | GDG Android - April 2018

    Flutter Architecture Skia Dart Text Foundation Animation Painting Rendering Widgets Material Gestures Engine (C++) Framework (Dart) Cupertino
  6. 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);
  7. 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
  8. 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
  9. 9 Proprietary & Confidential | GDG Android - April 2018

    Tools • Hot Reload
  10. 10 Proprietary & Confidential | GDG Android - April 2018

    Let’s build an app !
  11. 11 Proprietary & Confidential | GDG Android - April 2018

    Widgets everywhere !
  12. 12 Proprietary & Confidential | GDG Android - April 2018

    Everything is a widget
  13. 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: <Widget>[ new Text('some text.'), ], ), ), actions: <Widget>[ new FlatButton( child: new Text('OK'), onPressed: () { Navigator.of(context).pop(); }, ), ], new MaterialApp( home: new MyHomeScreen(), )
  14. 14 Proprietary & Confidential | GDG Android - April 2018

    Examples
  15. 15 Proprietary & Confidential | GDG Android - April 2018

    Layouts
  16. 16 Proprietary & Confidential | GDG Android - April 2018

    What you want
  17. 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?
  18. 18 Proprietary & Confidential | GDG Android - April 2018

    Subdivise
  19. 19 Proprietary & Confidential | GDG Android - April 2018

    Let’s code
  20. 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
  21. 21 Proprietary & Confidential | GDG Android - April 2018

    Future
  22. 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;
  23. 23 Proprietary & Confidential | GDG Android - April 2018

    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
  24. 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
  25. 25 Proprietary & Confidential | GDG Android - April 2018

    Navigation
  26. 26 Proprietary & Confidential | GDG Android - April 2018

    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
  27. 27 Proprietary & Confidential | GDG Android - April 2018

    Dialog
  28. 28 Proprietary & Confidential | GDG Android - April 2018

    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
  29. 29 Proprietary & Confidential | GDG Android - April 2018

    AlertDialog
  30. 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); }
  31. 31 Proprietary & Confidential | GDG Android - April 2018

    AlertDialog
  32. 32 Proprietary & Confidential | GDG Android - April 2018

    So ?
  33. 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)
  34. 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
  35. 35 Proprietary & Confidential | GDG Android - April 2018

    Flutter vs React Native
  36. 36 Proprietary & Confidential | GDG Android - April 2018

    Flutter vs React Native
  37. 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
  38. 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)
  39. 39 Proprietary & Confidential | GDG Android - April 2018

    Links • Flutter documentation • Package dependencies • Widgets Catalog • The magic of Flutter • What’s revolutionary about Flutter
  40. 40 Proprietary & Confidential | GDG Android - April 2018

    Thank you.