Flutter: Makes developer’s life easy

A basic Introduction, what is Flutter and how it works, the architecture of Flutter. What are the pain points of Android Developers and how it is been resolved in Flutter. And a live code demo.

Talk delivered at DevFest Coimbatore 2018

Google Slides with Animation & Gif: https://goo.gl/23vzAv

Transcript

1. Dhrumil Shah, Shipmnts & GDG Ahmedabad @dhuma1981 @Flutter_Flakes Coimbatore Flutter: Makes developer’s life easy
2. Dhrumil Shah Mobile Developer, @Shipmnts Co-organizer, @GDGAhmedabad Founder, @Flutter_Flakes
3. “In 2011” When I started with Android development
12. Some Special devices which changes fonts of your app, and you know that brand :P
15. Last Year I joined ...
16. Shipmnts.com
17. Now I am not just Android Developer
18. I am the Mobile Developer
19. I started exploring cross-platfrom SDKs
24. What exactly Flutter is?
25. Flutter is Coimbatore • An SDK to build beautiful native apps in record time • Works for both Android & iOS • An open source Toolkit by Google
26. Flutter architecture Coimbatore Skia Dart Text Foundation Animation Painting Rendering Widgets Material Gestures Engine (C++) Framework (Dart) Cupertino
28. Flutter apps are compiled to native machine (ARM) code
29. Compiled to native MVC/ MVVM View Reactive Views Interpreted (JavaScript) iOS SDK Android SDK Technology: OEM SDKs
30. Compiled to native MVC/ MVVM View Reactive Views Interpreted (JavaScript) iOS SDK Android SDK Titanium, Cordova, PhoneGap, Ionic, ... Technology: WebViews
31. Compiled to native MVC/ MVVM View Reactive Views Interpreted (JavaScript) iOS SDK Android SDK Titanium, Cordova, PhoneGap, Ionic, ... Flutter React Native Technology: Reactive Views
33. “Everything is Widget”
35. Let’s Identify different Widgets
36. What do you see here?
37. Diagram the Layout - Look for rows and columns - Is there a grid? - Any overlapping elements? - Do we need tabs? - Padding, alignment or borders needed?
40. Widget can be Coimbatore • A structural element (like a Button or Menu) • A layout element (like a Margin or Padding) • A design element (like a Font or Color scheme)
41. “Stateless Widget vs Stateful Widget”
42. Stateless Widget Coimbatore • It doesn’t know anything • Dumb Widget • Gets render only once or • When the parent widget changes the configuration
43. Stateful Widget Coimbatore • Dynamic widget which has its own properties • Those property is know as state of the widget • The state of the widget can be changed by user input, any operation or other widget’s state change. • setState() method is used to change the state. • Each time widget gets rebuild when setState() method gets called.
44. “HOT Reload”
46. Hot Reload is Coimbatore • Stateful: App state is retained after a reload. • Injecting updated source code files into the running Dart VM • Quickly iterate on a screen deeply nested in your app
48. “How to access OS/Device specific feature?”
49. Using Platform channels allows for receiving method calls and sending back results
50. Hot Reload is Coimbatore • Stateful: App state is retained after a reload. • Injecting updated source code files into the running Dart VM • Quickly iterate on a screen deeply nested in your app
51. Flutter’s benefits Flutter provides its own widgets • Compiles to native Code • No reliance on OEM widgets • No bridge needed • Turns layout on its head! • Widgets are simple and fast • Full customisation and extensibility
54. And That’s it
55. References Coimbatore • Awesome Flutter - Wm Leler • The Magic of Flutter - Tim Messerschmidt • Flutter.io • Github.com/flutter
56. Dhrumil Shah, Shipmnts & GDG Ahmedabad @dhuma1981 @Flutter_Flakes Coimbatore Thank you!