Flutter Study Jam: let's build together an app for the GDG Venice

A brief introduction to the Flutter framework before starting a codelab where an app for GDG Venice will be built starting from a custom skeleton,

The skeleton is available on Github together with 3 sample applications: a hello world, a bottom navigation bar example, and a list view example.

https://github.com/GDG-Venezia/flutter-study-jam

Transcript

1. Flutter Study Jam
3. https://www.meetup.com/it-IT/pro/gdg/
5. What is Flutter?
6. Flutter is Google’s UI toolkit for building beautiful, natively compiled applications for mobile, web, and desktop from a single codebase. https://flutter.io/
7. What is Flutter? • A toolkit to build apps for mobile, web, and desktop, from a single codebase • Made by Google
8. https://gcemetery.co
9. What is Flutter? • A framework to build apps for mobile, web, and desktop, from a single codebase • Made by Google • Open Source • Dart
10. Flutter Features Fast Development Expressive and Flexible UI Native Performance
11. Fast Development • Hot Reload • State is maintained during builds • Thanks to a mix of Ahead-of-time (AOT) and Just-In-Time (JIT) compilation
12. Flutter Features Fast Development Expressive and Flexible UI Native Performance
13. Expressive and Flexible UI • Material Design and Cupertino widgets • Smooth scrolling • Platform awareness
14. Flutter Features Fast Development Expressive and Flexible UI Native Performance
15. Native Performance • Native Scrolling • Native Navigation • Native Icons • Native Fonts -> Full Native Performance
16. Flutter Framework and Engine Framework (Dart) Engine (C++) Skia Dart Text Material Cupertino Widgets Rendering Animation Painting Gestures Foundation
17. Everything is a widget! • Structural Element (Button, Menu …)
18. • Structural Element (Button, Menu …)
19. Everything is a widget! • Structural Element (Button, Menu …) • Stylistic Element (Font, Color Scheme ..)
20. • Stylistic Element (Font, Color Scheme ..)
21. Everything is a widget! • Structural Element (Button, Menu …) • Stylistic Element (Font, Color Scheme ..) • Aspect of Layout (Padding, Align ..)
22. • Aspect of Layout (Padding, Align ..)
23. Everything is a widget! • Structural Element (Button, Menu …) • Stylistic Element (Font, Color Scheme ..) • Aspect of Layout (Padding, Align ..) …
24. https://flutter.io/docs/development/ui/widgets
25. Hello World
26. Stateless Widget • Immutable State: all the properties can’t change
27. Stateful Widget • Mutable State http://bit.ly/fsj-hello-world
28. Dependency Management • Dependencies and assets (font, image, audio, etc) are handled through the pubspec.yaml file
32. GDG Venezia Showcase
33. But wait…
34. we still have to talk...
36. Event Screen • List of GDG Venezia’s events: both past and present
37. About Screen • A card with some “about” text • The list of organizers
38. Photo Screen • A list of photo from the GDG Venezia’s events
39. Social Screen • List of GDG Venezia’s social network
40. GDG Venezia Showcase • No detail screen…. Up to you! ‍‍ • Only guidelines, you can differ from it!
42. http://bit.ly/fsj-main-repo
43. Repo Github • Hello World • Bottom Navigation Bar Example • List View Example • GDG Venezia App Skeleton http://bit.ly/fsj-main-repo
44. Repo Github • Fork the skeleton • Share your work to Github, if you want! • Share a screenshot on Twitter! #flutterstudyjam #appgdgvenezia @gdgvenezia • Another event to go deep with Business Logic? http://bit.ly/fsj-skeleton
45. • http://bit.ly/fsj-main-repo • http://bit.ly/fsj-bottom-navigation • http://bit.ly/fsj-skeleton • http://bit.ly/fsj-hello-world • http://bit.ly/fsj-list Repo Links
46. • https://flutter.io/docs • https://eu.udacity.com/course/build-native-mobile-apps-with-flutter--ud905 • https://www.youtube.com/playlist?list=PLjxrf2q8roU3ahJVrSgAnPjzkpGmL9Czl Continue Learning!
47. Feedback http://bit.ly/flutter-study-jam-feedback
48. Slide http://bit.ly/flutter-study-jam-slide
49. Happy Coding!