Les bases de Flutter 1/2

Tous droits réservés à STUDI - Reproduction interdite

 Table des matières

Table des matières

I. Squelette d'une application 3

II. Exercice : Quiz 15

III. Widgets de base 17

IV. Exercice : Quiz 36

V. Essentiel 38

VI. Auto-évaluation 38
A. Exercice .......................................................................................................................................................................38
B. Test ..............................................................................................................................................................................40

Solutions des exercices 42

2 Tous droits réservés à STUDI - Reproduction interdite

I. Squelette d'une application
Contexte
Flutter repose sur des widgets qui sont des composants plus ou moins complexes qui affichent de l'information à
l'écran. Lorsque vous développez en Flutter, « tout est widget ». Dans la documentation de Flutter, les widgets
sont décrits comme étant construits à partir d'un framework moderne inspiré de React. L'idée centrale est de
construire l'interface utilisateur à partir de widgets, plus celle-ci est élaborée, plus il y aura de widgets.
Le développeur va construire une interface avec des widgets. Ces derniers peuvent être un espacement, une vue
ou une gesture. Ils ont des propriétés comme la hauteur, la largeur, la couleur de fond, etc. Ils ont un ou des
enfants. Le widget se reconstruit lorsque son état change. Flutter fait une comparaison de l'état A (avant) et
l'état B (après). Lors de la reconstruction du module, le nombre de modifications sera réduit au minimum. La
vitesse et la qualité du rendu sont optimisées.
Comme les poupées russes, les widgets vont s'imbriquer les uns dans les autres. On va composer des vues à l'aide
de widgets.
Dans ce cours, nous verrons une application de base, générée à la création d'un projet flutter. Nous verrons
ensuite la construction d'un widget principal, la structure de l'application et les widgets de base.
 Squelette d'une application

Méthode Création d'une application de base

Étape 1 : après le lancement d'Android Studio, nous allons créer un nouveau projet Flutter.

On choisit : « Create New Flutter Project ». À l'écran suivant, il faut faire « Next ».

4 Tous droits réservés à STUDI - Reproduction interdite

Squelette d'une application

Étape 2 : ensuite on donne un nom au projet. Il faut écrire son nom en minuscule.
Le champ « Project location » permet de définir l'emplacement où sera stocké le projet sur le disque dur,
Le champ « Description » permet de faire une rapide description du projet,
Les champs des langages de programmation : Kotlin pour Android et Swi pour iOS,
Pour « Plateforms », on coche iOS et Android.
On valide. Android Studio va nous finaliser le projet.
On arrive alors sur l'écran suivant :

La fenêtre principale est divisée en deux : à gauche l'arborescence du projet et à droite le fichier sélectionné.

Tous droits réservés à STUDI - Reproduction interdite 5

 Squelette d'une application

Les fichiers qui contiennent du code « Dart » se trouvent dans le répertoire lib. Ces fichiers ont l'extension .dart. Au
départ, le projet comprend uniquement le fichier : [Link]. Toute l'application est dans ce fichier.

6 Tous droits réservés à STUDI - Reproduction interdite

Squelette d'une application

L'application retourne le widget « MaterialApp ». Ce widget contient les propriétés suivantes :

title : pour le site titre de l'application.
thème : pour choisir un thème en appelant un autre widget.
home : permet de spécifier le widget de départ de notre application. Dans le cas présent, c'est MyHomePage
qui définit le widget principal de l'application. Ensuite, nous allons le supprimer pour recréer notre propre
widget.
Étape 3 : pour lancer l'application, on sélectionne l'émulateur ou l'appareil, puis on clique sur le petit triangle
vert à droite de [Link].

L'arbre d'un widget

Un widget est présenté sous la forme d'un arbre,
Un widget peut contenir un ou plusieurs widgets enfants,
Le widget enfant sera contenu par un autre widget.
On peut représenter l'application de base par le diagramme suivant :

Tous droits réservés à STUDI - Reproduction interdite 7

 Squelette d'une application

Les widget « StateLessWidget »

Les « StatelessWidget » sont des widgets basiques sur lesquels on ne peut pas interagir comme un texte, une image,
etc. Leur valeur ne va pas changer une fois construit.
Un widget se définit en appelant son constructeur à partir du mot clé class. Le widget container s'appelle avec son
nom puis ouvrant une parenthèse et fermant la parenthèse : Container().
Un widget est composé de plusieurs propriétés dont l'une s'appelle child. Avec cette dernière, on pourra définir le
widget imbriqué à l'intérieur.

