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

Introduction to Flutter

Introduction to Flutter

These are the slides for my webinar on Introduction to Flutter.

You can find the recording of this session at https://youtu.be/C6Q2zQptCFE and the source code for the app I was livecoding at https://github.com/ErikHellman/FlutterTodoDemo.

2307a37297162f815342545a2068b2f1?s=128

Erik Hellman

April 27, 2020
Tweet

Transcript

  1. Introduction to Flutter Erik Hellman <erik.hellman@hellsoft.se>

  2. Agenda • Overview of Flutter • Introduction to Dart •

    Flutter tools demo • Live coding a Flutter app • Q & A
  3. 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
  4. 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!'), ), ), ); } }
  5. Composable widgets

  6. 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'); } }
  7. Skia graphics engine (same as Chrome, Android & Fuchsia)

  8. Cross platform (Android, iOS, Web & Desktop)

  9. Key selling points! • Excellent Developer Experience! • Dart Language!

    • Great and up-to-date documentation! • Fun!
  10. None
  11. 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 }
  12. Live demo!

  13. 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 • erik.hellman@hellsoft.se - Email that I usually read Flutter • https://flutter.dev/ - Official documentation • https://api.flutter.dev/ - Platform API reference • https://pub.dev/ - Plugin (library) repository