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.

Question

Créez un projet Flutter, Flutter App. Faites le ménage dans le main.dart de l'application. Créez un widget CarteDeVisite qui viendra au niveau du home dans le widget MaterialApp.

Solution

1
import 'package:flutter/material.dart';
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: Colors.blue,
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
}

Question

Mettez en place une image dans le projet.

Solution

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 pubspec.yaml 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/beach.png
4
#   - images/a_dot_ham.jpeg

Question

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.

Solution

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
}

Question

Créez une card au milieu de la page d'une hauteur de 150 et largeur de 300 de couleur grey.

Solution

1
body: Center(
2
 child: Card(
3
   child: Container(
4
     height: 150,
5
     width: 300,
6
     color:Colors.grey
7
   ),
8
 ),
9
)

Question

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.

Solution

1
Card(
2
 child:
3
 Container(
4
   color: Colors.grey,
5
   height: 150,
6
   width: 300,
7
   child: Column(
8
     children: [
9
       Expanded(
10
           flex:2,
11
           child: Container(
12
           color: Colors.yellow,
13
       )),
14
       Expanded(
15
           flex:6,
16
           child: Container(
17
             color:Colors.red
18
           )),
19
       Expanded(
20
           flex:2,
21
           child: Container(
22
               color:Colors.blue
23
           ))
24
     ],
25
   )
26
 ),
27
 elevation: 7.5,
28
),

Question

Insérez l'intitulé de la section dans la première zone.

Solution

1
Expanded(
2
   flex:2,
3
   child: Text("Développeur Full Stack"
4
5
)),
Question
Dans la zone du milieu, insérez une image à gauche et le nom à droite.
Solution
1
Expanded(
2
   flex:6,
3
   child: Row(
4
     children: [
5
       Expanded(
6
           flex:1,
7
           child: Padding(
8
             padding: const EdgeInsets.all(8.0),
9
             child: Container(
10
             child: Image.asset('assets/images/beach.png',),
11
       ),
12
           )),
13
       Expanded(flex:2
14
           ,child: Padding(
15
             padding: const EdgeInsets.all(8.0),
16
             child: Container(
17
               child: Text("DUPOND Philippe"),
18
19
       ),
20
           ))
21
     ],
22
   )
23
),
Question
Dans la zone du bas, insérez le texte d'une adresse mail.
Solution
1
Expanded(
2
   flex:2,
3
   child: Row(
4
     children: [
5
       Padding(
6
         padding: const EdgeInsets.all(3.0),
7
         child: Text("Email : PhilippeDupond@gmail.com"),
8
       )
9
     ],
10
   )
11
)
Question
Vérifiez les widgets à l'intérieur de la construction du widget MaCarteDeVisite.
Solution
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 EdgeInsets.all(8.0),
31
                             child: Container(
32
                             child: Image.asset('assets/images/beach.png',),
33
                       ),
34
                           )),
35
                       Expanded(flex:2
36
                           ,child: Padding(
37
                             padding: const EdgeInsets.all(8.0),
38
                             child: Container(
39
                               child: Text("DUPOND Philippe"),
40
41
                       ),
42
                           ))
43
                     ],
44
                   )
45
               ),
46
               Expanded(
47
                   flex:2,
48
                   child: Row(
49
                     children: [
50
                       Padding(
51
                         padding: const EdgeInsets.all(3.0),
52
                         child: Text("Email : PhilippeDupond@gmail.com"),
53
                       )
54
                     ],
55
                   )
56
               )
57
             ],
58
           )
59
         ),
60
         elevation: 7.5,
61
       ),
62
     ),
63
   );
64
 }