What the Flutter?

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

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

Transcript

1. What the Flutter? By: Dhrumil Shah (@dhuma1981)
2. Dhrumil Shah Mobile Developer, @Shipmnts Co-organizer, Google Developers Group Ahmedabad
3. 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
4. Why Flutter is different?
5. Compiled to native MVC/ MVVM View Reactive Views Interpreted (JavaScript) iOS SDK Android SDK Technology: OEM SDKs
6. Compiled to native MVC/ MVVM View Reactive Views Interpreted (JavaScript) iOS SDK Android SDK Titanium, Cordova, PhoneGap, Ionic, ... Technology: WebViews
7. Compiled to native MVC/ MVVM View Reactive Views Interpreted (JavaScript) iOS SDK Android SDK Titanium, Cordova, PhoneGap, Ionic, ... Flutter React Native Technology: Reactive Views
8. JavaScript realm Native realm ⇦ Context Switch ⇨ Services, Events, Widgets Your app The Bridge
9. Flutter Advantages of reactive views, without a JS bridge Compiled to native code (not VM) on each platform
10. 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.
12. 1. Developer Experience 2. Performance
13. Design-oriented Development Flow
14. What do you see here?
15. Diagram the Layout - Look for rows and columns - Is there a grid? - Any overlapping elements? - Do we need tabs? - Padding, alignment or borders needed?
16. Designing bottom up
17. Everything is Widget here
18. 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
20. Skia Dart Text Foundation Animation Painting Rendering Widgets Material Gestures Engine (C++) Framework (Dart) Cupertino Each layer builds upon the previous layer
21. 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
23. Platform Channels
24. Using Platform channels allows for receiving method calls and sending back results
26. Install Flutter https://flutter.io/get-started/install/
27. Hello World
28. Everything is Widget
29. StatefulWidget vs. StatelessWidget
31. 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 { ... }
32. Time for Codelab https://goo.gl/H5BZz2
34. Thank you ;) @dhuma1981