Documentation 1 : Guide de Développement d'Applications

Flutter : Préparation, Interfaces Utilisateur et Navigation

Objectifs :
Partie 1 : Préparation de l'Environnement de Développement
 Installer Flutter et Android Studio afin de préparer l'environnement de développement.
 Comprendre l'architecture et la structure d'un projet Flutter, en se familiarisant avec les
fichiers générés et leur rôle.

Partie 2 : Création de la première Interfaces Utilisateur

 Maîtriser les widgets de base tels que Scaffold, AppBar, et Body, pour créer des interfaces
utilisateur simples.
 Concevoir une première page d'application mobile en Flutter en utilisant des widgets
interactifs.

Partie 3 : Gestion de la Navigation et Création de l’application

 Implémenter la navigation entre plusieurs écrans, permettant de créer une application
multi-pages.
 Commencer à développer FitPlanner.

Introduction :
Cette documentation présente le processus d'installation et de manipulation de l'application mobile
FitPlanner, tout en fournissant une introduction à l'architecture d'une application simple créée avec
Flutter. L'objectif principal est de concevoir les premières interfaces de FitPlanner, une application
dédiée à la gestion des programmes de fitness. L'utilisateur entre ses données personnelles, telles
que le poids et la taille, et l'application propose des exercices physiques ainsi que des recettes
adaptées à ses objectifs.
Nous utiliserons Flutter, un framework open-source développé par Google, qui permet de créer
des applications mobiles, web et desktop à partir d'un seul codebase. Flutter est particulièrement
adapté pour cette application en raison de sa capacité à générer des interfaces fluides, performantes
et interactives, tout en facilitant le développement multiplateforme, ce qui permet de cibler
Android et iOS simultanément.

1
Partie 1 : Préparation de l'Environnement de Développement
Si vous avez déjà installé votre environnement de travail et testé votre premier projet Flutter, vous
pouvez passer cette section.

Prérequis Matériels
Exigence Minimum Recommandée

OS Microsoft Windows 64 bits Microsoft Windows 11 64 bits

RAM 8 Go de RAM 16Go de RAM

Processeurs Architecture de processeur Processeur Intel Core de

x86_64, Intel Core ou dernière génération
processeur AMD compatible
avec Windows
Espace Disque 8 Go 16 Go SSD

Résolution d’écran 1280 x 800 1920 x 1080

Source developer.android.com

Installation
 Android Studio :
Commencez par installer Android Studio en suivant le lien officiel : Installer
Android Studio
 Flutter
Pour installer Flutter, veuillez consulter la documentation officielle à l'adresse
suivante : Installer Flutter
 Git for Windows
Vous aurez également besoin de Git. Installez-le en visitant ce lien : Installer
Git for Windows
 Visual Studio
Si vous n'avez pas encore installé Visual Studio, vous pouvez le faire ici :
Installer Visual Studio

Création du Projet
Après avoir installé l'ensemble des outils nécessaires, suivez les étapes ci-dessous pour créer le
projet Flutter.

2
Installation du plugin Flutter dans Android
Studio
 Ouvrez Android Studio.
 Rendez-vous dans l'onglet Plugins.
 Recherchez le plugin Flutter dans la
barre de recherche.
 Installez-le, comme illustré dans
l'exemple ci-dessous
Configuration du Device Manager
Pour configurer un appareil virtuel afin de tester votre application Flutter, suivez les étapes ci-
dessous dans Android Studio :
 Accéder au Device Manager
 Dans la barre de menu du Android Studio, cliquez sur Tools puis sélectionnez Device
Manager.
 Ajouter un nouvel appareil
 Cliquez sur le bouton + (Ajouter un nouveau dispositif), comme illustré dans la capture
d'écran ci-dessous.

 Sélectionner un appareil
 Choisissez un modèle d'appareil parmi la liste des dispositifs proposés (ex : Pixel 8, Pixel
