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
   

   View Slide

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

   View Slide

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
   

   View Slide

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!'),
   ),
   ),
   );
   }
   }
   

   View Slide

5. Composable widgets
   

   View Slide

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');
   }
   }
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

10. View Slide

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
    }
    

    View Slide

12. Live demo!
    

    View Slide

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
    

    View Slide