Exemple Appel du widget Center

1 Center(
2 child: Text("Bonjour",
3 textAlign: [Link],
4 style: TextStyle(fontStyle: [Link]),),
5 ),

On construit un widget Center qui a un fils : un widget Text. Ce dernier a deux propriétés : textAlign et style.
Ce dernier appelle un widget TextStyle.

Méthode
On pourra aussi créer nos propres widgets. La création de widget va permettre de réutiliser notre code à différents
endroits de notre application.
La définition d'un widget va commencer par le mot clé class en étant étendu avec un stateLessWidget. Le
nom widget commencera par une majuscule : « BasicsPage ». Le widget est défini dans un bloc entre
accolades. À l'intérieur de ce bloc, on a une fonction obligatoire : la fonction build. Pour la définir, il faut taper le
mot clé build. Cette fonction va retourner le widget et donc un élément de l'interface utilisateur. Dans notre
widget MaterialApp, on va mettre au niveau de la propriété home.

Exemple
1 class MyApp extends StatelessWidget {
2 // This widget is the root of your application.
3 @override
4 Widget build(BuildContext context) {
5 return MaterialApp(
6 title: 'Flutter Demo',
7 theme: ThemeData(
8 primarySwatch: [Link],
9 ),
10 home: BasicsPage() // appel du widget créé dessous
11 );
12 }
13 }
14
15 class BasicsPage extends StatelessWidget{
16 @override
17 Widget build(BuildContext context) {
18 return
19 }
20 }

8 Tous droits réservés à STUDI - Reproduction interdite

Squelette d'une application

La fonction build va construire le widget. Le constructeur prend en paramètres un argument de type

« BuildContext ». Il décrit l'interface de ce widget, soit le contexte dans lequel ce widget est créé : sa hauteur, sa
largeur, la plateforme, etc.
Grâce à ce contexte, on pourra faire appel à MediaQuery pour en définir les propriétés, comme la taille. On peut
aussi récupérer la plateforme (iOS ou Android).

Dans notre constructeur, on retournera un widget Container().

1 @override
2 Widget build(BuildContext context) {
3 var size = [Link](context).size;
4 var platform = [Link](context).platform;
5 print("size : $size");
6 print("plateform : $platform");
7 return Container(
8 height: 10,
9 width: 10,
10 );
11 }

Définition Scaffold
Le scaffold est le squelette de l'application, il est présent dans toutes les applications. Il comprend les widgets
suivants avec les propriétés :
appBar : la barre du haut
body : le corps de notre application
floatingButtonAction : un bouton en bas
drawer : un menu sur le côté

Tous droits réservés à STUDI - Reproduction interdite 9

 Squelette d'une application

Définition AppBar
L'appBar est un widget qui vient se situer en haut de l'écran. En général, il contient le titre de l'application. Il
peut aussi accueillir des boutons.
1 return Scaffold(
2 appBar: AppBar(
3 title: Text("Le titre de l'application"),
4 actions:<Widget> [
5 IconButton(onPressed: pressedAction, icon:Icon([Link]))
6 ], ),
7 );

Définition Le drawer
Le drawer est un menu caché qui glisse horizontalement, il est déplié avec l'icône « Hamburger », 3 traits. Pour
construire le drawer, le widget Drawer est appelé, il a comme enfant un widget Column que nous verrons plus
tard dans le cours qui contiendra l'entête du menu et la liste des choix avec des widgets Text.
1 drawer: Drawer(
2 child:Column(
3 children: [
4 DrawerHeader(child: Text('menu de navigation')
5 ),
6 Text("Onglet 1"),
7 Text("Onglet 2"),
8 Text("Onglet 3"),],
9 )
10 ),

10 Tous droits réservés à STUDI - Reproduction interdite

Squelette d'une application

Exemple

Tous droits réservés à STUDI - Reproduction interdite 11

 Squelette d'une application

12 Tous droits réservés à STUDI - Reproduction interdite

Squelette d'une application

