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

Flutter Study Jam : Introduction

081b06f3d680a58d45bf672c0dfa0a6a?s=47 Edouard Marquez
September 26, 2018
110

Flutter Study Jam : Introduction

081b06f3d680a58d45bf672c0dfa0a6a?s=128

Edouard Marquez

September 26, 2018
Tweet

Transcript

  1. @FlutterParis FlutterParis flutter-paris.fr

  2. Flutter Study Jam

  3. Flutter Study Jam

  4. 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
  5. Merci à SUP'Internet !

  6. 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
  7. Slack bit.ly/slack-flutter-france Rejoindre le channel #study-jam-paris

  8. Flutter Study Jam Introduction aux concepts de Flutter

  9. Pour bien commencer 8 Comment coder en Dart ? Qu'est-ce

    que Flutter ? Les outils pour développer
  10. 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…
  11. 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
  12. 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
  13. 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
  14. 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
  15. Flutter Paris - Septembre 2018 Flutter Study Jam - Episode

    1 Stack Flutter
  16. 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
  17. Flutter Paris - Septembre 2018 Flutter Study Jam - Episode

    1 Hot Reload
  18. 17 Le langage Dart

  19. 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
  20. 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 {}
  21. 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; }
  22. 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; }
  23. 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; }
  24. 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}) {…}
  25. 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}) {…}
  26. 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)
  27. 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)
  28. 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)
  29. 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)
  30. 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}) {…}
  31. 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() {…} }
  32. Les outils 25

  33. Flutter Paris - Septembre 2018 Flutter Study Jam - Episode

    1 Flutter Inspector
  34. Premiers pas en Flutter 27 La navigation Les widgets StatelessWidget

    StatefulWidget
  35. Flutter Paris - Septembre 2018 Flutter Study Jam - Episode

    1 Liste des widgets
  36. 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
  37. 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
  38. Stateless/Stateful Widget 31

  39. 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
  40. 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!'); } }
  41. 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!'); } }
  42. 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 !'); } }
  43. Flutter Paris - Septembre 2018 Flutter Study Jam - Episode

    1 Comment créer un StatefulWidget ? DART class MyWidget extends StatefulWidget { @override State createState() { return MyWidgetState(); } }
  44. 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: () {}) ]); } }
  45. 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: () {}) ]); } }
  46. 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: () {}) ]); } }
  47. Flutter Paris - Septembre 2018 Flutter Study Jam - Episode

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

    1 Comment forcer la mise à jour d'un StatelessWidget ? DART onPressed: () { setState() { items++; } }
  49. 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
  50. La navigation 38

  51. 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
  52. 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 })); } }
  53. 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 })); } }
  54. 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();
  55. 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