Build_your_First_App_with_Flutter.pdf

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 GDG Bangalore on 3rd March 2019

Google Slides with Animation & Gif: https://docs.google.com/presentation/d/1SyvPNgTxdCl59SEKx_zN6ws1Q8DCM2cMKP-DlCdeUws/edit?usp=sharing

Transcript

1. Build Your First App with Flutter By: Dhrumil Shah (@dhuma1981)
2. Dhrumil Shah Associate Product & Customer Success Manager, @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
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. The App itself is an Widget
21. The App itself is an Widget
22. The App itself is an Widget
24. 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
26. Skia Dart Text Foundation Animation Painting Rendering Widgets Material Gestures Engine (C++) Framework (Dart) Cupertino Each layer builds upon the previous layer
27. 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
29. Platform Channels
30. Using Platform channels allows for receiving method calls and sending back results
32. Install Flutter https://flutter.dev/docs/get-started/install
33. Tooling $ flutter doctor Checks your environment and displays a report on terminal $ flutter upgrade Updates both the Flutter SDK and your packages
34. Hello World
35. Everything is Widget
36. StatefulWidget vs. StatelessWidget
38. Stateless Widget • Dumb Widget • It doesn’t know anything • Gets render only once or • When the parent widget changes the configuration
39. Stateful Widget • Dynamic 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.
40. 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 { ... }
41. Let’s see in Action
42. Time to create our First App http://bit.ly/BYFA
44. References • Awesome Flutter - Wm Leler • The Magic of Flutter - Tim Messerschmidt • Flutter.dev • Github.com/flutter
45. Thank you ;) @dhuma1981