Let's flirt with Flutter

Awesome flutter content for beginners.

Transcript

1. Let’s Flirt with Flutter By: Pankaj Sakariya (@SakariyaPankaj)
2. Pankaj Sakariya CEO, @SrashtaSoft Co-founder, @Genesis IT Solution Ahmedabad
4. Corona Pandemic • Blessing for us. • Because WE can spend time to improve our self. • Why we are waiting, let’s kickstart our journey. • Let’s flirt with Flutter together.
5. Very famous quote that Motivates me.
6. Very famous quote that Motivates me.
7. What is Flutter? • An SDK which helps to build high-performing, modern and beautiful apps • Works for all Android and iOS and Web (Technical Prev.) • An open-source toolkit, developed by Google* • 500+ contributions from the open source community *Currently Stable Version is 1.17.0
8. KickStart with Flutter https://flutter.dev/
10. Dart grew 532% in the past year.
12. Why Flutter is different?
13. Compiled to native MVC/ MVVM View Reactive Views Interpreted (JavaScript) iOS SDK Android SDK Technology: OEM SDKs
14. Compiled to native MVC/ MVVM View Reactive Views Interpreted (JavaScript) iOS SDK Android SDK Titanium, Cordova, PhoneGap, Ionic, ... Technology: WebViews
15. Compiled to native MVC/ MVVM View Reactive Views Interpreted (JavaScript) iOS SDK Android SDK Titanium, Cordova, PhoneGap, Ionic, ... Flutter React Native Technology: Reactive Views
16. JavaScript realm Native realm ⇦ Context Switch ⇨ Services, Events, Widgets Your app The Bridge
17. Flutter Advantages of reactive views, without a JS bridge Compiled to native code (not VM) on each platform
18. 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.
19. 1. Developer Experience 2. Performance
20. Design-oriented Development Flow
21. What do you see here?
22. Diagram the Layout - Look for rows and columns - Is there a grid? - Any overlapping elements? - Do we need tabs? - Padding, alignment or borders needed?
23. Designing bottom up
24. Everything is Widget here
25. Heights of good design via Flutter - App Reflectly
26. StatefulWidget vs. StatelessWidget
28. 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
30. 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 { ... }
31. Skia Dart Text Foundation Animation Painting Rendering Widgets Material Gestures Engine (C++) Framework (Dart) Cupertino Each layer builds upon the previous layer
32. 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
33. Platform Channels
34. Using Platform channels allows for receiving method calls and sending back results
37. 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
38. Latest Flutter things • https://flutter.dev/ • https://flutter.dev/docs/development/tools/sdk/releases • https://gallery.flutter.dev/#/ • https://itsallwidgets.com/ • https://flutterpolice.com/ • https://dartpad.dartlang.org/ • https://flutterindia.dev/#/ • https://flutter.github.io/samples/# • https://www.meetup.com/FlutterAHM/ ( Community ) • https://twitter.com/dhuma1981?lang=en (GDE for Flutter from our own Ahmedabad)
39. Time for Codelab https://bit.ly/2ytA0Zn
41. Thank you ;) @SakariyaPankaj