Diving into Flutter

My First talk on Flutter at Multidots Solution Pvt Ltd (Ahmedabad, India)

Transcript

1. Diving Into Flutter - Bhavik Makwana
2. Objective • What is Flutter? • Why Flutter? • Framework • Widgets • Animations
3. Flutter? Flutter is a mobile app SDK for building, • High-performance. • High-fidelity mobile apps. • Using single codebase.
5. What is Flutter? • A new open source multiplatform mobile development SDK • Based on Dart • First alpha release on Christmas 2015 • Currently in Beta version 3
6. Why Flutter? • Single codebase • Hot reload • Fix crashes and continue debugging from where the app left off • Benefit from a rich set of Material Design and Cupertino (iOS-flavor) widgets built using Flutter’s own framework
7. The Flutter Framework
8. Building Layouts in Flutter
9. What do you see here?
10. Diagram the Layout • Identify the rows and columns. • Does the layout include a grid? • Are there overlapping elements? • Does the UI need tabs? • Notice areas that require alignment, padding, or borders.
11. Row Layout
13. Layout a widget
14. Text widget Image widget Text widget to the Center widget
15. Add the layout widget to the page
16. Aligning widgets
18. Sizing widgets
21. Tooling
22. Tools $ flutter doctor Checks your environment and displays a report on terminal $ flutter upgrade Updates both the Flutter SDK and your packages
23. Tools pubspec.yaml name: flutter_project description: An amazing Flutter project dependencies: flutter: sdk: flutter url_launcher: "^0.2.5"
24. Tools pubspec.yaml name: flutter_project description: An amazing Flutter project dependencies: flutter: sdk: flutter url_launcher: ">=0.1.2 <0.2.0"
25. Tools $ flutter packages get Update package dependencies $ flutter packages upgrade Will retrieve the highest available version of the package
26. Tools $ flutter format Automatically formats your code according to the Flutter-style $ flutter analyze Analyzes your code and help you find possible mistakes
27. Hot Reload
29. Great looking and fast Widgets
31. StatefulWidget vs. StatelessWidget
35. Platform Channels
37. Code???
41. Animation
43. • Animation types ◦ Tween animation ◦ Physics-based animation • Common animation patterns ◦ Animated list or grid ◦ Shared element transition ◦ Staggered animation
44. Animation Demos
46. Try it...
48. Additional resources Blog: What’s Revolutionary about Flutter by Wm Leler: goo.gl/bZcFR9 Video: Flutter's Rendering Pipeline by Adam Barth: youtu.be/UUfXWzp0-DU Video: The Mahogany Staircase by Ian Hickson: youtu.be/dkyY9WCGMi0 Video: YouTube videos by Pawan Kumar www.youtube.com/channel/UCFTM1FGjZSkoSPDZgtbp7 hA And of course: github.com/flutter & flutter.io
49. Thank You! Bhavik Makwana Android Developer Flutter Fanboy ibhavikmakwana ibhavikmakwana