Hitchhiker's guide to the Flutter

Transcript

1. Bhavik Makwana @ibhavikmakwana Hitchhiker's guide to the Flutter
2. What is Flutter? Gandhinagar
3. What is Flutter? • Google’s mobile app SDK, • Native interfaces in iOS/Android, • Record time, • Free and open source, • Dart
4. Why Flutter? Gandhinagar
5. Natural look and Feel
6. Natural look and Feel
7. No Limitations
8. Provide 60 - 120 frames per second (fps) performance
10. Hot Reload
11. Works with popular tools and platforms Firebase VS Code Android Studio Android APIs iOS APIs Xcode 3rd-party Android SDKs 3rd-party iOS SDKs
12. Rich set of widgets
13. Framework Gandhinagar
14. Framework (Dart) Engine (C++) Skia Dart Text Material Cupertino Widgets Rendering Animation Painting Gestures Foundation
15. Native Code Widgets, Rendering Platform Channels Your App Platform Canvas Events Location Bluetooth Audio Sensors Camera etc.
16. Building Layouts in Flutter Gandhinagar
17. What do you see here?
18. 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.
19. Row Layout 19
20. Container Row Column Icon Text Container Column Icon Text Container Column Icon Text Container
21. Text widget Image widget Text widget with Center widget
22. Aligning widgets Gandhinagar
23. Row Column Main Axis Cross Axis Main Axis Cross Axis
24. Tooling Gandhinagar
25. Tools $ flutter doctor Checks your environment and displays a report on terminal $ flutter upgrade Updates both the Flutter SDK and your packages
26. Tools pubspec.yaml name: flutter_project description: An amazing Flutter project dependencies: flutter: sdk: flutter url_launcher: "^0.2.5"
27. Tools pubspec.yaml name: flutter_project description: An amazing Flutter project dependencies: flutter: sdk: flutter url_launcher: ">=0.1.2 <0.2.0"
28. Tools $ flutter packages get Update package dependencies $ flutter packages upgrade Will retrieve the highest available version of the package
29. Tools $ flutter format Automatically formats your code according to the Flutter-style $ flutter analyze Analyzes your code and help you find possible mistakes
30. Great looking and fast Widgets
32. StatefulWidget vs. StatelessWidget Gandhinagar
36. Platform Channels
38. Animation Gandhinagar
40. • Animation types ◦ Tween animation ◦ Physics-based animation • Common animation patterns ◦ Animated list or grid ◦ Shared element transition ◦ Staggered animation
41. Animations Demo Gandhinagar
43. Try it... Gandhinagar
44. 44 Isme Tera GHATA Mera Kuch nahi Jata..
45. Additional Resources Gandhinagar
46. 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 (MTechViral): https://bit.ly/2Sb5isS Flutter Live: https://developers.google.com/events/flutter-live/ The Boring Flutter Development Show: https://bit.ly/2yWNmcr #HumpDayQandA: https://zoom.us/j/6592194465 Codelabs: https://codelabs.developers.google.com Flutter Weekly: https://flutterweekly.net And of course: github.com/flutter & flutter.io
47. @ibhavikmakwana https://github.com/ibhavikmakwana https://medium.com/@ibhavikmakwana https://twitter.com/ibhavikmakwana https://in.linkedin.com/in/ibhavikmakwana
48. Flutter UI Show Gandhinagar
49. Thomas Burkhart
50. Bhavik Makwana @ibhavikmakwana Gandhinagar Thank you!
52. Q&A Gandhinagar