8 Pro, etc.).
 Choisir un système d'exploitation
 Sélectionnez la version du système d'exploitation Android que vous souhaitez utiliser pour
l'appareil virtuel.

3
Vérification de l'installation de Flutter
 Ouvrez l'invite de commande (cmd).
 Tapez la commande suivante pour vérifier l'installation de Flutter et connaître
l'emplacement du SDK sur votre machine : flutter doctor –v
 Notez l'emplacement du SDK Flutter.

Résolution des erreurs éventuelles

 Si une erreur est retournée par flutter doctor, vous devrez vérifier la configuration du SDK
dans Android Studio.
 Pour ce faire, allez dans Tools -> SDK Manager.

4
  Sous l'onglet SDK Tools, assurez-vous que la version adéquate du SDK Android est bien
installée.
 Suivez ces étapes pour vous assurer que votre environnement de développement Flutter est
correctement configuré et que le SDK est installé.
Création du projet dans Android Studio
 Retournez dans Android Studio.
 Sélectionnez Créer un nouveau projet sous la section Générateurs à gauche.
 Choisissez l'option Flutter.
 Lors de la configuration, entrez le chemin du SDK Flutter, comme indiqué sur la capture
d'écran.

 Nommer le projet
 Donnez au projet le nom FitPlanner.
 Choisissez le langage Java pour le développement.

5
Architecture Générale du Projet Flutter
 Dossier lib : Le dossier lib est l'emplacement
principal où se trouvent tous les fichiers du code
source de votre application Flutter. C'est ici que
vous allez créer et organiser les fichiers Dart
nécessaires au développement des différentes
fonctionnalités de votre application.
 Fichier main.dart : Le fichier main.dart, situé dans
le dossier lib, est le point d'entrée de l'application.
C'est ce fichier qui contient la fonction principale
(main()) et qui est exécuté lorsque l'application
démarre. Il configure et lance l'interface utilisateur
initiale.
 Fichier pubspec.yaml : Le fichier pubspec.yaml
contient les informations de configuration de votre
projet Flutter. Il spécifie les dépendances
(packages), les ressources (images, polices), ainsi que les versions de Flutter et Dart
utilisées. C'est un fichier essentiel pour gérer les bibliothèques et les configurations de
l'application.

Partie 2 : Création de la première Interfaces Utilisateur

Dans cette section, nous allons introduire quelques classes essentielles qui seront utilisées dans
l'application FitPlanner. Ces classes constituent la base de la création d'interfaces utilisateur avec
Flutter. Les autres classes seront expliquées au fur et à mesure dans les étapes suivantes.

1. Scaffold
Paramètres principaux: appBar, body, floatingActionButton, drawer, backgroundColor,
bottomNavigationBar
Description : Scaffold est une classe fondamentale qui fournit la structure de base pour une
interface utilisateur Flutter. Elle permet de définir l'AppBar, le Body, un bouton d'action flottant
(FloatingActionButton), et d'autres composants de mise en page. C'est le conteneur principal d'une
page dans une application Flutter.

2. AppBar
Paramètres principaux : title, backgroundColor, actions, leading, elevation
Description : AppBar représente la barre d'application située en haut de l'écran. Elle permet
d'afficher un titre, des actions (boutons), et une icône de navigation (par exemple, un menu ou un
bouton retour).

6
 3. Body
Paramètre principal : child
Description : Le Body d'un Scaffold est la zone principale d'affichage des contenus. Il est
généralement constitué de widgets, comme des colonnes (Column), des lignes (Row), ou d'autres
mises en page qui structurent les éléments visuels.

4. FloatingActionButton
Paramètres principaux : onPressed, child, backgroundColor, tooltip
Description : Le FloatingActionButton est un bouton d'action circulaire qui flotte au-dessus de
l'interface. Il est généralement utilisé pour déclencher une action importante, comme ajouter un
nouvel élément ou lancer une tâche spécifique.

