Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Vuoi uno sviluppo mobile più veloce? Flutter è la via!

Vuoi uno sviluppo mobile più veloce? Flutter è la via!



May 02, 2018


  1. WANT A FASTER MOBILE DEVELOPMENT ? Flutter is the way

    Wilfried Mbouenda Mbogne
  2. Story Time!

  3. Content 1. What is Flutter ? 2. The story 3.

    Tooling 4. Widgets 5. Testing 6. Use Cases 7. Example
  4. Senior Android Engineer and public speaker. @ewilly1 @be.betr.codr Wilfried Mbouenda

  5. 1. What is Flutter ?

  6. 1. mobile UI framework 2. made by google 3. helps

    to craft high-quality native interfaces on iOS and Android 4. free and open source 5. Fast Development experience
  7. None
  8. What do you need to setup Flutter? • Operating System

    of 64 bit (Windows, MacOs, Linux) • Disk Space: Windows — 400 MB, MacOs — 700 MB, Linux — 600 MB • Tools: Windows (git), MacOs-Linux (bash, mkdir, rm, git, curl, unzip, which) • Get the Flutter SDK • run “flutter doctor” on command prompt or POWER SHELL.
  9. The language

  10. Dart is a general-purpose programming language originally developed by Google

    and later approved as a standard by Ecma — Wikipedia
  11. 1. Dart language is a cool language: 2. it’s familiar

    and easy to learn for developers 3. it’s Class-based and optionally typed 4. It has a cool Asynchronous Library (Future and Stream) 5. Dart helps to create an easy to understand layout for your UI
  12. 2. The story “sky” → Flutter Alpha → Flutter Beta

  13. 3. Tooling

  14. Flutter CLI doctor: Show information about the installed tooling. This

    command is vital to know if there is something dependencies missing. logs: Show log output for running Flutter apps. screenshot: Take a screenshot from a connected device. test: Run Flutter unit tests for the current project. trace: Start and stop tracing for a running Flutter app. With this command you can trace and measure wall/CPU time.
  15. 4. Widgets

  16. In Flutter, everything is a widget


    USER INTERFACE flutter.io
  18. A widget can define: • a structural element (like a

    button or menu) • a stylistic element (like a font or color scheme) • an aspect of layout (like padding) • ... flutter.io
  19. Simple Widgets

  20. text

  21. Button

  22. Other Widgets

  23. Row and Column https://flutter.io/widgets/

  24. Widgets tree

  25. Column Text Text Image Row Text

  26. Stateless versus Stateful Widgets

  27. Stateless Widget   These one don’t changes. Example: A text Widget

    with a constant string.
  28. Stateful Widget These one have a state and can change.

    When the state values changes, the Widget will be redrawn on the screen.
  29. None
  30. Platform Widgets

  31. defaultTargetPlatform == TargetPlatform.iOS? Material Components Widgets Cupertino (iOS-style) Widgets

  32. 5. Testing

  33. Unit testing Tests are run on local Dart VM with

    a headless version of the Flutter Engine
  34. Widget testing test a single widget.

  35. Integration testing UI automated test. Espresso (Android) UI Automation (iOS)

  36. 6. Use cases

  37. Hamilton Hookle Bendometer

  38. Bonus: Platform channels

  39. None
  40. Bonus 2: Flutter Plugins

  41. https://github.com/flutter/plugins Flutter supports using shared packages contributed by other developers

    to the Flutter and Dart ecosystems flutter.io
  42. Bonus 3: Learning Flutter 003 Kevin Segaud - Dart developer

  43. 7. Example Flutter Quotes

  44. None
  45. Flutter Quotes - Technologies

  46. Flutter Quotes - The widgets

  47. widget = new Padding( padding: new EdgeInsets.all( 32.0), child: new

    Column(children: <Widget>[ new Flexible( child: new FirebaseAnimatedList( query: reference, sort: (a, b) => b. key.compareTo(a. key), padding: new EdgeInsets.all( 8.0), reverse: true, itemBuilder: (context, DataSnapshot snapshot, Animation<double> animation,int x) { //new return new Quote( snapshot: snapshot, animation: animation ); }, ), ), new Align( alignment: const Alignment(0.0, -0.2), child: new FloatingActionButton( child: const Icon(Icons. add), onPressed: () { Navigator. of(context).pushNamed( '/add'); }, ), ), ], ), );
  48. new Form( key: _formKey, autovalidate: _autovalidate, onWillPop: _warnUserAboutInvalidData, child: new

    ListView( padding: const EdgeInsets.symmetric(horizontal: 16.0), children: <Widget>[ new TextFormField( decoration: const InputDecoration( icon: const Icon(Icons. person), hintText: 'Author', labelText: 'author *', ), onSaved: (String value) { _author = value; }, validator: _validateName,), new TextFormField( decoration: const InputDecoration( icon: const Icon(Icons. note), hintText: 'Your quote', labelText: 'Quote',), maxLines: 3, keyboardType: TextInputType. emailAddress, onSaved: (String value) { _quote = value; }, validator: _validateName,), new Container( alignment: Alignment. center, padding: const EdgeInsets.symmetric(vertical: 16.0), child: new RaisedButton( child: const Text('ADD'), onPressed: _handleSubmitted,),),],),),
  49. Flutter Quotes - The logic

  50. bool _IsLoading; bool Logged; State _IsLoading _IsLoading true false Logged

    true impossible quotes Logged false progress login
  51. Flutter Quotes - the code https://github.com/WillyShakes/MasterLogin

  52. Flutter community @flutterio flutter flutter-dev flutter

  53. Thanks for your attention!

  54. Q & A @ewilly1 Wilfried Mbouenda Mbogne

  55. WANT A FASTER MOBILE DEVELOPMENT ? Flutter is the way