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

Intro to Flutter

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.


January 21, 2019

More Decks by danybony

Other Decks in Programming


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

    Native • Backed by Google • Uses Dart • Plugin system • IDE/Editor support
  2. Flutter vs React Native Dart
 Compiles to native code

    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

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

    •Async & Reactive •Supports Mixins •AOT & JIT Compilation •Familiar Syntax •pub (package manager)
  4. 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
  5. 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; }); } }