5. Text
Paramètres principaux : data, style, textAlign, overflow, maxLines
Description : Le widget Text permet d'afficher une chaîne de caractères. Il supporte différents
styles et alignements, ainsi que des options pour gérer le dépassement de texte (overflow) ou
limiter le nombre de lignes affichées.

6. Drawer
Paramètres principaux : child, elevation, semanticLabel
Description : Drawer est un panneau latéral qui s'affiche en glissant depuis le bord gauche de
l'écran. Il contient des options de navigation ou des informations supplémentaires pour l'utilisateur,
généralement accessible via l'icône de menu de l'AppBar.

7. ElevatedButton
Paramètres principaux : onPressed, child, style, onLongPress
Description : Un ElevatedButton est un bouton surélevé qui réagit au clic. Il est souvent utilisé
pour les actions primaires dans une interface utilisateur et peut être personnalisé en termes de style
et d'apparence.

8. Column
Paramètres principaux : children, mainAxisAlignment, crossAxisAlignment
Description : Le widget Column permet d'afficher une liste de widgets verticalement. Les
paramètres permettent de gérer l'alignement des enfants le long de l'axe principal et de l'axe
secondaire.

9. Row
Paramètres principaux : children, mainAxisAlignment, crossAxisAlignment

7
Description : Similaire à Column, le widget Row dispose les enfants horizontalement. Il est utilisé
lorsque l'on souhaite afficher plusieurs widgets sur une même ligne.

10.Container
Paramètres principaux : child, padding, margin, color, width, height
Description : Container est un widget polyvalent qui peut contenir d'autres widgets et leur
appliquer des contraintes de taille, des marges, des couleurs, et des bordures. Il est utilisé pour
organiser les widgets à l'écran.
Ces classes sont fondamentales pour la création d'interfaces en Flutter. Vous trouverez ci-dessous
des illustrations et explications supplémentaires.

8
Étapes préliminaires avant de créer l’application :
Lancez le code pour la première fois en suivant les instructions.

 Ouverture du simulateur
:Démarrez le simulateur tel
qu'indiqué dans la capture
d'écran. Une fois le
simulateur ouvert, cliquez
sur "Run".
 Temps d'exécution :
L’exécution initiale du
projet peut prendre du
temps. Cela est normal et
peut être dû à divers
facteurs tels que la connexion Internet.

Partie 3 : Gestion de la Navigation et Création de l’application

1. Création des pages de l’application :

 Sous le dossier lib, créez un sous-dossier ui, dans

lequel ajoutez un autre dossier nommé pages. Dans ce
dernier, créez trois fichiers :
o gender.page.dart
o name.page.dart
o goal.page.dart

9
 2. Modification de main.dart :

Dans le fichier main.dart, supprimez le code existant et remplacez-le par le code suivant. Ce
code permet de définir :

 Le nom de l’application
 Le thème de l’application
 Les routes : Un système de navigation qui relie chaque route à une page spécifique. Cela
inclut les trois pages que nous venons de créer : gender.page, name.page, et
goal.page.

import 'package:flutter/material.dart';

import 'ui/pages/gender.page.dart';
import 'ui/pages/goal.page.dart';
import 'ui/pages/name.page.dart';

void main() {
runApp(const MyApp());
}

class MyApp extends StatelessWidget {

const MyApp({super.key});

// This widget is the root of your application.

@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'FitPlanner',
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: const
Color(0xFF78b500)),
useMaterial3: true,
),
routes:{
'/': (context) => const GenderPage(),
'/page': (context) => const NamePage(),
'/goal': (context) => const GoalPage(name: '',)
}
);
}
}

10
 3. Création du Formulaire Utilisateur et Navigation:

 Introduction de la première page

(gender.page.dart) :
La première partie de l’application consiste à
configurer un formulaire utilisateur pour les
nouveaux utilisateurs. Le formulaire est réparti
sur plusieurs pages successives :
 Page de sélection du genre
 Page de saisie du nom
 Page de sélection de l’objectif sportif

