Hi, have you met Flutter? - Fémo 09-02-19

Hi, have you met Flutter? - Fémo 09-02-19

Flutter e' il nuovo framework di Google per creare applicazioni native per Android ed iOs usando una singola codebase. Flutter si distingue per performance native, Interfaccia utente flessibile ed uno sviluppo veloce grazie all'hot reload.

In questo evento impareremo le basi di Flutter attraverso un codelab. Per affrontare il codelab non sono necessarie conoscenze preliminari di Flutter e Dart ma bastera' avere familiarita' con i concetti base della programmazione ad oggetti come variabili, cicli, condizioni, eccetera.

9da5d5cc4b6a9f28058152e28364b02a?s=128

Marco Gomiero

February 09, 2019
Tweet

Transcript

  1. Hi, have you met ?

  2. AGENDA ▸ A brief introduction to Flutter ▸ Codelab Part

    1 ▸ Codelab Part 2 ▸ Q&A / Discussion
  3. WHO I AM MARCO GOMIERO - Computer Engineer - Software

    Engineer @ Uniwhere - Co-Leader @ GDG Venezia FOLLOW ME:
 " twitter.com/marcoGomier " github.com/prof18 " marco.gomiero.93@gmail.com " marcogomiero.com
  4. None
  5. https://www.meetup.com/it-IT/pro/gdg/

  6. None
  7. WHAT IS FLUTTER?

  8. “FLUTTER ALLOWS YOU TO BUILD BEAUTIFUL NATIVE APPS ON IOS

    AND ANDROID FROM A SINGLE CODEBASE.” https://flutter.io/
  9. WHAT IS FLUTTER? ▸ A framework to build apps for

    iOS and Android, from a single codebase ▸ Made by Google
  10. https://gcemetery.co/

  11. WHAT IS FLUTTER? ▸ A framework to build apps for

    iOS and Android, from a single codebase ▸ Made by Google ▸ Open Source ▸ Dart
  12. FLUTTER FEATURES Fast Development Expressive and Flexible UI Native Performance

  13. Fast Development ▸ Hot Reload ▸ State is maintained during

    builds ▸ Thanks to a mix of Ahead-of-time (AOT) and Just-In-Time (JIT) compilation
  14. FLUTTER FEATURES Fast Development Expressive and Flexible UI Native Performance

  15. Expressive and Flexible UI ▸ Material Design and Cupertino widgets

    ▸ Smooth scrolling ▸ Platform awareness
  16. FLUTTER FEATURES Fast Development Expressive and Flexible UI Native Performance

  17. Native Performance ▸ Native Scrolling ▸ Native Navigation ▸ Native

    Icons ▸ Native Fonts
 -> Full Native Performance
  18. FLUTTER FRAMEWORK AND ENGINE Framework (Dart) Engine (C++) Skia Dart

    Text Material Cupertino Widgets Rendering Animation Painting Gestures Foundation
  19. EVERYTHING IS A WIDGET! ▸ Structural Element (Button, Menu …)

  20. ▸ Structural Element (Button, Menu …)

  21. EVERYTHING IS A WIDGET! ▸ Structural Element (Button, Menu …)

    ▸ Stylistic Element (Font, Color Scheme ..)
  22. ▸ Stylistic Element (Font, Color Scheme ..)

  23. EVERYTHING IS A WIDGET! ▸ Structural Element (Button, Menu …)

    ▸ Stylistic Element (Font, Color Scheme ..) ▸ Aspect of Layout (Padding, Align ..)
  24. ▸ Aspect of Layout (Padding, Align ..)

  25. EVERYTHING IS A WIDGET! ▸ Structural Element (Button, Menu …)

    ▸ Stylistic Element (Font, Color Scheme ..) ▸ Aspect of Layout (Padding, Align ..) …
  26. https://flutter.io/docs/development/ui/widgets

  27. HELLO WORLD

  28. STATELESS WIDGET ▸ Immutable State: all the properties can’t change

  29. STATEFUL WIDGET ▸ Mutable State

  30. None
  31. CODELAB PART 1 ▸ How to write a Flutter app

    that looks natural on both iOS and Android. ▸ Basic structure of a Flutter app. ▸ Finding and using packages to extend functionality. ▸ Using hot reload for a quicker development cycle. ▸ How to implement a stateful widget. ▸ How to create an infinite, lazily loaded list. https://codelabs.developers.google.com/codelabs/first-flutter-app-pt1/
  32. CODELAB PART 2 ▸ How to add interactivity to a

    stateful widget. ▸ How to create and navigate to a second screen. ▸ How to change the look of an app using themes. https://codelabs.developers.google.com/codelabs/first-flutter-app-pt2/
  33. USEFUL LINKS ▸ https://flutter.io/docs ▸ https://eu.udacity.com/course/build-native-mobile-apps-with-flutter--ud905 ▸ https://itsallwidgets.com/ ▸ https://pub.dartlang.org/packages/

    ▸ https://www.youtube.com/watch?v=PLHln7wHgPE ▸ https://www.youtube.com/watch?v=RS36gBEp8OI ▸ http://fluttersamples.com/
  34. None
  35. None
  36. USEFUL LINKS (2) ▸ https://medium.com/flutter-io/hummingbird-building-flutter-for-the-web- e687c2a023a8 ▸ https://github.com/google/flutter-desktop-embedding

  37. HAPPY CODING http://bit.ly/flutter-femo