Let's Flirt with Flutter

A basic Introduction, what is Flutter and how it works, and Codelab of Dart language.

Google Drive Link: https://goo.gl/MmKpYU

1. Let’s Flirt with Flutter By: Dhrumil Shah (@dhuma1981)
2. Dhrumil Shah Mobile Developer, @Shipmnts Co-organizer, Google Developers Group Ahmedabad
4. What is Flutter? • An SDK which helps to build high-performing, modern and beautiful apps • Works for both Android and iOS • An open-source toolkit, developed by Google* • 100+ contributions from the open source community *Currently in Beta
5. Why Flutter is different?
6. Compiled to native MVC/ MVVM View Reactive Views Interpreted (JavaScript) iOS SDK Android SDK Technology: OEM SDKs
7. Compiled to native MVC/ MVVM View Reactive Views Interpreted (JavaScript) iOS SDK Android SDK Titanium, Cordova, PhoneGap, Ionic, ... Technology: WebViews
8. Compiled to native MVC/ MVVM View Reactive Views Interpreted (JavaScript) iOS SDK Android SDK Titanium, Cordova, PhoneGap, Ionic, ... Flutter React Native Technology: Reactive Views
9. JavaScript realm Native realm ⇦ Context Switch ⇨ Services, Events, Widgets Your app The Bridge
10. Flutter Advantages of reactive views, without a JS bridge Compiled to native code (not VM) on each platform
11. Who is Flutter for? • Designers converge on a brand-driven experience on Android and iOS • Prototypers get a high-fidelity and fast way to build working prototypes. • Developers benefit from fantastic developer tools, an easy-to-use language, a rich set of widgets and great IDE support. Flutter frees up valuable time for working on features and delightful experiences.
13. 1. Developer Experience 2. Performance
14. Design-oriented Development Flow
15. What do you see here?
16. Diagram the Layout - Look for rows and columns - Is there a grid? - Any overlapping elements? - Do we need tabs? - Padding, alignment or borders needed?
17. Designing bottom up
18. Everything is Widget here
19. StatefulWidget vs. StatelessWidget
21. Hot Reload • Injecting updated source code files into the running Dart VM • Stateful: App state is retained after a reload. • Quickly iterate on a screen deeply nested in your app
23. Customizing and extending Widgets Flutter’s Widget system was designed to be easily customizable Composition: Widgets are built out of smaller widgets that you can reuse and combine in novel ways to make custom widgets class RaisedButton extends StatelessWidget { ... }
24. Skia Dart Text Foundation Animation Painting Rendering Widgets Material Gestures Engine (C++) Framework (Dart) Cupertino Each layer builds upon the previous layer
25. Flutter’s new architecture 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
26. Platform Channels
27. Using Platform channels allows for receiving method calls and sending back results
30. DART is there to start with Flutter • Sound type system • Tree Shaking • Rich core libraries • Single codebase for Android and iOS • Rapid development cycles • Great tooling
31. Time for Codelab https://goo.gl/zNxgqo
33. Thank you ;) @dhuma1981