Pour les utilisateurs ayant déjà un compte, un pop-up

de connexion sera proposé.

 Structure de la page gender.page.dart :

Sur cette page, nous allons définir une barre de
progression pour guider les utilisateurs dans les
différentes étapes du formulaire, avec les
éléments suivants :

 Titre de la page : "What’s your gender"

 Boutons radio avec images : Utilisés pour
la sélection du genre (ces images
fonctionnent comme des boutons radio).
 Bouton "Next" : Pour continuer la
navigation.
 Bouton "Login" : Pour permettre aux
utilisateurs existants de se connecter.

 Utilisation de StatefulWidget :
Comme cette page comporte des éléments de
formulaire et nécessite une interaction
utilisateur, il est recommandé d’utiliser un
widget StatefulWidget. Contrairement au
StatelessWidget, le StatefulWidget permet
de gérer et de suivre les changements d’état de
l’interface (par exemple, la progression ou la sélection d’une option).

Dans le fichier gender.page.dart, créez deux classes :

 GenderPage qui hérite de StatefulWidget

 GenderState qui hérite de State<GenderPage>

11
class GenderPage extends StatefulWidget{
const GenderPage({super.key});
@override
GenderState createState() => GenderState();
}

class GenderState extends State<GenderPage> {

@override
Widget build(BuildContext context) {
return Scaffold(
);
}
}

4. Définition des Éléments de la Page

 ClipRRect pour la barre de progression :

ClipRRect est un widget Flutter utilisé pour appliquer des
coins arrondis autour d'un widget enfant, parfait pour
styliser la barre de progression.

 Autres éléments :
Text() pour les textes.
ElevatedButton() pour les boutons principaux.
TextButton() pour les options supplémentaires.

12
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class GenderPage extends StatefulWidget{

const GenderPage({super.key});
@override
GenderState createState() => GenderState();
}

class GenderState extends State<GenderPage> {

@override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: [
ClipRRect(
borderRadius: BorderRadius.circular(10.0),
child: const SizedBox(
height: 10.0,
child: LinearProgressIndicator(
value: 0.1,
backgroundColor: Color(0xffc6c6c6),
color: Color(0xff78B500),
),
),
),
const Text('What\'s your gender ?',
style: TextStyle(
fontSize: 30.0,
fontFamily: 'SF Pro Display',
fontWeight: FontWeight.bold,
color: Colors.black
),
),
ElevatedButton(
onPressed: (){
},
style: ElevatedButton.styleFrom(
backgroundColor: const Color(0xFF78B500),
minimumSize: const Size(300.0, 70.0),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10),
),
), 13
 child:
const Text('Next',
style: TextStyle(
color: Color(0xFFFFFFFF),
fontSize: 24.0,
fontFamily: 'SF Pro Display',
),
),
),
Row(
children: [
Container(
height: 1,
color: Colors.grey,
),
Text(
'Already our member ?',
style: TextStyle(
fontSize: 14,
color: Colors.grey),
),
Container(
height: 1
color: Colors.grey
),
],
),
TextButton(onPressed: (){
},
child: const Text('Continue with your existing account >',
style: TextStyle(
fontSize: 16.0
),
)
),
],
),
);
}
}

14
 5. Amélioration de la disposition des widgets :

Bien que tous les éléments soient définis, leur placement peut nécessiter des ajustements. On doit
donc utiliser des widgets tels que Padding() pour ajouter des marges autour des éléments, et
Spacer() pour ajouter des espaces afin que les widgets se positionnent correctement en bas de la
page et AnimatedContainer() pour les animations.

6. Préparation des assets pour les boutons radio avec images :

Avant de créer les classes pour les boutons radio, il est
nécessaire de configurer le dossier d’assets. Créez un
dossier assets/photos et placez-y les images nécessaires.
Ouvrez le fichier pubspec.yaml, qui est essentiel à la
configuration du projet Flutter. Ajoutez-y les dépendances
pour les assets afin de permettre à Flutter de charger les
images depuis assets/photos. (Vous retrouverez toutes les
images dans un dossier ‘photos’)

