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.

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