Développement mobile 09/11/21

TP2 –Prise en main de Flutter

Objectif du TP
L’objectif de ce TP est de s’initier au développement de Flutter. Il s’agit d’une prise en main du
Framework.

Durée de réalisation de ce TP : 1h30

Enoncé :
L’objectif est de créer une première application qui affiche juste un texte. Cette application
respecte le material design de Google (voir Figure 1).

Figure 1. Première application Flutter

1. Créez un nouveau projet sous Android Studio (File→ New→New Flutter Project) que
vous allez appeler tp1.
2. Sous le répertoire lib vous allez trouver le main.dart dans lequel vous allez écrire le
code de votre application. Supprimez le contenu de la classe et y mettez cette définition :
import 'package:flutter/material.dart';
void main() => runApp(MaterialApp());

Cette première application doit respecter l’arborescence de Widgets décrite dans la Figure 2.

1
C. Aloulou et K. Boukadi
 Figure 2. Arborescence de Widgets de notre première application

3. Dans la propriété home du Widget MaterialApp, précisez qu’il va inclure un Widget de

type Scaffold. Ce dernier, grâce à sa propriété appBar va englobler un Widget de type
AppBar. Au sein d’AppBar :
- Proposez comme titre : Ma première Application,
- Mettez ce titre centré (utilisez la propriété centerTitle),
- Proposez également une couleur d’arrière-plan conformément à la Figure 1.
4. Dans la propriété body du Widget Scaffold, mettez un texte centré dont le contenu est :
Bonjour troisième année. Utilisez la propriété style pour faire un style à votre Widget
Text :
style: TextStyle(
fontSize: 20.0,
fontWeight: FontWeight.bold,
letterSpacing: 2,
color: Colors.grey[500],
fontFamily:'Indie',
)

5. Toujours dans le Widget scaffold, nous allons maintenant créer un bouton de type
FloatingActionButton et ce en utilisant la propriété floatingActionButton. Pour ce
bouton, il faut mentionner :
- La fonction onPressed à vide,
- Un child comportant un Widget Text pour mentionner le message Click
conformément à la Figure 1 ,
- Proposez également une couleur d’arrière-plan conformément à la Figure 1.
6. Nous allons à présent remplacer le texte par une image :
- Choisir une image à partir de https://unsplash.com/s/photos/ , à titre d’exemple
https://unsplash.com/s/photos/moon
- Copier l’adresse de l’image (bouton droit copier l’adresse de l’image),
- Il faut mettre une propriété image dont la valeur est Widget appelé NetworkImage
(‘’)
body: Center (
//on peut pas mettre dans un Widget un Widget directement on doit
passer par un Child

2
C. Aloulou et K. Boukadi
 child: Image(
image: NetworkImage('https://images.unsplash.com/photo-
1535332371349-
a5d229f49cb5?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTl8fG1vb258ZW58MHx8MHx8&ix
lib=rb-1.2.1&auto=format&fit=crop&w=500&q=60')
)

Si on clique sur le bouton Run, nous devons obtenir un rendu semblable à celui de la
Figure 3.

Figure 3. Une image dans le body

7. Nous allons maintenant créer un stateless Widget appelé home pour tester le hot reload
et comment l’application s’adaptera automatiquement aux changements sans passer par
la commande Run.
- Créez un stateless Widget appelé Test en adoptant cette définition :

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(

home: Test (),
));
class Test extends StatelessWidget {
const Test({Key? key}) : super(key: key);

@override
Widget build(BuildContext context) {
return Scaffold(……

• Remarque : une astuce de développement sous Android Studio consiste à taper st

pour générer automatiquement le squelette de la classe qui étend StatelessWidget.

- Dans la classe déjà créée, il faut mettre le code source de l’application,

3
C. Aloulou et K. Boukadi
 - Réalisez certaines modifications (style, couleur, etc.),
- Cliquez sur le hot reload et remarquez que votre application a été mise à jour (voir
Figure 4).

Figure 4. Le hot reload dans Flutter

8. Nous allons maintenant tester notre application en insérant des images stockées en
local (voir Figure 5). Ainsi, il faut :
- Télécharger 3 images de votre choix à partir du site unsplash
(https://unsplash.com/),
- Créez un répertoire appelé assets (File-New Directory),
- Il faut copier-coller les 3 images téléchargées dans le répertoire fraichement crée,
- Ouvrir le ficher pubsec.yaml et décommenter assets (la mettre avec deux
espacement ne pas utiliser la tabulation). Le fichier de configuration est sensible à
l’indentation et puis déclarer votre image :
- assets/sunrise1.jpg
Au final vous allez obtenir ceci :
assets:
- assets/sunrise2.jpg

- Si on souhaite déclarer tous le contenu d’assets il faut mettre ceci :

- assets/
- Ensuite, il faut faire Tools→Flutter→Flutter clean,
- Aller à main.dart puis cliquez sur get dependecies pour mettre à jour et puis mettre
ceci :
- body: Center (
//on peut pas mettre dans un Widget un Widget directement on doit
passer par un Child
child: Image(

// Pour une image en local

image: AssetImage(('assets/sunrise2.jpg'),
)

4
C. Aloulou et K. Boukadi
 • Remarque : sunrise2.jpg c’est le nom de l’image téléchargée. Il faut mettre le nom
de votre image téléchargée. Vous pouvez choisir une image parmi les trois déjà
téléchargées.
• Remarque : Une autre alternative est de faire ceci :
child: Image.asset('assets/sunrise2.jpg')
child: Image.network('https://images.unsplash.com/photo-
1535332371349-
a5d229f49cb5?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTl8fG1vb258ZW58MHx8MHx8
&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60'),

Figure 5. Une image en local

5
C. Aloulou et K. Boukadi