Let's Start with Flutter

A basic Introduction, what is Flutter and how it works, the architecture of Flutter. How to install flutter and start hello world and Codelab of Dart language.

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

Transcript

1. Let’s Start with Flutter By: Dhrumil Shah (@dhuma1981)
2. Dhrumil Shah Mobile Developer, @Shipmnts Co-organizer, GDG Ahmedabad Founder, @Flutter_Flakes
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 Release Preview 1
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. A Widget can defined as • A structural element (like a Button or Menu) • A design element (like a Font or Color scheme) • A layout element (like a Margin or Padding) • It can be a business logic
20. 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
22. Skia Dart Text Foundation Animation Painting Rendering Widgets Material Gestures Engine (C++) Framework (Dart) Cupertino Each layer builds upon the previous layer
23. 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
25. Platform Channels
26. Using Platform channels allows for receiving method calls and sending back results
28. Install Flutter https://flutter.io/get-started/install/
29. Tooling $ flutter doctor Checks your environment and displays a report on terminal $ flutter upgrade Updates both the Flutter SDK and your packages
30. Hello World
31. Everything is Widget
32. StatefulWidget vs. StatelessWidget
34. 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 { ... }
35. Time for Codelab https://goo.gl/H5BZz2
37. References • Awesome Flutter - Wm Leler • The Magic of Flutter - Tim Messerschmidt • Flutter.io • Github.com/flutter
38. Thank you ;) @dhuma1981