7. Création de la classe ImageButtonGroup

On va créer une classe ImageButtonGroup qui est un widget Statful Flutter personnalisable qui
permet de sélectionner une option visuelle parmi deux images (par exemple, un bouton radio avec
images pour sélectionner le genre). En choisissant une image, l'apparence du bouton change
dynamiquement, indiquant visuellement la sélection de l'utilisateur. Une classe principale
ImageButtonGroup qui hérite du StatefulWidget et class d'état ImageButtonGroupState qui
hérite du State<> et qui contient la variable selectedIndex (initialisée à 0) permet de suivre
l'image actuellement sélectionnée par l'utilisateur. Ici, 0 représente la première image et 1 la
deuxième, et La méthode onSelect(int index) met à jour selectedIndex lorsqu'une image est
sélectionnée, ce qui entraîne le rafraîchissement du widget et met en surbrillance l'image
sélectionnée.
Contenu du build Widget

 AnimatedContainer pour le fond d'image :

 Le widget AnimatedContainer englobe les deux options d'image. Ce conteneur

est animé pour ajouter une transition fluide, modifiant son image de fond en
fonction de la sélection (backMale.png ou backFemale.png).
 La durée et la courbe d'animation (800ms, Curves.linear) sont définies pour
assurer un changement doux d'une image de fond à l'autre.

 Les options de sélection (boutons radio visuels) :

 GestureDetector : Utilisé pour capturer les interactions utilisateur avec chaque

option.

15
  AnimatedContainer : Chaque option est placée dans un AnimatedContainer,
offrant une animation pour la taille des images lors de la sélection.
 AnimatedSwitcher : En fonction de selectedIndex, l'image change en douceur
grâce à AnimatedSwitcher, alternant entre une version sélectionnée et une version
non sélectionnée de l’image (ex. : maleGenderSelected.png pour la sélection,
maleGender.png sinon).

8. Implémentation d'un Bottom Sheet

d'Options d'Authentification

Dans la classe GenderState on va ajouter une fonction

showAuthOptions qui est conçue pour afficher un pop-up
(bottom sheet) offrant aux utilisateurs plusieurs options
d'authentification. Lorsqu'elle est appelée, cette fonction crée
une interface modale en bas de l'écran, permettant aux
utilisateurs de choisir comment ils souhaitent se connecter à
l'application.

Contenu du Pop-up :
Le bottom sheet contient trois boutons, chacun correspondant
à une méthode d'authentification :

1. Continue with Facebook :

o Ce bouton est stylisé avec la couleur emblématique de Facebook et une icône de
Facebook. Lorsque l'utilisateur clique sur ce bouton, le pop-up se ferme, et il peut
être programmé pour lancer la procédure de connexion via Facebook.
2. Continue with Google :
o Ce bouton présente une image représentant Google et est coloré en rouge. Tout
comme le bouton Facebook, il permet à l'utilisateur de se connecter via son
compte Google.
3. Continue with FP account :
o Ce bouton utilise une icône de mail et est conçu pour permettre aux utilisateurs de
se connecter avec un compte spécifique à l'application (FP account).

9. Implémentation de la navigation vers la page suivante

Il nous reste qu’implementer la fonction du bouton "Next", on ajoute onPressed: () {
Navigator.pop(context); }, ce qui fermera la page actuelle et renverra l’utilisateur à la page
précédente dans la pile de navigation.
 Navigator.push() : Permet de naviguer vers une nouvelle page en l’ajoutant à la pile de
navigation. Par exemple, Navigator.push(context, MaterialPageRoute(builder: (context)
=> NewPage())); affichera une nouvelle page NewPage.
 Navigator.pop() : Ferme la page actuelle et retourne à la page précédente en supprimant
