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.

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

  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
  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