Définition Le FloatingActionButton
Le floatingActionButton est un widget qui est un bouton flottant en bas à gauche, on peut le retrouver
dans certaines applications de messagerie. En appuyant dessus, on crée un nouveau message, c'est ce bouton qui
va exécuter une méthode.
1 ),
2 floatingActionButton: FloatingActionButton(
3 onPressed: pressedAction,
4 backgroundColor: [Link],
5 child: Icon([Link]),
6 ),

Tous droits réservés à STUDI - Reproduction interdite 13

 Squelette d'une application

Exemple

14 Tous droits réservés à STUDI - Reproduction interdite

Exercice : Quizsolution

Fondamental Récapitulatif du Scaffold

1 @override
2 Widget build(BuildContext context) {
3 return Scaffold(
4 appBar: AppBar(
5 title: Text("Le titre de l'application"),
6 actions:<Widget> [
7 IconButton(onPressed: pressedAction, icon:Icon([Link]))
8 ], ),
9
10 drawer: Drawer(
11 child:Column(
12 children: [
13 DrawerHeader(child: Text('menu de navigation')
14 ),
15 Text("Onglet 1"),
16 Text("Onglet 2"),
17 Text("Onglet 3"),
18 ],
19 )
20 ),
21 floatingActionButton: FloatingActionButton(
22 onPressed: pressedAction,
23 backgroundColor: [Link],
24 child: Icon([Link]),
25 ),
26 );
27 }

Définition Le widget Center et container

Le widget Center a pour rôle de centrer son enfant (child). En mettant le widget container en tant qu'enfant de
center, il sera au centre de notre écran.
1 body:Center(
2 child:Container(
3 height: 80,
4 width: 100,
5 color: [Link],
6 )
7)

Ici, on centre le container dans le body du Scaffold. Les propriétés height et width permettent de définir
la taille du container.

Exercice : Quiz [solution n°1 p.43]

Question 1

Question 2

Tous droits réservés à STUDI - Reproduction interdite 15

Question 3

Question 4
 Question 5

III. Widgets de base

Widget Text
Le widget Text est un élément très important, il est présent dans toutes les applications. Son constructeur
demande un paramètre obligatoire : une chaîne de caractères. On peut travailler sur ce texte en modifiant son style
pour changer son aspect, son alignement, sa couleur.

Exemple
1 Text("Ceci est une première chaine",
2 style: TextStyle(
3 color: [Link],
4 fontSize:20,
5 fontWeight: FontWeight.w800,
6 fontStyle:[Link]
7 ),
8 textAlign: [Link],
9)

Ici, on définit un widget Text qui prend en argument la chaîne de caractères : « Ceci est une chaîne de
caractères ». On lui spécifie un Style avec le widget TextStyle. À l'intérieur de ce style, on va définir la couleur
du texte et l'aspect de la police de caractères. On peut aussi spécifier l'alignement de cette zone de texte. Ici, on
centre le texte.
Si on veut pousser la personnalisation de l'application, on peut mettre en place une police de caractères
spécifique dans le constructeur de TextStyle avec la propriété fontFamily.

Méthode
Étape 1 : dans l'arborescence de notre projet, il faut créer un répertoire « assets ». On fait un clic
droit - new - Directory. À l'intérieur de ce dossier, on crée un dossier « fonts » pour stocker nos polices dans notre
application. On va « glisser-déposer » la police de caractères dans le répertoire.
 Widgets de base

Complément
Sur Internet, on peut trouver des polices de caractères gratuites sur le site Google Fonts1.

Méthode
Étape 2 : maintenant, il convient de modifier le fichier [Link] et de l'enrichir d'une rubrique « fonts ».

Dans Android Studio, cliquez sur Pub get pour finir l'installation de la police de caractères.

Étape 3 : une fois installée, on peut définir la font dans la propriété font-family dans le widget TextStyle.

