Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Flutter Study Jam : Introduction

Edouard Marquez
September 26, 2018
140

Flutter Study Jam : Introduction

Edouard Marquez

September 26, 2018
Tweet

Transcript

  1. Flutter Study Jam 5) Scaffold First App 6) Widgets &

    Layouts 7) Navigation 8) Stateful Widgets 1) Why Flutter? 2) Why Dart? 3) Reactive Framework 4) Development Tools
  2. Le programme ce soir 1ère partie Introduction à Flutter
 +

    notions nécessaires au cours 3ème partie A votre tour ! Démarrage du codelab 2ème partie Installation de l'environnement
  3. Pour bien commencer 8 Comment coder en Dart ? Qu'est-ce

    que Flutter ? Les outils pour développer
  4. Flutter Paris - Septembre 2018 Flutter Study Jam - Episode

    1 Qu'est-ce que Flutter ? OpenSource Toutes les couches Multiplateforme Android (4.1+) & iOS (8.0+) Inspiré du web Hot Reload, concepts… Code natif = performances Dart Langage de programmation Tooling Plugins, Inspector…
  5. Flutter Paris - Septembre 2018 Flutter Study Jam - Episode

    1 Le paradigme : natif Widgets OEM Position GPS Bluetooth Audio Capteurs Caméra Etc Plateforme Services Code natif Application Canvas Evénements
  6. Flutter Paris - Septembre 2018 Flutter Study Jam - Episode

    1 Le paradigme : WebView (Ionic, Cordova…) Javascript WebView Application Plateforme Position GPS Bluetooth Audio Capteurs Caméra Etc Services Bridge Canvas Evénements
  7. Flutter Paris - Septembre 2018 Flutter Study Jam - Episode

    1 Le paradigme : Reactives Javascript Widgets OEM Application Plateforme Position GPS Bluetooth Audio Capteurs Caméra Etc Services Bridge Canvas Evénements
  8. Flutter Paris - Septembre 2018 Flutter Study Jam - Episode

    1 Le paradigme : Flutter Code natif Canvas Evénements Application Plateforme Position GPS Bluetooth Audio Capteurs Caméra Etc Services Widgets, Rendu Platform Channels
  9. Flutter Paris - Septembre 2018 Flutter Study Jam - Episode

    1 "Tout est un widget" 100% Flutter Dessine tout à l'écran Tout est widget Layout, thème, vue… Catalogue Material, iOS… Immutable Mais on peut y connecter un état
  10. Flutter Paris - Septembre 2018 Flutter Study Jam - Episode

    1 Dart : les types DART int, double, String, bool… List<String> list = ["a", "b"]; // équivalent à List = List()..add("a")..add("b"); Map<String, String> = {'Clé': 'Valeur'} dynamic, var, Object
  11. Flutter Paris - Septembre 2018 Flutter Study Jam - Episode

    1 Dart : les classes DART class Car {} // On récupère les attributs et l'implémentation des méthodes class Clio extends Car {} // On ne récupère que la définition de la classe Car class Clio implements Car {}
  12. Flutter Paris - Septembre 2018 Flutter Study Jam - Episode

    1 Dart : les constructeurs DART class Car { final String model; Car(String carModel) : model = carModel; Car(this.model); Car.namedConstructor(String carModel) : model = carModel; }
  13. Flutter Paris - Septembre 2018 Flutter Study Jam - Episode

    1 Dart : les constructeurs DART class Car { final String model; Car(String carModel) : model = carModel; Car(this.model); Car.namedConstructor(String carModel) : model = carModel; }
  14. Flutter Paris - Septembre 2018 Flutter Study Jam - Episode

    1 Dart : les constructeurs DART class Car { final String model; Car(String carModel) : model = carModel; Car(this.model); Car.namedConstructor(String carModel) : model = carModel; }
  15. Flutter Paris - Septembre 2018 Flutter Study Jam - Episode

    1 Dart : les arguments DART void myMethod1 (int arg1, int arg2) {…} // Optional positional parameters void myMethod2 ([int arg1, int arg2]) {…} // Optional named parameters void myMethod3 ({int arg1, int arg2}) {…}
  16. Flutter Paris - Septembre 2018 Flutter Study Jam - Episode

    1 Dart : les arguments DART void myMethod1 (int arg1, int arg2) {…} // Optional positional parameters void myMethod2 ([int arg1, int arg2]) {…} // Optional named parameters void myMethod3 ({int arg1, int arg2}) {…}
  17. Flutter Paris - Septembre 2018 Flutter Study Jam - Episode

    1 Dart : les arguments DART void myMethod1 (int arg1, int arg2) {…} => myMethod1(0, 1) void myMethod2 ([int arg1, int arg2]) {…} => myMethod2() ou myMethod2(0) ou myMethod2(0, 1) void myMethod3 ({int arg1, int arg2}) {…} => myMethod3() ou myMethod3(arg1: 0) ou myMethod3(arg1: 0, arg2: 1)
  18. Flutter Paris - Septembre 2018 Flutter Study Jam - Episode

    1 Dart : les arguments DART void myMethod1 (int arg1, int arg2) {…} => myMethod1(0, 1) void myMethod2 ([int arg1, int arg2]) {…} => myMethod2() ou myMethod2(0) ou myMethod2(0, 1) void myMethod3 ({int arg1, int arg2}) {…} => myMethod3() ou myMethod3(arg1: 0) ou myMethod3(arg1: 0, arg2: 1)
  19. Flutter Paris - Septembre 2018 Flutter Study Jam - Episode

    1 Dart : les arguments DART void myMethod1 (int arg1, int arg2) {…} => myMethod1(0, 1) void myMethod2 ([int arg1, int arg2]) {…} => myMethod2() ou myMethod2(0) ou myMethod2(0, 1) void myMethod3 ({int arg1, int arg2}) {…} => myMethod3() ou myMethod3(arg1: 0) ou myMethod3(arg1: 0, arg2: 1)
  20. Flutter Paris - Septembre 2018 Flutter Study Jam - Episode

    1 Dart : les arguments DART void myMethod1 (int arg1, int arg2) {…} => myMethod1(0, 1) void myMethod2 ([int arg1, int arg2]) {…} => myMethod2() ou myMethod2(0) ou myMethod2(0, 1) void myMethod3 ({int arg1, int arg2}) {…} => myMethod3() ou myMethod3(arg1: 0) ou myMethod3(arg1: 0, arg2: 1)
  21. Flutter Paris - Septembre 2018 Flutter Study Jam - Episode

    1 Dart : les arguments DART // Valeur par défaut void myMethod3 ({int arg1, int arg2 = 10}) {…} // Forcer les valeurs pour les named arguments void myMethod3 ({int arg1, @required int arg2}) {…}
  22. Flutter Paris - Septembre 2018 Flutter Study Jam - Episode

    1 Dart : la visibilité (public / privé) DART class Car { final String _model; String get model => _model; void _internalMethod() {…}
 void publicMethod() {…} }
  23. Flutter Paris - Septembre 2018 Flutter Study Jam - Episode

    1 Liste des widgets Material AppBar, RaisedButton, 
 SnackBar, Chip, Card… Cupertino CupertinoNavigationBar, CupertinoButton, Cupertino…. Widgets génériques Text, Image, Padding, Theme… Texte
  24. Flutter Paris - Septembre 2018 Flutter Study Jam - Episode

    1 Liste des layouts / containers Fils unique Text, Image, Padding, Theme… Padding Texte Fils multiples Column (les uns en dessous des autres) Row (les uns à côté des autres) Stack (les uns aux dessus des autres) Column Texte
  25. Flutter Paris - Septembre 2018 Flutter Study Jam - Episode

    1 Quelle différence entre StatelessWidget et StatefulWidget ? stless stfull StatelessWidget Son état n'évolue pas au fil du temps Bienvenue ! StatefulWidget Widget attaché à un état (State) qui peut évoluer au fil du temps Vous avez 1 item Ajouter un item au panier
  26. Flutter Paris - Septembre 2018 Flutter Study Jam - Episode

    1 Comment créer un StatelessWidget ? DART class MyWidget extends StatelessWidget { @override Widget build(BuildContext context) { return Text('Hello World!'); } }
  27. Flutter Paris - Septembre 2018 Flutter Study Jam - Episode

    1 Comment créer un StatelessWidget ? DART class MyWidget extends StatelessWidget { @override Widget build(BuildContext context) { return Text('Hello World!'); } }
  28. Flutter Paris - Septembre 2018 Flutter Study Jam - Episode

    1 Comment créer un StatelessWidget ? DART class MyWidget extends StatelessWidget { @override Widget build(BuildContext context) { return Text('Bienvenue !'); } }
  29. Flutter Paris - Septembre 2018 Flutter Study Jam - Episode

    1 Comment créer un StatefulWidget ? DART class MyWidget extends StatefulWidget { @override State createState() { return MyWidgetState(); } }
  30. Flutter Paris - Septembre 2018 Flutter Study Jam - Episode

    1 Comment créer un StatefulWidget ? DART class MyWidgetState extends State<MyWidget> { int items = 0; @override Widget build(BuildContext context) { return Column(children: <Widget>[ Text('Vous avez $items item(s)'), RaisedButton( child: Text('Ajouter un item au panier'), onPressed: () {}) ]); } }
  31. Flutter Paris - Septembre 2018 Flutter Study Jam - Episode

    1 Comment créer un StatefulWidget ? DART class MyWidgetState extends State<MyWidget> { int items = 0; @override Widget build(BuildContext context) { return Column(children: <Widget>[ Text('Vous avez $items item(s)'), RaisedButton( child: Text('Ajouter un item au panier'), onPressed: () {}) ]); } }
  32. Flutter Paris - Septembre 2018 Flutter Study Jam - Episode

    1 Comment créer un StatefulWidget ? DART class MyWidgetState extends State<MyWidget> { int items = 0; @override Widget build(BuildContext context) { return Column(children: <Widget>[ Text('Vous avez $items item(s)'), RaisedButton( child: Text('Ajouter un item au panier'), onPressed: () {}) ]); } }
  33. Flutter Paris - Septembre 2018 Flutter Study Jam - Episode

    1 Comment forcer la mise à jour d'un StatelessWidget ? DART onPressed: () { setState() { items++; } }
  34. Flutter Paris - Septembre 2018 Flutter Study Jam - Episode

    1 Comment forcer la mise à jour d'un StatelessWidget ? DART onPressed: () { setState() { items++; } }
  35. Flutter Paris - Septembre 2018 Flutter Study Jam - Episode

    1 Le lifecycle simplifié des StatefulWidgets initState Created Widget State create State Initialized mounted didChange Dependencies Ready build Defunct dispose setState
  36. Flutter Paris - Septembre 2018 Flutter Study Jam - Episode

    1 Comment gérer la navigation ? Bouton retour sur Android, swipe sur iOS Gestion auto de la plateforme Ce composant gère les écrans et la backstack Le Navigator
  37. Flutter Paris - Septembre 2018 Flutter Study Jam - Episode

    1 Soit les écrans suivants DART class Screen1 extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Screen 1')), body: RaisedButton( child: Text('Open page 2'), onPressed: () { // TODO })); } }
  38. Flutter Paris - Septembre 2018 Flutter Study Jam - Episode

    1 Soit les écrans suivants DART class Screen2 extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Screen 2')), body: RaisedButton( child: Text('Close'), onPressed: () { // TODO })); } }
  39. Flutter Paris - Septembre 2018 Flutter Study Jam - Episode

    1 Comment ouvrir puis fermer un écran ? Ouvrir un nouvel écran Navigator.of(context).push( MaterialPageRoute(builder: (context) => Screen2())); Fermer l'écran courant Navigator.of(context).pop();
  40. C'est à vous ! Slack : bit.ly/slack-flutter-france Cours : bit.ly/study-jam-udacity

    Site officiel Flutter : flutter.io Slides : bit.ly/slides-study-jam