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.

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!
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