Intro to Flutter - Speaker Deck

Slide 1

Slide 1 text

Introduction to Flutter Daniele Bonaldo

Slide 2

Slide 2 text

Daniele Bonaldo Android Developer @danybony_ danybony danielebonaldo.com

Slide 3

Slide 3 text

What is it Flutter? • Application framework • Cross-platform • Native • Backed by Google • Uses Dart • Plugin system • IDE/Editor support

Slide 4

Slide 4 text

Productive Open Beautiful Fast

Slide 5

Slide 5 text

Beautiful

Slide 6

Slide 6 text

Fast

Slide 7

Slide 7 text

Productive

Slide 8

Slide 8 text

Open

Slide 9

Slide 9 text

Open

Slide 10

Slide 10 text

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   

Slide 11

Slide 11 text

Dart •Developed by Google •Client-side language •Android, iOS & Web •Async & Reactive •Supports Mixins •AOT & JIT Compilation •Familiar Syntax •pub (package manager)

Slide 12

Slide 12 text

Java vs Dart

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

Flutter architecture

Slide 15

Slide 15 text

Flutter architecture

Slide 16

Slide 16 text

Widgets EVERYTHING is a widget Composition over inheritance Declaration + binding Easier testing

Slide 17

Slide 17 text

Widgets https://ﬂutter.io/docs/development/ui/widgets

Slide 18

Slide 18 text

Stateless widgets class StaticWidget extends StatelessWidget { @override Widget build(BuildContext context) { return new Text(’Hello!’); } }

Slide 19

Slide 19 text

Stateful widgets class CounterWidget extends StatefulWidget { @override CounterState createState() { return new CounterState(); } } class CounterState extends State { int _counter = 0; @override Widget build(BuildContext context) { return new Text('Current value: $_counter.'); } void increment() { setState(() { ++_counter; }); } }

Slide 20

Slide 20 text

Widgets updates Container  (blue) Counter  (1)

Slide 21

Slide 21 text

Widgets updates Container  (blue) Element 1 Element 2 Counter  (1) Current value: 1

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

Widgets updates Container  (black) Element 1 Element 3 ⚠ Error

Slide 26

Slide 26 text

Platform Channels

Slide 27

Slide 27 text

Platform Views

Slide 28

Slide 28 text

Flutter on web

Slide 29

Slide 29 text

Flutter on web

Slide 30

Slide 30 text

Flutter on web

Slide 31

Slide 31 text

Flutter on web

Slide 32

Slide 32 text

Flutter on desktop https://github.com/google/ﬂutter-desktop-embedding

Slide 33

Slide 33 text

More info Flutter https://ﬂutter.io Flutter codelabs https://github.com/ﬂutter/codelabs Apps showcase https://itsallwidgets.com/

Slide 34

Slide 34 text

Daniele Bonaldo Thank You! Any questions? @danybony_ danybony danielebonaldo.com Slides at: bit.ly/ﬂutter-pip