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

Flutter, the future of mobile.

059d4fc86078000466f96ef95f1907f4?s=47 Pawan Kumar
November 18, 2018

Flutter, the future of mobile.

A presentation about how flutter can be the future of mobile - at GDG Indore DevFest18

059d4fc86078000466f96ef95f1907f4?s=128

Pawan Kumar

November 18, 2018
Tweet

More Decks by Pawan Kumar

Other Decks in Technology

Transcript

  1. Pawan Kumar, GDE Twitter - @imthepk Youtube – MTechViral Github

    - iampawan Indore lutter, the future of mobile.
  2. Disclaimer – I am a Flutter fanboy and a meme

    lover. Indore
  3. About me Indore

  4. About me Another Ordinary Software developer imthepk mtechviral iampawan

  5. About me Another Software developer Google Developer Expert imthepk mtechviral

    iampawan
  6. About me Another Software developer Google Developer Expert Software Engineer

    at FieldAssist imthepk mtechviral iampawan
  7. Mobile Platforms Windows Blackberry Android iOS

  8. Mobile Platforms Windows Blackberry Android iOS

  9. Now it is all about

  10. Android vs iOS ( Active Devices) ~2.5 Billion ~1.3 Billion

  11. Thanks to

  12. Options Native Android & iOS React Native Xamarin Ionic Cordova

    Phonegap Framework 7
  13. Options Native Android & iOS React Native Xamarin Ionic Cordova

    Phonegap Framework 7
  14. Need To Learn (But this is not a problem) Native

    Xamarin Others • Java/Kotlin & XML & Gradle • Swift/Obj-c & Storyboard • C# • Xaml • Html,CSS • JS, JSX
  15. 1st Problem - PM

  16. 2nd Problem - The Designer

  17. Me

  18. Product

  19. One more option Flutter

  20. None
  21. None
  22. One more option Flutter What is Flutter?

  23. Flutter The One

  24. THOUGHTS SOFTWARE

  25. Flutter A multi-platform mobile app SDK for Android, iOS and

    *Fuchsia Uses DART - compiles to efficient ARM code Rich Widget catalog Modern, React inspired View-Framework APIs for unit and integration test. CLI
  26. Flutter A multi-platform mobile app SDK for Android, iOS and

    *Fuchsia Uses DART - compiles to efficient ARM code Rich Widget catalog Modern, React inspired View-Framework
  27. Flutter Goals Build Beautiful UIs High Performance Apps with Native

    feel Be Productive Run Same UI on multiple platforms, perfect for brand first designs (optional)
  28. What’s unique? Engine is shipped in the apk/ipa. Doesn’t use

    OEM Widgets. Constant 60 FPS. Ships sdk with the app, no fragmentation or compatibility issues. No Bridge Needed, Direct drawing to platform canvas.
  29. System Architecture High-level overview Skia Dart Text Foundation Animation Painting

    Rendering Widgets Material Gestures Engine (C++) Framework (Dart) Cupertino
  30. Are you convinced? Indore

  31. None
  32. Why Flutter is the future of mobile?

  33. When you see mobile app development documentations

  34. Organized 1. Properly Documented. ( Deeply go into the code

    to find out how it works)
  35. Organized 2. Make it easy to see and understand how

    everything interacts with each other (NO XML).
  36. Hot Doctor flutter doctor This command checks your environment and

    displays a report to the terminal window. Flutter App
  37. Hot Reload • Blue AppBar Background • Blue Flutter Logo

    Flutter's hot reload helps you quickly and easily experiment, build UIs, add features, and fix bugs faster. Experience sub-second reload times, without losing state, on emulators, simulators, and hardware for iOS and Android.
  38. Hot Reload • Red AppBar Background • Red Flutter Logo

    Flutter's hot reload helps you quickly and easily experiment, build UIs, add features, and fix bugs faster. Experience sub-second reload times, without losing state, on emulators, simulators, and hardware for iOS and Android.
  39. None
  40. Expressive, Beautiful & HOT UIs Delight your users with Flutter's

    built-in beautiful Material Design and Cupertino (iOS-flavor) widgets, rich motion APIs, smooth natural scrolling, and platform awareness.
  41. Flutter UI KIT https://github.com/iampawan/Flutter-UI-Kit

  42. Time taken to make Flutter UI-KIT

  43. Hot Debugging

  44. Hot Rewind HOT REWIND HELPS YOU IN TIME TRAVELLING YOUR

    CODE.
  45. Set Break On Exception

  46. Rewind

  47. Continue

  48. Hot Animations

  49. Hot Animations

  50. Hot Crash (Flutter) (Android)

  51. Hot Pub https://pub.dartlang.org/flutter

  52. Hot Widgets Scaffold Material App Row Column FAB SizedBox Expanded

    Padding Container AppBar Stack Drawer Text Center Material Gesture Detector Inkwell Card Positioned TabBar Hero Align FlatButton CircleAvatar Theme FutureBuilder StreamBuilder ListViewBuilder Asset Image Network Image Memory Image
  53. App Widget Material Widget Scaffold Widget Column Container Text Button

    Render Tree Everything is a widget
  54. Everything is a widget

  55. Indore

  56. The App is itself a widget.

  57. The App is itself a widget.

  58. Scaffold Introduced

  59. ListView Introduced

  60. Card Introduced

  61. None
  62. Hot Platform Channel https://flutter.io/platform-channels/

  63. Hot Dart Object Oriented JIT & AOT async-await / Future

    Streams Tree Shaking
  64. Hot IDE Support Android Studio IntelliJ IDEA VS CODE

  65. Is it ready for production?

  66. Cons

  67. Cons Room for improvement 1. Stable 1.0 is yet to

    come 2. (Release Preview 2 Just released)
  68. Cons Room for improvement Core Engine 3.0 MB Framework +

    App Code 540KB License file 55 KB Necessary Java Code 57KB ICU Data 433KB 2. APK SIZE ~ 4.2MB
  69. Cons Room for improvement 3. Lack of few important widgets

    like WebView, Map etc. (WIP)
  70. SAY YES TO YOUR DESIGNERS

  71. “With Flutter, the only limitation is your own imagination.”

  72. Links to learn flutter Pawan Kumar • MTechViral YouTube (100+)

    • iampawan – github(75+) • Let's flutter - fb group (5K+) Google • Flutter.io • Udacity Course • Flutter Codelabs • Boring Development Show Misc. • Fluttery • Awesome Flutter Repo • Udemy Courses • Slack,Gitter, Reddit
  73. Pawan Kumar, GDE Twitter - @imthepk Youtube – MTechViral Github

    - iampawan Indore Thank You! imthepk mtechviral iampawan
  74. Q&A Indore imthepk mtechviral iampawan