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

An introduction to Flutter (I Code Java - South Africa)

An introduction to Flutter (I Code Java - South Africa)

Flutter is a project from Google to produce cross-platform native apps for Android and iOS. Now available in a stable version, you will discover how the framework works and learn the main concepts to develop your first app.

Edouard Marquez

July 26, 2019
Tweet

More Decks by Edouard Marquez

Other Decks in Technology

Transcript

  1. An introduction to Flutter
    I Code Java Conference 2019

    View Slide

  2. An introduction to Flutter I Code Java 2019
    Who am I?
    Edouard Marquez

    Android & Flutter

    developer
    @g123k
    [email protected] Co-founder of the

    "Flutter Paris” meetup
    @FlutterFrance

    View Slide

  3. An introduction to Flutter I Code Java 2019
    What is Flutter?
    Flutter is a portable UI toolkit for
    building beautiful,
    natively-compiled applications
    from a single codebase.


    Android

    4.1+ (2012)
    iOS

    8.0+ (2014)

    View Slide

  4. An introduction to Flutter I Code Java 2019
    What is Flutter?
    OpenSource

    On every layer
    Native code

    = high speed performance

    View Slide

  5. An introduction to Flutter I Code Java 2019
    The history of everything
    Developer Quest

    View Slide

  6. The language

    View Slide

  7. An introduction to Flutter I Code Java 2019
    Dart
    From & by Google

    + renewed interest
    Multiplatform

    Cli, web and Flutter

    View Slide

  8. An introduction to Flutter I Code Java 2019
    AOT mode
    An introduction to Flutter I Code Java 2019

    View Slide

  9. An introduction to Flutter I Code Java 2019
    JIT mode
    An introduction to Flutter I Code Java 2019

    View Slide

  10. View Slide

  11. View Slide

  12. An introduction to Flutter I Code Java 2019
    Pub: the dependency repository of Dart
    pub.dev

    List all packages
    Package

    Dart code only
    Plugin

    Dart code and Android/iOS

    View Slide

  13. An introduction to Flutter I Code Java 2019
    Many plugins are already available
    Authentification

    Database & Cloud Firestore

    Storage

    Analytics

    Messaging

    AdMob
    SQLite database (SQFLite)

    Preferences (~ NSUserDefaults)
    Data
    Provider / Bloc

    Redux

    RXDart

    Flutter Stream Friends
    Others
    Google

    Facebook

    Twitter
    Accounts
    Firebase

    View Slide

  14. An introduction to Flutter I Code Java 2019
    Flare: the Lottie of Flutter

    View Slide

  15. The Flutter
    architecture

    View Slide

  16. An introduction to Flutter I Code Java 2019
    Native apps
    OEM

    Widgets
    GPS location Bluetooth
    Audio Sensors
    Camera Etc
    Platform
    Services
    Native

    code
    Application
    Canvas
    Events

    View Slide

  17. An introduction to Flutter I Code Java 2019
    WebViews (Ionic, Cordova…)
    Javascript
    WebView
    Application
    GPS location Bluetooth
    Audio Sensors
    Camera Etc
    Services
    Bridge
    Canvas
    Events
    Platform

    View Slide

  18. An introduction to Flutter I Code Java 2019
    React Native
    Javascript
    OEM

    Widgets
    Application
    GPS location Bluetooth
    Audio Sensors
    Camera Etc
    Services
    Bridge
    Canvas
    Events
    Platform

    View Slide

  19. An introduction to Flutter I Code Java 2019
    Flutter
    Native

    code
    Canvas
    Events
    Application
    GPS location Bluetooth
    Audio Sensors
    Camera Etc
    Services
    Widgets,

    Rendering
    Platform

    Channels
    Platform

    View Slide

  20. An introduction to Flutter I Code Java 2019
    The Flutter "stack"
    Material Cupertino
    Widgets
    Rendering
    Foundation
    Animation Painting Gestures
    Framework

    (Dart)
    Skia Dart Text
    Engine

    (C++)

    View Slide

  21. The Widgets

    View Slide

  22. An introduction to Flutter I Code Java 2019
    The concept of "declarative UI"
    SwiftUI

    iOS / iPad OS / Mac OS /

    TV OS / Watch OS
    Jetpack Compose

    Android

    View Slide

  23. An introduction to Flutter I Code Java 2019
    The concept of "declarative UI"
    SwiftUI

    iOS / iPad OS / Mac OS /

    TV OS / Watch OS
    Jetpack

    Compose

    Android
    import SwiftUI
    struct Content : View {
    @State var model = Themes.listModel
    var body: some View {
    List(model.items, action: model.selectItem) {
    Image(item.image)
    VStack(alignement: .leading) {
    Text(item.title)
    Text(item.subtitle)
    .color(.gray)
    }
    }
    }
    }

    View Slide

  24. Everything is a widget


    View Slide

  25. Everything is a widget


    View Slide

  26. Everything is a widget


    Composition over inheritance


    View Slide

  27. Everything is a widget


    Composition over inheritance


    Each widget is specialised


    View Slide

  28. Each widget is specialised


    Hello world
    Text("Hello world")

    View Slide

  29. Each widget is specialised


    Text("Hello world",
    style: TextStyle(

    fontWeight: FontWeight.bold)
    )
    Hello world

    View Slide

  30. Each widget is specialised


    Text("Hello world",
    style: TextStyle(

    fontWeight: FontWeight.bold,
    color: Colors.red)
    )
    color: Colors.red)
    Hello world

    View Slide

  31. Each widget is specialised


    Padding(
    padding: EdgeInsets.all(8.0)
    child: Text("Hello world",
    style: TextStyle(

    fontWeight: FontWeight.bold,
    color: Colors.red)
    )
    )
    Padding(
    padding: EdgeInsets.all(8.0)
    Hello world

    View Slide

  32. How many widgets are
    displayed on this screen?
    Quiz

    View Slide

  33. How many widgets are
    displayed on this screen?
    Quiz
    1 5 1

    View Slide

  34. View Slide

  35. View Slide

  36. View Slide

  37. class MyWidget extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
    return Center(
    child: Column(
    mainAxisSize: MainAxisSize.min,
    children: [
    Icon(Icons.people, size: 60.0),
    Text("Hello Johannesburg!")
    ],
    ),
    );
    }
    }

    View Slide

  38. class MyWidget extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
    return Center(
    child: Column(
    mainAxisSize: MainAxisSize.min,
    children: [
    Icon(Icons.people, size: 60.0),
    Text("Hello Johannesburg!")
    ],
    ),
    );
    }
    }

    View Slide

  39. class MyWidget extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
    return Center(
    child: Column(
    mainAxisSize: MainAxisSize.min,
    children: [
    Icon(Icons.people, size: 60.0),
    Text("Hello Johannesburg!")
    ],
    ),
    );
    }
    }

    View Slide

  40. class MyWidget extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
    return Center(
    child: Column(
    mainAxisSize: MainAxisSize.min,
    children: [
    Icon(Icons.people, size: 60.0),
    Text("Hello Johannesburg!")
    ],
    ),
    );
    }
    }

    View Slide

  41. View Slide

  42. class TotalPosts extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
    return Container(
    decoration: ShapeDecoration(shape: RoundedRectangleBorder()),
    child: Column(children: [
    Icon(Icons.photo_album),
    Text('260'),
    Text('Total posts'),
    Row(children: [
    Icon(Icons.trending_up),
    Text('26.84%')
    ]),
    ]),
    );
    }
    }

    View Slide

  43. class TotalPosts extends StatefulWidget {
    @override
    _TotalPostsState createState() => _TotalPostsState();
    }

    View Slide

  44. class _TotalPostsState extends State {
    int posts = 260;
    @override
    Widget build(BuildContext context) {
    return Container(
    decoration: ShapeDecoration(shape: RoundedRectangleBorder()),
    child: Column(children: [
    Icon(Icons.photo_album),
    Text('260'),
    Text('Total posts'),
    Row(children: [
    Icon(Icons.trending_up),
    Text('26.84%')
    ]),
    ]),
    );
    }
    }

    View Slide

  45. class _TotalPostsState extends State {
    int posts = 260;
    @override
    Widget build(BuildContext context) {
    return Container(
    decoration: ShapeDecoration(shape: RoundedRectangleBorder()),
    child: Column(children: [
    Icon(Icons.photo_album),
    Text('260'),
    Text('Total posts'),
    Row(children: [
    Icon(Icons.trending_up),
    Text('26.84%')
    ]),
    ]),
    );
    }
    }

    View Slide

  46. class _TotalPostsState extends State {
    int posts = 260;
    @override
    Widget build(BuildContext context) {
    return Container(
    decoration: ShapeDecoration(shape: RoundedRectangleBorder()),
    child: Column(children: [
    Icon(Icons.photo_album),
    Text(posts.toString()),
    Text('Total posts'),
    Row(children: [
    Icon(Icons.trending_up),
    Text('26.84%')
    ]),
    ]),
    );
    }
    }

    View Slide

  47. class _TotalPostsState extends State {
    int posts = 260;
    @override
    Widget build(BuildContext context) {
    return InkWell(
    onTap: () {
    setState(() {
    posts++;
    });
    },
    child: Container(
    child: Column(children: [
    // Same content
    ])
    ),
    );
    }
    }

    View Slide

  48. class _TotalPostsState extends State {
    int posts = 260;
    @override
    Widget build(BuildContext context) {
    return InkWell(
    onTap: () {
    setState(() {
    posts++;
    });
    },
    child: Container(
    child: Column(children: [
    // Same content
    ])
    ),
    );
    }
    }

    View Slide

  49. class _TotalPostsState extends State {
    int posts = 260;
    @override
    Widget build(BuildContext context) {
    return InkWell(
    onTap: () {
    setState(() {
    posts++;
    });
    },
    child: Container(
    child: Column(children: [
    // Same content
    ])
    ),
    );
    }
    }

    View Slide

  50. The platform views

    View Slide

  51. An introduction to Flutter I Code Java 2019
    Sometimes, Flutter must make some concessions
    Google Maps or WebView

    require a lot of work

    to recreate them in Flutter
    Essential Widgets
    Hello ads SDK
    Some Widgets

    will never exist
    The solution:

    The Platform Views

    View Slide

  52. View Slide

  53. Supported

    platforms

    View Slide

  54. An introduction to Flutter I Code Java 2019
    Android and iOS

    View Slide

  55. An introduction to Flutter I Code Java 2019
    Mix an existing native app with Flutter code
    Mix native & Flutter

    Can be integrated to any existing Android/iOS app

    View Slide

  56. An introduction to Flutter I Code Java 2019
    Communication between the Dart code and the “platforms”
    Method Channel

    Ask for a single value
    Stream Channel

    Listen to a stream of data

    View Slide

  57. One last

    thing…

    View Slide

  58. Web
    Desktop
    Embedded devices

    View Slide

  59. View Slide

  60. View Slide

  61. Thank you!


    Any questions?
    @g123k

    View Slide