Let's Flutter(IWD)

Transcript

1. Let’s Flutter
2. Bhavik Makwana Keeper of widgets Twitter: @ibhavikmakwana Github: @ibhavikmakwana
3. Dhrumil Shah Principal sir Twitter: @dhuma1981 Github: @dhuma1981
12. Some Special devices which changes fonts of your app, and you know that brand :P
15. So we found this solution
20. 1. What is Flutter?
21. “ ▸ Google’s mobile app SDK, ▸ Native interfaces in iOS/Android, ▸ Record time, ▸ Free and open source, ▸ Dart
22. 2. Why Flutter?
23. Natural Feel & Look
24. No Limitations
25. Provides 60 - 120 frames per second (fps)
27. Hot Reload
28. Works with popular tools and platforms Firebase VS Code Android Studio Android APIs iOS APIs Xcode 3rd-party Android SDKs 3rd-party iOS SDKs
29. Rich set of widgets
30. Great looking and fast Widgets
32. 2. Framework
33. Framework (Dart) Engine (C++) Skia Dart Text Material Cupertino Widgets Rendering Animation Painting Gestures Foundation
34. Native Code Widgets, Rendering Platform Channels Your App Platform Canvas Events Location Bluetooth Audio Sensors Camera etc.
35. 3. Building layouts in Flutter
36. What do you see here?
37. 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.
38. Row Layout 38
39. Container Row Column Icon Text Container Column Icon Text Container Column Icon Text Container
40. Text widget Image widget Text widget with Center widget
41. 4. Aligning Widgets
42. Row Column Main Axis Cross Axis Main Axis Cross Axis
43. 5. Tooling
44. Tools $ flutter doctor Checks your environment and displays a report on terminal $ flutter upgrade Updates both the Flutter SDK and your packages
45. Tools pubspec.yaml name: flutter_project description: An amazing Flutter project dependencies: flutter: sdk: flutter url_launcher: "^0.2.5"
46. Tools pubspec.yaml name: flutter_project description: An amazing Flutter project dependencies: flutter: sdk: flutter url_launcher: ">=0.1.2 <0.2.0"
47. Tools $ flutter packages get Update package dependencies $ flutter packages upgrade Will retrieve the highest available version of the package
48. Tools $ flutter format Automatically formats your code according to the Flutter-style $ flutter analyze Analyzes your code and help you find possible mistakes
49. 6. StatefulWidget Vs StatelessWidget
54. Platform Channels
58. 7. Additional Resources
59. 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 FlutterFlakes: https://twitter.com/Flutter_Flakes #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
60. @ibhavikmakwana https://github.com/ibhavikmakwana https://github.com/dhuma1981 https://medium.com/@ibhavikmakwana https://medium.com/@dhuma1981 https://twitter.com/dhuma1981 https://twitter.com/ibhavikmakwana https://www.linkedin.com/in/dhuma1981/ https://in.linkedin.com/in/ibhavikmakwana
61. Try it..
62. 62 Isme Tera GHATA Mera Kuch nahi Jata..
63. “ Bhavik Makwana Simform & Flutter Ahmedabad @ibhavikmakwana (one for all) Thank you! Dhrumil Shah Shipmnts & GDG Ahmedabad @dhuma1981 @Flutter_Flakes
65. Q&A