Tweet
Tweet

Slide 1

Slide 1 text

Pawan Kumar, GDE Twitter - @imthepk Youtube – MTechViral Github - iampawan Indore lutter, the future of mobile.

Slide 2

Slide 2 text

Disclaimer – I am a Flutter fanboy and a meme lover. Indore

Slide 3

Slide 3 text

About me Indore

Slide 4

Slide 4 text

About me Another Ordinary Software developer imthepk mtechviral iampawan

Slide 5

Slide 5 text

About me Another Software developer Google Developer Expert imthepk mtechviral iampawan

Slide 6

Slide 6 text

About me Another Software developer Google Developer Expert Software Engineer at FieldAssist imthepk mtechviral iampawan

Slide 7

Slide 7 text

Mobile Platforms Windows Blackberry Android iOS

Slide 8

Slide 8 text

Mobile Platforms Windows Blackberry Android iOS

Slide 9

Slide 9 text

Now it is all about

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

Thanks to

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

1st Problem - PM

Slide 16

Slide 16 text

2nd Problem - The Designer

Slide 17

Slide 17 text

Me

Slide 18

Slide 18 text

Product

Slide 19

Slide 19 text

One more option Flutter

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

One more option Flutter What is Flutter?

Slide 23

Slide 23 text

Flutter The One

Slide 24

Slide 24 text

THOUGHTS SOFTWARE

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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)

Slide 28

Slide 28 text

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.

Slide 29

Slide 29 text

System Architecture High-level overview Skia Dart Text Foundation Animation Painting Rendering Widgets Material Gestures Engine (C++) Framework (Dart) Cupertino

Slide 30

Slide 30 text

Are you convinced? Indore

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

Why Flutter is the future of mobile?

Slide 33

Slide 33 text

When you see mobile app development documentations

Slide 34

Slide 34 text

Organized 1. Properly Documented. ( Deeply go into the code to find out how it works)

Slide 35

Slide 35 text

Organized 2. Make it easy to see and understand how everything interacts with each other (NO XML).

Slide 36

Slide 36 text

Hot Doctor flutter doctor This command checks your environment and displays a report to the terminal window. Flutter App

Slide 37

Slide 37 text

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.

Slide 38

Slide 38 text

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.

Slide 39

Slide 39 text

No content

Slide 40

Slide 40 text

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.

Slide 41

Slide 41 text

Flutter UI KIT https://github.com/iampawan/Flutter-UI-Kit

Slide 42

Slide 42 text

Time taken to make Flutter UI-KIT

Slide 43

Slide 43 text

Hot Debugging

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

Set Break On Exception

Slide 46

Slide 46 text

Rewind

Slide 47

Slide 47 text

Continue

Slide 48

Slide 48 text

Hot Animations

Slide 49

Slide 49 text

Hot Animations

Slide 50

Slide 50 text

Hot Crash (Flutter) (Android)

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

App Widget Material Widget Scaffold Widget Column Container Text Button Render Tree Everything is a widget

Slide 54

Slide 54 text

Everything is a widget

Slide 55

Slide 55 text

Indore

Slide 56

Slide 56 text

The App is itself a widget.

Slide 57

Slide 57 text

The App is itself a widget.

Slide 58

Slide 58 text

Scaffold Introduced

Slide 59

Slide 59 text

ListView Introduced

Slide 60

Slide 60 text

Card Introduced

Slide 61

Slide 61 text

No content

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

Hot Dart Object Oriented JIT & AOT async-await / Future Streams Tree Shaking

Slide 64

Slide 64 text

Hot IDE Support Android Studio IntelliJ IDEA VS CODE

Slide 65

Slide 65 text

Is it ready for production?

Slide 66

Slide 66 text

Cons

Slide 67

Slide 67 text

Cons Room for improvement 1. Stable 1.0 is yet to come 2. (Release Preview 2 Just released)

Slide 68

Slide 68 text

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

Slide 69

Slide 69 text

Cons Room for improvement 3. Lack of few important widgets like WebView, Map etc. (WIP)

Slide 70

Slide 70 text

SAY YES TO YOUR DESIGNERS

Slide 71

Slide 71 text

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

Slide 72

Slide 72 text

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

Slide 73

Slide 73 text

Pawan Kumar, GDE Twitter - @imthepk Youtube – MTechViral Github - iampawan Indore Thank You! imthepk mtechviral iampawan

Slide 74

Slide 74 text

Q&A Indore imthepk mtechviral iampawan