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.

Erik Hellman

April 27, 2020
Tweet

More Decks by Erik Hellman

Other Decks in Programming

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

    View Slide