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.

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
   edouard@marquez.cool 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