la page de la pile, idéal pour revenir en arrière sans ouvrir de nouvelles pages.

16
import 'package:flutter/material.dart';

import 'name.page.dart';

class GenderPage extends StatefulWidget{

const GenderPage({super.key});
@override
GenderState createState() => GenderState();
}

class GenderState extends State<GenderPage>{

@override
Widget build(BuildContext context) {
return Scaffold(
body: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: [
const SizedBox(
height: 50.0,
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 80.0, vertical:
10.0),
child: TweenAnimationBuilder<double>(
tween: Tween(
begin: 0,
end: 5
),
duration: const Duration(milliseconds: 500),
builder: (BuildContext context, double value, Widget? child) {
return ClipRRect(
borderRadius: BorderRadius.circular(10.0),
child: const SizedBox(
height: 10.0,
child: LinearProgressIndicator(
value: 0.1,
backgroundColor: Color(0xffc6c6c6),
color: Color(0xff78B500),
),
),
);
},
),
),
const SizedBox(
height: 40.0,
),
const Text('What\'s your gender ?',
style: TextStyle(
fontSize: 30.0,
fontFamily: 'SF Pro Display',
fontWeight: FontWeight.bold,
color: Colors.black

17
 ),
),
const SizedBox(
height: 120.0,
),
const Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
ImageButtonGroup(),
],
),
const Spacer(),
ElevatedButton(
onPressed: (){
Navigator.push(
context,
PageRouteBuilder(
pageBuilder: (context, animation, secondaryAnimation) =>
NamePage(),
transitionsBuilder: (context, animation,
secondaryAnimation, child) {
return FadeTransition(
opacity: animation,
child: child,
);
},
),
);
},
style: ElevatedButton.styleFrom(
backgroundColor: const Color(0xFF78B500),
minimumSize: const Size(300.0, 70.0),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10),
),
),
child:
const Text('Next',
style: TextStyle(
color: Color(0xFFFFFFFF),
fontSize: 24.0,
fontFamily: 'SF Pro Display',
),
),
),
const SizedBox(
height: 30.0,
),
Row(
children: [
Expanded(
child: Container(
height: 1,
color: Colors.grey,
),
),
const Padding(

18
 padding: EdgeInsets.symmetric(horizontal: 10.0),
child: Text(
'Already our member ?',
style: TextStyle(
fontSize: 14,
color: Colors.grey),
),
),

Expanded(
child: Container(
height: 1,
color: Colors.grey,
),
),
],
),
TextButton(onPressed: (){
showAuthOptions(context);
},
child: const Text('Continue with your existing account >',
style: TextStyle(
fontSize: 16.0
),
)
),
],
),
),
);
}

void showAuthOptions(BuildContext context) {

showModalBottomSheet(
context: context,
builder: (BuildContext context) {
return Container(
padding: EdgeInsets.only(right: 16.0,left: 16.0,top:20.0,bottom:
20.0),
height: 250,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
ElevatedButton(
onPressed: () {
Navigator.pop(context);
},
style: ElevatedButton.styleFrom(
backgroundColor: Color(0xff1877F2),
),
child: Row(
children: [
Icon(Icons.facebook,
color: Colors.white,
),
SizedBox(width: 50.0,),
Text('Continue with Facebook',

19
 style: TextStyle(
color: Colors.white,
fontSize: 22.0
),
),
],
),
),
SizedBox(height: 10),
ElevatedButton(
onPressed: () {
Navigator.pop(context);
},
style: ElevatedButton.styleFrom(
backgroundColor: Colors.red,
),
child: Row(
children: [
Image.asset("assets/photos/google.png",
width: 20,
),
SizedBox(width: 50.0,),
Text('Continue with Google',
style: TextStyle(
color: Colors.white,
fontSize: 22.0
),
),
],
),
),
SizedBox(height: 10),
ElevatedButton(
onPressed: () {
Navigator.pop(context);
},
child: Row(
children: [
Icon(Icons.mail,
color: Color(0xFF78B500),
),
SizedBox(width: 50.0,),
Text('Continue with FP account',
style: TextStyle(
color: Color(0xFF78B500),
fontSize: 22.0
),
),
],
),
),
],
),
);
},
);
}

