Flutter Study Jam : Introduction

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