Notre première interface graphique avec Flutter

2e session de notre communauté Dart & Flutter Abidjan, Côte d'Ivoire

Transcript

1. Notre première interface graphique avec Flutter Kouakou Neiba Aristide guyaristide@gmail.com @improvissus Agnaramon Boris-Carnot agnaramonboris@gmail.com @_agnamc_ 3
2. Rejoignez-nous sur https://discord.gg/hhJmTQm
4. Sommaire 1. Notre premier projet Flutter 2. Structure d’un projet Flutter 3. Notion de Widget 4. Quelques widgets de base 5. Ergonomie : Material Design et Cupertino 6. Cas pratique
5. Sommaire 1. Notre premier projet Flutter 2. Structure d’un projet Flutter 3. Notion de Widget 4. Quelques widgets de base 5. Ergonomie : Material Design et Cupertino 6. Cas pratique
6. 1. Notre premier projet Flutter - Depuis un terminal > flutter create nom_projet
7. 1. Notre premier projet Flutter - Depuis Android Studio
8. 1. Notre premier projet Flutter - Depuis Android Studio
9. 1. Notre premier projet Flutter - Depuis Android Studio
10. 1. Notre premier projet Flutter - Depuis Android Studio
11. Sommaire 1. Notre premier projet Flutter 2. Structure d’un projet Flutter 3. Notion de Widget 4. Quelques widgets de base 5. Ergonomie : Material Design et Cupertino 6. Cas pratique
12. 2. Structure d’un projet Flutter
13. 2. Structure d’un projet Flutter android/ contient les paramètres, les ressources et le code spécifique à la plate-forme Android. ios/ contient les paramètres, les ressources et le code spécifique à la plate-forme iOS. build/ contient la sortie générée à la création d’un projet. test/ contient les codes de test. lib/ contient les sources de notre application.
14. 2. Structure d’un projet Flutter .gitignore spécifique à git, contient la liste des fichiers, dossiers à exclure .metadata contient les métadonnées liées au projet. .paquets contient les chemins d’accès à chacune des bibliothèques. pubspec.yaml contient les configurations de notre application. pubspeck.lock contient les versions spécifiques de dépendances.
15. Sommaire 1. Notre premier projet Flutter 2. Structure d’un projet Flutter 3. Notion de Widget 4. Quelques widgets de base 5. Ergonomie : Material Design et Cupertino 6. Cas pratique
16. 3. Notion de Widget Qu’est ce qu’un widget ?
17. 3. Notion de Widget Stateless Widget Statefull Widget Text, Icon, ... Radio, Checkbox, ... State
18. 3. Notion de Widget void main() { runApp( Center( child: Text( 'Hello, world!', textDirection: TextDirection.ltr, ), ), ); }
19. Sommaire 1. Notre premier projet Flutter 2. Structure d’un projet Flutter 3. Notion de Widget 4. Quelques widgets de base 5. Ergonomie : Material Design et Cupertino 6. Cas pratique
20. 4. Quelques widgets de base Text(...) - Permet d’afficher du texte - Différents attributs : style, positionnement, nombre lignes, etc.
21. 4. Quelques widgets de base Text( 'Hello, world!', style: TextStyle( color: Colors.blue, fontSize: 16, fontWeight: FontWeight.bold, letterSpacing: 5, fontStyle: FontStyle.italic ), textAlign: TextAlign.center, ) Text(...)
22. 4. Quelques widgets de base Image(...) - Permet d’afficher une image - Différentes sources : local (asset), network, cache.. - Transformations : étirement, détourage, ..
23. 4. Quelques widgets de base Image.asset( "images/discord.png", fit: BoxFit.cover, ) Image.network( "https://discord.com/assets/fc0b01fe10a0b8c602fb0106d8189d9b.png", fit: BoxFit.cover, ) Image(...)
24. 4. Quelques widgets de base Center(...) - Permet de centrer un widget
25. 4. Quelques widgets de base Center( child: Text( 'Hello, world!', style: TextStyle( color: Colors.blue, fontSize: 16, fontWeight: FontWeight.bold, fontStyle: FontStyle.italic ), ), ) Center(...)
26. 4. Quelques widgets de base Padding(...) - Permet de définir une marge sur l’élément qu’il contient
27. 4. Quelques widgets de base Padding( padding: const EdgeInsets.all(16.0), child: Text( 'Hello, world!', style: TextStyle( color: Colors.blue, fontSize: 16, fontWeight: FontWeight.bold, fontStyle: FontStyle.italic ), ), ), ) Padding(...)
28. 4. Quelques widgets de base Padding( padding: const EdgeInsets.only(left: 30.0, top: 5.0), child: Text( 'Hello, world!', style: TextStyle( color: Colors.blue, fontSize: 16, fontWeight: FontWeight.bold, fontStyle: FontStyle.italic ), ), ), ) Padding(...)
29. 4. Quelques widgets de base Padding( padding: const EdgeInsets.symmetric(vertical: 30.0, horizontal: 5.0), child: Text( 'Hello, world!', style: TextStyle( color: Colors.blue, fontSize: 16, fontWeight: FontWeight.bold, fontStyle: FontStyle.italic ), ), ), ) Padding(...)
30. 4. Quelques widgets de base Row(...) | Column(...) - Affiche une liste d'éléments horizontalement / verticalement - Définir des règles de positionnement des éléments
31. 4. Quelques widgets de base Row( children: <Widget>[ Text("Text1", ...), Text("Text2", ...), Text("Text3", ...), ], ) Row(...)
32. 4. Quelques widgets de base Row( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Text("Text1", ...), Text("Text2", ...), Text("Text3", ...), ], ) Row(...)
33. 4. Quelques widgets de base Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: <Widget>[ Text("Text1", ...), Text("Text2", ...), Text("Text3", ...), ], ) Row(...)
34. 4. Quelques widgets de base Row( children: <Widget>[ Text("Text1", ...), Expanded(child: Text("Text2", ...),), Text("Text3", ...), ], ) Row(...)
35. 4. Quelques widgets de base Column( children: <Widget>[ Text("Text1", ...), Expanded(child: Text("Text2", ...),), Text("Text3", ...), ], ) Column(...)
36. 4. Quelques widgets de base Column( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: <Widget>[ Text("Text1", ...), Text("Text2", ...), Text("Text3", ...), ], ) Column(...)
37. 4. Quelques widgets de base Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Text("Text1", ...), Text("Text2", ...), Text("Text3", ...), ], ) Column(...)
38. 4. Quelques widgets de base Container(...) - Combine plusieurs widgets : positionnement (alignement, marge, ...), dimensionnement (largeur, hauteur), style (couleur, image de fond, …)
39. 4. Quelques widgets de base Container( width: 200, height: 200, margin: EdgeInsets.all(20.0), color: Colors.blue, ) ) Container(...)
40. 4. Quelques widgets de base Container( ... padding: EdgeInsets.all(8.0), alignment: Alignment.center, child: Text("Content", ...), ) Container(...)
41. 4. Quelques widgets de base Container( ... decoration: BoxDecoration( color: Colors.blue, shape: BoxShape.circle ), child: Text(...), ) Container(...)
42. 4. Quelques widgets de base Container( ... alignment: Alignment.center, decoration: BoxDecoration( ... border: Border.all(color: Colors.black, width: 3), borderRadius: BorderRadius.circular(10.0), ), child: Text(...), ) Container(...)
43. Sommaire 1. Notre premier projet Flutter 2. Structure d’un projet Flutter 3. Notion de Widget 4. Quelques widgets de base 5. Ergonomie : Material Design et Cupertino 6. Cas pratique
44. 5. Ergonomie : Material Design et Cupertino Material Design 'package:flutter/material.dart' Cupertino 'package:flutter/cupertino.dart'
45. import 'package:flutter/material.dart'; void main() { runApp( MaterialApp( home: Scaffold( appBar: AppBar( title: Text("Live session"), ), body: SafeArea( child: Padding( padding: const EdgeInsets.all(8.0), child: Column( children: <Widget>[ Text("Votre message"), TextField( decoration: InputDecoration( hintText: "Message ..." ), ), SizedBox(height: 20,), MaterialButton( color: Colors.blue, onPressed: (){}, child: Text("Valider"), ) ], ), ), ), ), ), ); Material Design 5. Ergonomie : Material Design et Cupertino
46. import 'package:flutter/cupertino.dart'; void main() { runApp( CupertinoApp( home: CupertinoPageScaffold( navigationBar: CupertinoNavigationBar( middle: Text("Live session"), ), child: SafeArea( child: Padding( padding: const EdgeInsets.all(8.0), child: Column( children: <Widget>[ Text("Votre message"), SizedBox(height: 20,), CupertinoTextField( placeholder: "Message ...", ), SizedBox(height: 20,), CupertinoButton( color: CupertinoColors.activeBlue, onPressed: (){}, child: Text("Valider"), ) ], ), ), ), ), ), ); } Cupertino 5. Ergonomie : Material Design et Cupertino
47. Sommaire 1. Notre premier projet Flutter 2. Structure d’un projet Flutter 3. Notion de Widget 4. Quelques widgets de base 5. Ergonomie : Material Design et Cupertino 6. Cas pratique
48. 6. Cas pratique https://flutter.dev/docs/development/ui/layout/tutorial
49. 6. Cas pratique
50. 6. Cas pratique
51. 6. Cas pratique
52. 6. Cas pratique It’s time to code tout ça !
53. 6. Cas pratique ...
54. 6. Cas pratique ...
55. 6. Cas pratique Terminé !!
56. Merci pour votre particiation !!! Kouakou Neiba Aristide guyaristide@gmail.com @improvissus Agnaramon Boris-Carnot agnaramonboris@gmail.com @_agnamc_