Exemple
1 style: TextStyle(
2 color: [Link],
3 fontSize:25,
4 fontWeight: FontWeight.w800,
5 fontStyle:[Link],
6 fontFamily:'BubbleShine'

1 [Link]

18 Tous droits réservés à STUDI - Reproduction interdite

Widgets de base

Tous droits réservés à STUDI - Reproduction interdite 19

 Widgets de base

Méthode
Voici comment créer un widget Text configuré avec une police de caractères, un style et une couleur :
1 Text simpleText(String text){
2 return Text(
3 text,
4 style: TextStyle(
5 color: [Link],
6 fontSize:25,
7 fontWeight: FontWeight.w800,
8 fontStyle:[Link],
9 fontFamily:'BubbleShine'
10 ),
11 textAlign: [Link]
12 );

Complément
Pour créer un widget avec cette configuration, on aura juste à l'appeler :
simpleText(“On peut réutiliser notre texte”)
Cela évite que l'on ait à chaque fois à reconfigurer notre widget Text de base.

Définition Widget Icon

De nos jours, les icônes sont aussi des éléments essentiels de nos applications. Leur utilisation permet une
compréhension rapide de l'interface utilisateur. Par exemple, tout le monde associe une icône « pin » à la
cartographie.
L'utilisation du widget Icon permet l'insertion d'une icône. On pourra spécifier certaines de ses propriétés
comme sa taille.

Exemple
1 body:Center(
2 child: Container(
3 height: 150,
4 width: 150,
5 child: Icon([Link],
6 color:[Link],
7 size: 50,)
8 ),
9)

Dans le container, on met un Icon Home en tant qu'enfant. On lui applique une taille de 50 avec size et on lui
applique la couleur verte.

20 Tous droits réservés à STUDI - Reproduction interdite

Widgets de base

Tous droits réservés à STUDI - Reproduction interdite 21

 Widgets de base

En important : import 'package:flutter/[Link]';

On pourra mettre des styles d'icônes qui se rapprochent de ceux utilisés sur iOS.
1 Icon([Link],
2 color:[Link],
3 size: 50,)

Les icônes pourront être ajoutées à l'endroit souhaité pour personnaliser le floatingActionButton ou la barre
d'onglets.

Définition Widget Image

Afin d'enjoliver une application, il est fréquent d'avoir recours à des images. Flutter a un widget dédié Image.

Méthode
De la même manière que pour les polices de caractères, il convient de créer un dossier images dans le répertoire
assets. Ensuite, on dépose les images dans ce dossier. On va aussi ajouter le chemin des images dans le fichier
[Link].

On modifie le fichier [Link] en indiquant où se trouvent les fichiers images.

22 Tous droits réservés à STUDI - Reproduction interdite

Widgets de base

Attention
Il s'agit d'un fichier yaml. Il faut faire attention à l'indentation dont l'importance est cruciale. Par exemple
assets doit être à deux espaces de la gauche.

Méthode
Une fois le fichier à jour, il faut cliquer sur le bouton pub get. Maintenant que l'image est déclarée, il ne reste
plus qu'à l'incorporer dans le projet.

Exemple
1 [Link]('assets/images/[Link]',
2 width: 150,
3)

Tous droits réservés à STUDI - Reproduction interdite 23

 Widgets de base

Complément
Si on peut insérer des images en dur dans le projet, on peut aussi les afficher en les chargeant depuis internet. La
syntaxe est [Link](‘[Link]

24 Tous droits réservés à STUDI - Reproduction interdite

Widgets de base

1 [Link]('[Link]
ezimgfmt=rs:272x90/rscb23/ng:webp/ngcb23')

Définition Widget Card

Le widget Card est utilisé pour créer une boîte rectangulaire avec un container comme enfant. On a
l'impression que la Card est surélevée (une ombre portée). Cet effet peut être accentué avec la propriété
elevation.

Exemple
1 body: Center(
2 child: Card(
3 child: Container(
4 color: [Link],
5 height: 150,
6 width: 300,
7 child: simpleText("Ma premiere Card"),
8 ),
9 elevation: 10,
10 ),
11 ),

Tous droits réservés à STUDI - Reproduction interdite 25

 Widgets de base

26 Tous droits réservés à STUDI - Reproduction interdite

Widgets de base

Ici, on a défini un widget Card à l'intérieur du widget Center. À l'intérieur, il contient un widget Text.

Définition Widget Padding

Le widget Padding permet de positionner son enfant à l'intérieur d'un container ou d'une card.

Exemple
1 child: Card(
2 child:
3 Container(
4 color: [Link],
5 height: 150,
6 width: 300,
7 child: Padding(
8 padding: [Link](10, 10,0,0),
9 child: simpleText("Ma premiere Card"),
10 )
11 ),
12 elevation: 7.5,
13 ),

Dans cet exemple, Padding permet positionner le widget simpleText à 10 par rapport au Haut et 10 par
rapport à gauche.

Widget Column
Le widget Column permet d'aligner verticalement des widgets. On peut le voir comme une pile d'éléments. Dans
d'autres langages, on parlera de stackview. Ce widget possède des enfants : children. Ils s'espacent dans la
column selon la propriété mainAxisAlignement.
Cette propriété peut prendre différentes valeurs :
Start : les éléments sont groupés en haut de colonne.
End : les éléments sont groupés en bas de la colonne.
Center : les éléments sont groupés au centre de la colonne.
SpaceEvenly : les éléments sont séparés les uns des autres avec le même espacement.
SpaceBetween : les éléments sont séparés les uns des autres avec le même espacement en étant collés aux
extrémités.
SpaceAround : les éléments sont séparés les uns des autres avec le même espacement avec des marges
réduites aux extrémités.

Exemple La propriété spaceBetween

1 Column(
2 mainAxisAlignment: [Link],
3 children: [
4 Container(
5 height: 50,
6 color: [Link],
7 width: 50,
8 ),
9 Container(
10 height: 50,

Tous droits réservés à STUDI - Reproduction interdite 27

 Widgets de base

11 color: [Link],
12 width: 50,
13 ),
14 Container(
15 height: 50,
16 width: 50,
17 color: [Link]
18 )
19 ],)

28 Tous droits réservés à STUDI - Reproduction interdite

Widgets de base

Définition Widget Row

Le widget Row a le même fonctionnement que Column. Row est un empilement de widgets enfants (children).

Exemple [Link]
1 Row(
2 mainAxisAlignment: [Link],
3 children: [
4 Container(
5 height: 50,
6 color: [Link],
7 width: 50,
8 ),
9 Container(
10 height: 50,
11 color: [Link],
12 width: 50,
13 ),
14 Container(
15 height: 50,
16 width: 50,
17 color: [Link]
18 )
19 ],

Tous droits réservés à STUDI - Reproduction interdite 29

 Widgets de base

30 Tous droits réservés à STUDI - Reproduction interdite

Widgets de base

La propriété mainAxisAlignement est aussi présente. Elle se comporte similairement, mais horizontalement.

Définition Widget Expanded

En utilisant, le widget Expanded, dans une Column ou Row, son enfant occupera tout l'espace libre.
La propriété flex à l'intérieur du widget permet d'établir des proportions.

Exemple
Commençons par définir une column à l'intérieur du body. À l'intérieur de column, nous allons empiler
4 widgets expanded qui ont pour enfant un widget container. On définit une couleur pour chaque
container. Par défaut, la propriété flex est égale à 1.
1 Body(
2 Column(
3 children: [
4 Expanded(
5 child: Container(
6 color: [Link],
7 ),
8 ),
9 Expanded(
10 child: Container(
11 color: [Link],
12 ),
13 ),
14 Expanded(
15 child: Container(
16 color: [Link],
17 ),
18 ),
19 Expanded(
20 child: Container(
21 color: [Link],
22 ),
23 ),
24 ],
25 )

Tous droits réservés à STUDI - Reproduction interdite 31

 Widgets de base

On met une propriété flex à 3 au widget expanded contenant le container jaune.

32 Tous droits réservés à STUDI - Reproduction interdite

Widgets de base

1 Expanded(
2 flex: 3,
3 child: Container(
4 color: [Link],
5 ),
6 ),

Tous droits réservés à STUDI - Reproduction interdite 33

 Widgets de base

Si on fait la somme des propriétés sachant que par défaut elle est à 1 :
1 (container rouge) + 1 (container bleu) + 3 (container jaune) + 1 (container vert) = 6
La proportion du container jaune sera de 3/6 de l'écran. On voit que cela correspond bien à la moitié de
l'écran.
Pour se simplifier dans les calculs, on prendra 10 pour la somme des flex. Ensuite, on répartit la somme des
propriétés flex sur chaque widget Expanded.
Adoptons la répartition suivante :
Rouge : flex = 1 soit 1/10
Bleu : flex = 2 soit 2/10
Jaune : flex = 2 soit 2/10
Vert : flex = 5 soit 5/10

34 Tous droits réservés à STUDI - Reproduction interdite

Widgets de base

Tous droits réservés à STUDI - Reproduction interdite 35

 Exercice : Quizsolution

Exercice : Quiz [solution n°2 p.43]

Question 1

Question 2

36 Tous droits réservés à STUDI - Reproduction interdite

Question 3

Question 4
 Question 5

V. Essentiel
Au fil de ce cours, nous avons vu la première partie des bases de Flutter. La philosophie de Flutter consiste à
combiner des widgets : tout est widget. Un widget peut contenir un ou plusieurs widgets. On a abordé les widgets
StateLess. Un widget « stateLess » ne change pas d'état au cours de sa vie.
Dans un premier temps, retenez le squelette d'une application Flutter :
Appbar : la barre de titre de l'application avec la possibilité d'ajout de boutons.
Hamburger-menu : drawer permettant la navigation à l'intérieur de l'application.
FloatingButtonAction : un bouton en bas à gauche.
Body : la racine de l'application qui peut contenir un widget Container.
Dans un second temps, quelques widgets de base de Flutter :
Widget Text : composant qui permet d'afficher du texte dans nos applications avec la possibilité d'ajout de
polices de caractères personnalisées.
Widget Icon : composant affichant une icône.
Widget Row : composant qui permet un alignement horizontal des widgets.
Widget Column : composant qui permet un alignement vertical des widgets.
Widget Expanded : qui permet d'étendre un widget à l'espace libre dans une Column ou Row.

VI. Auto-évaluation
A. Exercice
Dans cet exercice, nous allons mettre en pratique les différents widgets étudiés dans ce cours. Le but est de
construire une carte de visite minimaliste avec pour forme un rectangle. La carte sera composée d'une image et de
textes. Les textes seront :
L'intitulé de la formation
Le nom de la personne
L'adresse mail de la personne
Il conviendra d'utiliser les widgets Row et Column pour positionner les éléments.
Il faudra intégrer une image au projet.
Auto-évaluation

Tous droits réservés à STUDI - Reproduction interdite 39

 Auto-évaluation

Question 1 [solution n°3 p.43]

Créez un projet Flutter, Flutter App. Faites le ménage dans le [Link] de l'application. Créez un widget
CarteDeVisite qui viendra au niveau du home dans le widget MaterialApp.
Question 2 [solution n°4 p.44]
Mettez en place une image dans le projet.
Question 3 [solution n°5 p.44]
Insérez le squelette de l'application dans le widget CarteDeVisite. Donnez un titre à l'application. En body,
l'application aura un widget Center vide.
Question 4 [solution n°6 p.44]
Créez une card au milieu de la page d'une hauteur de 150 et largeur de 300 de couleur grey.
Question 5 [solution n°7 p.44]
Créez trois zones. La première contiendra l'intitulé de la spécialité. Elle occupera ⅕ de la card en hauteur. La
deuxième zone contiendra la photo / avatar avec le nom de la personne. Elle fera une hauteur de ⅖ de la card. Une
troisième zone de la même proportion que la première contiendra l'e-mail de la personne.
Question 6 [solution n°8 p.45]
Insérez l'intitulé de la section dans la première zone.
Question 7 [solution n°9 p.45]
Dans la zone du milieu, insérez une image à gauche et le nom à droite.
Question 8 [solution n°10 p.45]
Dans la zone du bas, insérez le texte d'une adresse mail.
Question 9 [solution n°11 p.46]
Vérifiez les widgets à l'intérieur de la construction du widget MaCarteDeVisite.

B. Test
Exercice 1 : Quiz [solution n°12 p.47]

Question 1

Question 2

40 Tous droits réservés à STUDI - Reproduction interdite

Question 3

Question 4
Question 5

Solutions des exercices

Solutions des exercices

Exercice p. 15 Solution n°1

Question 1

Question 2

Question 3

Question 4

Question 5

Exercice p. 36 Solution n°2

Question 1

Question 2

Question 3

Question 4

Question 5

p. 40 Solution n°3

1 import 'package:flutter/[Link]';
2 void main() {
3 runApp(MyApp());
4}
5 class MyApp extends StatelessWidget {
6 @override
7 Widget build(BuildContext context) {
8 return MaterialApp(
9 title: 'Flutter Demo',
10 theme: ThemeData(
11 primarySwatch: [Link],
12 ),
13 home: CarteDeVisite()
14 );
15 }
16 }
17
18 class CarteDeVisite extends StatelessWidget {
19
20 @override
21 Widget build(BuildContext context) {
22 // TODO: implement build
23 throw UnimplementedError();
24 }
25 }

Tous droits réservés à STUDI - Reproduction interdite 43

 Solutions des exercices

p. 40 Solution n°4

Créez un répertoire dans le projet qui contiendra les assets. Puis à l'intérieur de ce dernier, on crée un répertoire
image. On glisse l'image dans le répertoire image. Ensuite, il faut modifier le fichier [Link] pour configurer /
indiquer le chemin où se trouve l'image à la rubrique assets.
1 # To add assets to your application, add an assets section, like this:
2 assets:
3 - assets/images/[Link]
4# - images/a_dot_ham.jpeg

p. 40 Solution n°5

1 class CarteDeViste extends StatelessWidget {

2
3 @override
4 Widget build(BuildContext context) {
5 return(
6 Scaffold(
7 appBar: AppBar(
8 title: Text("Carte de visite"),
9 ),
10 body: Center()
11 ,
12 )
13 );
14 }
15 }

p. 40 Solution n°6

1 body: Center(
2 child: Card(
3 child: Container(
4 height: 150,
5 width: 300,
6 color:[Link]
7 ),
8 ),
9)

p. 40 Solution n°7

1 Card(
2 child:
3 Container(
4 color: [Link],
5 height: 150,
6 width: 300,
7 child: Column(
8 children: [
9 Expanded(
10 flex:2,
11 child: Container(

44 Tous droits réservés à STUDI - Reproduction interdite

Solutions des exercices

12 color: [Link],
13 )),
14 Expanded(
15 flex:6,
16 child: Container(
17 color:[Link]
18 )),
19 Expanded(
20 flex:2,
21 child: Container(
22 color:[Link]
23 ))
24 ],
25 )
26 ),
27 elevation: 7.5,
28 ),

p. 40 Solution n°8

1 Expanded(
2 flex:2,
3 child: Text("Développeur Full Stack"
4
5 )),

p. 40 Solution n°9

1 Expanded(
2 flex:6,
3 child: Row(
4 children: [
5 Expanded(
6 flex:1,
7 child: Padding(
8 padding: const [Link](8.0),
9 child: Container(
10 child: [Link]('assets/images/[Link]',),
11 ),
12 )),
13 Expanded(flex:2
14 ,child: Padding(
15 padding: const [Link](8.0),
16 child: Container(
17 child: Text("DUPOND Philippe"),
18
19 ),
20 ))
21 ],
22 )
23 ),

p. 40 Solution n°10

Tous droits réservés à STUDI - Reproduction interdite 45

 Solutions des exercices

1 Expanded(
2 flex:2,
3 child: Row(
4 children: [
5 Padding(
6 padding: const [Link](3.0),
7 child: Text("Email : PhilippeDupond@[Link]"),
8 )
9 ],
10 )
11 )

p. 40 Solution n°11

1 class CarteDeVisite extends StatelessWidget {

2
3 @override
4 Widget build(BuildContext context) {
5 // TODO: implement build
6 return Scaffold(
7 appBar: AppBar(
8 title:Text('Ma carte de Visite')
9 ),
10 body: Center(
11 child: Card(
12 child:
13 Container(
14 color: Colors.black12,
15 height: 150,
16 width: 300,
17 child: Column(
18 children: [
19 Expanded(
20 flex:2,
21 child: Text("Développeur Full Stack"
22 )),
23 Expanded(
24 flex:6,
25 child: Row(
26 children: [
27 Expanded(
28 flex:1,
29 child: Padding(
30 padding: const [Link](8.0),
31 child: Container(
32 child: [Link]('assets/images/[Link]',),
33 ),
34 )),
35 Expanded(flex:2
36 ,child: Padding(
37 padding: const [Link](8.0),
38 child: Container(
39 child: Text("DUPOND Philippe"),
40
41 ),
42 ))
43 ],

46 Tous droits réservés à STUDI - Reproduction interdite

Solutions des exercices

44 )
45 ),
46 Expanded(
47 flex:2,
48 child: Row(
49 children: [
50 Padding(
51 padding: const [Link](3.0),
52 child: Text("Email : PhilippeDupond@[Link]"),
53 )
54 ],
55 )
56 )
57 ],
58 )
59 ),
60 elevation: 7.5,
61 ),
62 ),
63 );
64 }

Exercice p. 40 Solution n°12

Question 1

Question 2

Question 3

Question 4

Question 5

Tous droits réservés à STUDI - Reproduction interdite 47