Intro to Flutter

D4be3ad792b57408b3ab6fe98caef08e?s=47 danybony
January 21, 2019

Intro to Flutter

Flutter is Google’s solution to build native multi-platform apps from a single codebase.
In this talk I gave at Programmers in Padua meetup I explain the main characteristics and concepts behind Flutter, compared to other cross-platform application frameworks. I also show how UIs are built using Flutter and what direction the framework is taking in relation of bringing it to the web and desktop.

D4be3ad792b57408b3ab6fe98caef08e?s=128

danybony

January 21, 2019
Tweet

Transcript

  1. Introduction to Flutter Daniele Bonaldo

  2. Daniele Bonaldo Android Developer @danybony_ danybony danielebonaldo.com

  3. What is it Flutter? • Application framework • Cross-platform •

    Native • Backed by Google • Uses Dart • Plugin system • IDE/Editor support
  4. Productive Open Beautiful Fast

  5. Beautiful

  6. Fast

  7. Productive

  8. Open

  9. Open

  10. Flutter vs React Native Dart
 Compiles to native code
 Own

    implementation of the platform components. Draws directly using a canvas
 Text editor plugins + IDE support
 Newer technology and not as much support
 ✦ Javascript
 ✦ Uses the Javascript bridge
 ✦ Uses the platform native components. Context switching between JS and native
 ✦ Text editor plugins
 ✦ Larger community and more support
 

  11. Dart •Developed by Google •Client-side language •Android, iOS & Web

    •Async & Reactive •Supports Mixins •AOT & JIT Compilation •Familiar Syntax •pub (package manager)
  12. Java vs Dart

  13. Package manager pubspec.yaml name: pet_activity_tracker description: A new Flutter project.

    version: 1.0.0+1 environment: sdk: ">=2.0.0-dev.68.0 <3.0.0" dependencies: flutter: sdk: flutter cupertino_icons: ^0.1.2 charts_flutter: ^0.5.0 google_sign_in: ^3.2.4 firebase_auth: ^0.6.6 dev_dependencies: flutter_test: sdk: flutter flutter: uses-material-design: true assets: - assets/google_logo.png
  14. Flutter architecture

  15. Flutter architecture

  16. Widgets EVERYTHING is a widget Composition over inheritance Declaration +

    binding Easier testing
  17. Widgets https://flutter.io/docs/development/ui/widgets

  18. Stateless widgets class StaticWidget extends StatelessWidget { @override Widget build(BuildContext

    context) { return new Text(’Hello!’); } }
  19. Stateful widgets class CounterWidget extends StatefulWidget { @override CounterState createState()

    { return new CounterState(); } } class CounterState extends State<CounterWidget> { int _counter = 0; @override Widget build(BuildContext context) { return new Text('Current value: $_counter.'); } void increment() { setState(() { ++_counter; }); } }
  20. Widgets updates Container
 (blue) Counter
 (1)

  21. Widgets updates Container
 (blue) Element 1 Element 2 Counter
 (1)

    Current value: 1
  22. Widgets updates Container
 (black) Element 1 Element 2 Counter
 (2)

    Current value: 1
  23. Widgets updates Container
 (black) Element 1 Element 2 Counter
 (2)

    Current value: 2
  24. Widgets updates Container
 (black) Element 1 Element 2 Error Current

    value: 2
  25. Widgets updates Container
 (black) Element 1 Element 3 ⚠ Error

  26. Platform Channels

  27. Platform Views

  28. Flutter on web

  29. Flutter on web

  30. Flutter on web

  31. Flutter on web

  32. Flutter on desktop https://github.com/google/flutter-desktop-embedding

  33. More info Flutter https://flutter.io Flutter codelabs https://github.com/flutter/codelabs Apps showcase https://itsallwidgets.com/

  34. Daniele Bonaldo Thank You! Any questions? @danybony_ danybony danielebonaldo.com Slides

    at: bit.ly/flutter-pip