Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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.

081b06f3d680a58d45bf672c0dfa0a6a?s=128

Edouard Marquez

July 26, 2019
Tweet

Transcript

  1. An introduction to Flutter I Code Java Conference 2019

  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
  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)
  4. An introduction to Flutter I Code Java 2019 What is

    Flutter? OpenSource On every layer Native code = high speed performance
  5. An introduction to Flutter I Code Java 2019 The history

    of everything Developer Quest
  6. The language

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

    & by Google + renewed interest Multiplatform Cli, web and Flutter
  8. An introduction to Flutter I Code Java 2019 AOT mode

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

    An introduction to Flutter I Code Java 2019
  10. None
  11. None
  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
  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
  14. An introduction to Flutter I Code Java 2019 Flare: the

    Lottie of Flutter
  15. The Flutter architecture

  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
  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
  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
  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
  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++)
  21. The Widgets

  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
  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) } } } }
  24. Everything is a widget “ “

  25. Everything is a widget “ “

  26. Everything is a widget “ “ Composition over inheritance “

  27. Everything is a widget “ “ Composition over inheritance “

    “ Each widget is specialised “ “
  28. Each widget is specialised “ “ Hello world Text("Hello world")

  29. Each widget is specialised “ “ Text("Hello world", style: TextStyle(


    fontWeight: FontWeight.bold) ) Hello world
  30. Each widget is specialised “ “ Text("Hello world", style: TextStyle(


    fontWeight: FontWeight.bold, color: Colors.red) ) color: Colors.red) Hello world
  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
  32. How many widgets are displayed on this screen? Quiz

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

    5 1
  34. None
  35. None
  36. None
  37. class MyWidget extends StatelessWidget { @override Widget build(BuildContext context) {

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

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

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

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

    return Container( decoration: ShapeDecoration(shape: RoundedRectangleBorder()), child: Column(children: <Widget>[ Icon(Icons.photo_album), Text('260'), Text('Total posts'), Row(children: <Widget>[ Icon(Icons.trending_up), Text('26.84%') ]), ]), ); } }
  43. class TotalPosts extends StatefulWidget { @override _TotalPostsState createState() => _TotalPostsState();

    }
  44. class _TotalPostsState extends State<TotalPosts> { int posts = 260; @override

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

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

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

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

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

    Widget build(BuildContext context) { return InkWell( onTap: () { setState(() { posts++; }); }, child: Container( child: Column(children: <Widget>[ // Same content ]) ), ); } }
  50. The platform views

  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
  52. None
  53. Supported platforms

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

    iOS
  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
  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
  57. One last thing…

  58. Web Desktop Embedded devices

  59. None
  60. None
  61. Thank you! Any questions? @g123k