Slide 1

Slide 1 text

Introduction to Flutter Erik Hellman

Slide 2

Slide 2 text

Agenda ● Overview of Flutter ● Introduction to Dart ● Flutter tools demo ● Live coding a Flutter app ● Q & A

Slide 3

Slide 3 text

Flutter timeline ● Dart announced by Google at GOTO in Aarhus, Denmark in October 2011 ● Dart 1.0 in November 2013 ● “Sky” (Android only) announced at 2015 Dart developer summit ● Dart 2.0 August 2018 ● Flutter 1.0 announced in December 2018 ● Flutter 1.12 December 2019 at Flutter Interact ● Flutter 1.17 currently in beta

Slide 4

Slide 4 text

Declarative UI toolkit class MyButton extends StatelessWidget { Widget build(BuildContext context) { return GestureDetector( onTap: () { print('MyButton was tapped!'); }, child: Container( height: 36.0, padding: const EdgeInsets.all(8.0), margin: const EdgeInsets.symmetric(horizontal: 8.0), decoration: BoxDecoration( borderRadius: BorderRadius.circular(5.0), color: Colors.lightGreen[500], ), child: Center( child: Text('Hello, World!'), ), ), ); } }

Slide 5

Slide 5 text

Composable widgets

Slide 6

Slide 6 text

class Container extends Widget { final int bgColor; final int borderColor; final double borderWidth; final Widget child; Container({this.bgColor, this.borderColor, this.borderWidth, this.child}); @override void display() { _applyDecorations(); child/.display(); } void _applyDecorations() { print('bgColor: $bgColor, borderColor: $borderColor, borderWidth: $borderWidth'); } }

Slide 7

Slide 7 text

Skia graphics engine (same as Chrome, Android & Fuchsia)

Slide 8

Slide 8 text

Cross platform (Android, iOS, Web & Desktop)

Slide 9

Slide 9 text

Key selling points! ● Excellent Developer Experience! ● Dart Language! ● Great and up-to-date documentation! ● Fun!

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

Stateless vs Stateful Widgets class Text extends StatelessWidget { // Displaying text doesn't require a state } class TextField extends StatefulWidget { // A text input needs to track its state }

Slide 12

Slide 12 text

Live demo!

Slide 13

Slide 13 text

Resource and Contact information About me ● https://github.com/ErikHellman/FlutterTodoDemo - The demo app ● https://twitter.com/ErikHellman - Where I post stuff regularly ● https://hellsoft.se - Where I post stuff less frequently ● [email protected] - Email that I usually read Flutter ● https://flutter.dev/ - Official documentation ● https://api.flutter.dev/ - Platform API reference ● https://pub.dev/ - Plugin (library) repository