Atelier 1

MP Développement Mobile
AU : 2023-2024 Atelier 1-Flutter

Enseignants :
2ème GCR
Chaker ben Mahmoud, Fatma Ellouze
Objectifs
Le but de cet atelier est de :
• manipuler les éléments de base dans Flutter.
• créer différents widgets (Center, Text, Column, Container, Stack…).
• créer plusieurs pages dans une application avec une navigation entre elles en utilisant le
widget Drawer.
• comprendre la différence entre StatelessWidget et StatefulWidget.
Exercice 1 : HelloWorld
Développez une application qui affiche HelloWorld.
1. Modifiez la taille du texte (utiliser la propriété style dans le widget Text).

2. Centrez le texte (utiliser le widget Center dans la propriété body du Scaffold).
3. Modifiez la couleur de fond (utiliser la propriété backgroundColor dans le widget
Scaffold).
4. Ajoutez une image au-dessus du texte en utilisant le widget Image.asset(). Pour ce faire,
ajoutez tout d’abord un dossier images dans le projet où vous mettez dedans toutes les
images de l’application. Ensuite, configurez le fichier pubspec.yaml pour qu’il accepte
d’intégrer des images. Il faut donc ajouter ces deux lignes dans le fichier pubspec.yaml :
assets:
- images/logo.png
NB. Le widget Center peut contenir un seul widget dans sa propriété child. Pensez à changer
Center par Colum (ou Row) pour utiliser la propriété children permettant de contenir plusieurs
widgets.
5. Ajoutez une zone de texte qui décrit l’image. Pensez à extraire le widget Image dans une
fonction qui s’appelle _widgetImage(). Cette fonction retourne un Widget de type Column
qui a deux enfants (l’image elle-même et le texte qui la décrit). Changer le Column par
Stack et décrivez le résultat.
Exercice 2 : Naviguer entre les pages (Drawer)

1. Créez un nouveau Flutter Projet qui s’appelle « drawer ». Ensuite, créez sous le dossier lib
du projet un dossier ui comme le montre la figure suivante.
Dans le dossier ui, créer deux dossiers : pages
et widgets.
Dans le dossier pages, créez 4 fichiers

(counter.page.dart, gallery.page.dart,
home.page.dart et meteo.page.dart).
Dans le dossier widgets, créer le fichier

drawer.widget.dart.
2. Tapez dans le fichier main.dart le code suivant :
import 'package:flutter/material.dart';
void main ()=> runApp( MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
routes: {
"/": (context) =>HomePage(), //page principale
"/meteo": (context) =>MeteoPage(),
"/gallery": (context) =>GalleryPage(),
"/counter": (context) =>CounterPage(),
},
theme: ThemeData(
primarySwatch: Colors.deepOrange
),
initialRoute: "/" ,
);
}}
3. Vous remarquez que le widget MaterialApp fait appel aux propriétés routes et
initialRoute. Donnez l’objectif de chacune de ces propriétés.
4. Créez dans le fichier home.page.dart la classe HomePage(). Cette classe hérite de
StatelessWidget. Sa méthode build (BuildContext context) retourne un widget de type
Scaffold ayant les trois propriétés suivantes : drawer, appbar et body. La propriété drawer
crée un objet de la classe MyDrawer().
5. Créez dans le fichier drawer.widget.dart la classe MyDrawer(). Cette classe hérite de
StatelessWidget. Sa méthode build (BuildContext context) retourne un widget de type
Drawer. Le constructeur de la classe Drawer possède la propriété child. Pour créer plusieurs
widgets sous la propriété child, commencez par créer une instance de la classe ListView().
L’objet ListView() peut avoir la propriété children qui à son tour peut contenir un objet de
type DrawerHeader et des objets de type ListTile(). Voir la figure 1.
Drawer DrawerHeader
CircleAvatar
AppBar
AssetImage
ListTile
Scaffold
Icon (propriété:
trailing)
Divider
Icon (propriété:
leading)
Figure 1 : Résultat de l’application
6. Tapez le code suivant dans chaque ListTile() :
ListTile(
title: Text('Counter', style: TextStyle(fontSize: 22)),
leading: Icon(Icons.home, color: Colors.orange,),
trailing: Icon(Icons.arrow_right, color: Colors.orange),
onTap: (){},
),
7. Créez trois classes CounterPage, MeteoPage et GalleryPage respectivement dans les

fichiers suivants counter.page.dart, meteo.page.dart et gallery.page.dart comme le montre
la figure 2.
8. Revenez aux ListTiles et ajoutez le code suivant dans la méthode onTap : (). Cela permet
d’ouvrir la page correspondante à chaque fois qu’on clique sur un élément.
Navigator.of(context).pop(); //pour fermer le drawer

Navigator.pushNamed(context, "/counter");// pour afficher la page CounterPage
9. Dans la page counter.page, ajoutez un attribut (int counter=0 ;) dans la classe CounterPage.
Ajoutez ensuite deux boutons flottants à l’aide de la propriété floatingActionButton du
Scaffold.
FloatingActionButton(
heroTag: 'moins',
child: Icon (Icons.remove),
onPressed: ()
{--counter;
);
print(counter); } ),
10. Qu’est-ce que vous remarquez quand vous exécutez la classe CounterPage. Est-ce que le
compteur s’incrémente et se décrémente quand vous cliquez sur les boutons + et - ?
11. Changez l’héritage du CounterPage à StatefulWidget. Utilisez l’assistant de dart (il suffit
de sélectionner le nom de la classe et cliquez sur la lampe jaune puis sur convertir to
StatefulWidget). Qu’est-ce que vous remarquez ?
Figure 2 : les pages Counter, Meteo et Gallery
Modifier la propriété onPressed : en ajoutant la méthode suivante :
onPressed: ()
{
setState(() {
--counter;
});

Atelier 1

Transféré par

Droits d'auteur :

Formats disponibles

Atelier 1

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Atelier 1

Transféré par

Droits d'auteur :

Formats disponibles

MP Développement Mobile

AU : 2023-2024 Atelier 1-Flutter

1. Modifiez la taille du texte (utiliser la propriété style dans le widget Text).

Exercice 2 : Naviguer entre les pages (Drawer)

Dans le dossier pages, créez 4 fichiers

Dans le dossier widgets, créer le fichier

2. Tapez dans le fichier main.dart le code suivant :

Figure 1 : Résultat de l’application

6. Tapez le code suivant dans chaque ListTile() :

7. Créez trois classes CounterPage, MeteoPage et GalleryPage respectivement dans les

Navigator.of(context).pop(); //pour fermer le drawer

Figure 2 : les pages Counter, Meteo et Gallery

Modifier la propriété onPressed : en ajoutant la méthode suivante :

Vous aimerez peut-être aussi