$30 off During Our Annual Pro Sale. View Details »

Intro to Flutter

danybony
January 21, 2019

Intro to Flutter

Flutter is Google’s solution to build native multi-platform apps from a single codebase.
In this talk I gave at Programmers in Padua meetup I explain the main characteristics and concepts behind Flutter, compared to other cross-platform application frameworks. I also show how UIs are built using Flutter and what direction the framework is taking in relation of bringing it to the web and desktop.

danybony

January 21, 2019
Tweet

More Decks by danybony

Other Decks in Programming

Transcript

  1. Introduction to Flutter
    Daniele Bonaldo

    View Slide

  2. Daniele Bonaldo
    Android Developer
    @danybony_
    danybony
    danielebonaldo.com

    View Slide

  3. What is it Flutter?
    • Application framework
    • Cross-platform
    • Native
    • Backed by Google
    • Uses Dart
    • Plugin system
    • IDE/Editor support

    View Slide

  4. Productive
    Open
    Beautiful
    Fast

    View Slide

  5. Beautiful

    View Slide

  6. Fast

    View Slide

  7. Productive

    View Slide

  8. Open

    View Slide

  9. Open

    View Slide

  10. Flutter vs React Native
    Dart

    Compiles to native code

    Own implementation of the
    platform components. Draws
    directly using a canvas

    Text editor plugins + IDE support

    Newer technology and not as much
    support

    ✦ Javascript

    ✦ Uses the Javascript bridge

    ✦ Uses the platform native
    components. Context switching
    between JS and native

    ✦ Text editor plugins

    ✦ Larger community and more
    support


    View Slide

  11. Dart
    •Developed by Google
    •Client-side language
    •Android, iOS & Web
    •Async & Reactive
    •Supports Mixins
    •AOT & JIT Compilation
    •Familiar Syntax
    •pub (package manager)

    View Slide

  12. Java vs Dart

    View Slide

  13. Package manager
    pubspec.yaml
    name: pet_activity_tracker
    description: A new Flutter project.
    version: 1.0.0+1
    environment:
    sdk: ">=2.0.0-dev.68.0 <3.0.0"
    dependencies:
    flutter:
    sdk: flutter
    cupertino_icons: ^0.1.2
    charts_flutter: ^0.5.0
    google_sign_in: ^3.2.4
    firebase_auth: ^0.6.6
    dev_dependencies:
    flutter_test:
    sdk: flutter
    flutter:
    uses-material-design: true
    assets:
    - assets/google_logo.png

    View Slide

  14. Flutter architecture

    View Slide

  15. Flutter architecture

    View Slide

  16. Widgets
    EVERYTHING is a widget
    Composition over inheritance
    Declaration + binding
    Easier testing

    View Slide

  17. Widgets
    https://flutter.io/docs/development/ui/widgets

    View Slide

  18. Stateless widgets
    class StaticWidget extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
    return new Text(’Hello!’);
    }
    }

    View Slide

  19. Stateful widgets
    class CounterWidget extends StatefulWidget {
    @override
    CounterState createState() {
    return new CounterState();
    }
    }
    class CounterState extends State {
    int _counter = 0;
    @override
    Widget build(BuildContext context) {
    return new Text('Current value: $_counter.');
    }
    void increment() {
    setState(() {
    ++_counter;
    });
    }
    }

    View Slide

  20. Widgets updates
    Container

    (blue)
    Counter

    (1)

    View Slide

  21. Widgets updates
    Container

    (blue)
    Element 1
    Element 2
    Counter

    (1)
    Current value: 1

    View Slide

  22. Widgets updates
    Container

    (black)
    Element 1
    Element 2
    Counter

    (2)
    Current value: 1

    View Slide

  23. Widgets updates
    Container

    (black)
    Element 1
    Element 2
    Counter

    (2)
    Current value: 2

    View Slide

  24. Widgets updates
    Container

    (black)
    Element 1
    Element 2
    Error
    Current value: 2

    View Slide

  25. Widgets updates
    Container

    (black)
    Element 1
    Element 3

    Error

    View Slide

  26. Platform Channels

    View Slide

  27. Platform Views

    View Slide

  28. Flutter on web

    View Slide

  29. Flutter on web

    View Slide

  30. Flutter on web

    View Slide

  31. Flutter on web

    View Slide

  32. Flutter on desktop
    https://github.com/google/flutter-desktop-embedding

    View Slide

  33. More info
    Flutter
    https://flutter.io
    Flutter codelabs
    https://github.com/flutter/codelabs
    Apps showcase
    https://itsallwidgets.com/

    View Slide

  34. Daniele Bonaldo
    Thank You!
    Any questions?
    @danybony_
    danybony
    danielebonaldo.com
    Slides at:
    bit.ly/flutter-pip

    View Slide