20
}

class ImageButtonGroup extends StatefulWidget {

const ImageButtonGroup({super.key});
@override
ImageButtonGroupState createState() => ImageButtonGroupState();
}

class ImageButtonGroupState extends State<ImageButtonGroup> {

int selectedIndex = 0;

void onSelect(int index) {

setState(() {
selectedIndex = index;
});
}

@override
Widget build(BuildContext context) {
return AnimatedContainer(
duration: const Duration(milliseconds: 800),
curve: Curves.linear,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage(
selectedIndex == 0
? 'assets/photos/backMale.png'
: 'assets/photos/backFemale.png'
),
fit: BoxFit.cover,
),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
GestureDetector(
onTap: () => onSelect(0),
child: AnimatedContainer(
duration: const Duration(milliseconds: 500),
curve: Curves.easeInOut,
width: selectedIndex == 0 ? 212 : 159,
height: selectedIndex == 0 ? 300 : 225,
child: AnimatedSwitcher(
duration: const Duration(milliseconds: 500),
child: Image.asset(
selectedIndex == 0
? 'assets/photos/maleGenderSelected.png'
: 'assets/photos/maleGender.png',
key: ValueKey(selectedIndex == 0),
),
)
),
),
GestureDetector(
onTap: () => onSelect(1),
child: AnimatedContainer(
duration: const Duration(milliseconds: 500),

21
 curve: Curves.easeInOut,
width: selectedIndex == 1 ? 212 : 159,
height: selectedIndex == 1 ? 300 : 225,
child: AnimatedSwitcher(
duration: const Duration(milliseconds: 500),
child: Image.asset(
selectedIndex == 1
? 'assets/photos/femaleGenderSelected.png'
: 'assets/photos/femaleGender.png',
key: ValueKey(selectedIndex == 1),
),
)
),
),
],
),
);
}
}

22
 10. Création de name.page.dart

Pour créer la page name.page.dart, nous suivrons une

logique similaire à celle de la première page, mais avec
une structure plus simple, car cette page ne contient que
quatre éléments principaux :

1. Barre de progression avec ClipRRect.

2. Icône pour le retour :
Icône de retour pour permettre à l’utilisateur de
revenir à la page précédente. En configurant l’icône
avec Navigator.pop(), cette action fermera la
page et renverra l’utilisateur à la page précédente.
3. Champ de texte TextField() :
Placez un champ de saisie TextField pour
permettre à l’utilisateur d’entrer son nom.
4. Bouton "Suivant".

11. Modification de l'icône de l’application

Pour modifier l'icône de votre application Flutter, suivez ces étapes :

1. Ajout de la dépendance flutter_launcher_icons :

Ouvrez le fichier pubspec.yaml et ajoutez la dépendance suivante :

dependencies:
flutter_launcher_icons: "^0.14.1"

2. Configuration des icônes :

Dans le même fichier pubspec.yaml, ajoutez le code suivant pour configurer les icônes :

flutter_launcher_icons:
android: "launcher_icon"
ios: true
image_path: "assets/photos/icon.png"

23
 min_sdk_android: 24
adaptive_icon_background: "#ffffff"
adaptive_icon_foreground: "assets/photos/icon.png"

3. Rafraîchissement du simulateur :
Si l'icône ne change pas immédiatement, essayez de fermer et de relancer le simulateur.
4. Versions antérieures de Flutter :
Si vous utilisez une version antérieure de Flutter, vous pouvez omettre les deux lignes
suivantes, car elles concernent les icônes adaptatives :

adaptive_icon_background: "#ffffff"
adaptive_icon_foreground: "assets/photos/icon.png"

24