Master : Ingénierie Techno-pédagogique

et Innovation

DÉVELOPPEMENT APPLICATIONS
MOBILE-LEARNING :
Concepts, Évolutions et Enjeux

Prof. Mohamed DAOUDI

Année universitaire : 2025/2026

Plan

01. Définition et concepts clés

02. Tendances du marché

03. Enjeux et défis

01. Définition et concepts clés
 01. Définition et concepts clés

Définition du e-learning

Plusieurs termes ont été proposés dans un contexte francophone

pour traduire le terme E-learning. Selon le domaine d’utilisation nous
pouvons trouver : formation à distance, apprentissage en ligne,
apprentissage électronique, e-formation et autres comme
traduction possible. Le E-learning désigne l'ensemble des solutions et
moyens permettant l'apprentissage par des moyens électroniques.

4
 01. Définition et concepts clés

Définition du e-learning

Rosenberg (2001) dans son livre "e-Learning: Strategies for

Delivering Knowledge in the Digital Age", définit le e-learning
comme suit :

« L'utilisation des technologies de l'information pour améliorer

la qualité de l'apprentissage en facilitant l'accès à des
ressources et des services, ainsi que des échanges et une
collaboration à distance. »

5
 01. Définition et concepts clés

E-Learning : évolution du E-learning

2020 …
2010 Incorporation
de l'IA
Début 2000 Expansion des
MOOCs
1990 Mobile
Learning
1960-1970 Avènement des
LMS et d'Internet
Origines du E-
Learning

6
 01. Définition et concepts clés

E-Learning : Du Présentiel Enrichi au Comodal

7
 01. Définition et concepts clés

Avantages et limites du e-Learning

Les principaux avantages du e-learning sont :

▪ Accessibilité et flexibilité, grâce à la disponibilité 24h/24 et 7j/7, ainsi

qu’aux modes d’apprentissage synchrones et asynchrones.

▪ Réduction des coûts de formation, notamment en diminuant le temps de

déplacement et le temps mobilisé en présentiel.

▪ Personnalisation et adaptativité, permettant d’offrir des parcours ajustés

aux besoins individuels des apprenants.

▪ Intégration des technologies avancées, telles que l’IA et le Web 4.0, qui
améliorent l’interactivité, l’analyse des performances et la qualité globale
de l’expérience d’apprentissage.

8
 01. Définition et concepts clés

Avantages et limites du e-Learning

Le e-learning présente plusieurs limites à prendre en considération :

▪ L'absence de présence physique dans une salle de classe peut entraîner
l'isolement des apprenants, réduisant ainsi l'interaction sociale.

▪ La dépendance excessive à l'égard de la technologie constitue un défi,

car elle exige des compétences informatiques que certains apprenants
ne maîtrisent pas, ce qui entraîne des problèmes techniques qui
entravent le processus d'apprentissage.

▪ L'apprentissage en ligne exige de travailler avec autonomie et

organisation personnelle, des aspects qui varient d'un individu à l'autre
et qui peuvent constituer un obstacle pour certains apprenants.

▪ Les préoccupations en matière de santé, telles que la fatigue visuelle ou

une mauvaise posture due à une utilisation prolongée de l'ordinateur.
9
 Utilisation d'internet

0
10
20
30
40
50
60
70

2015-01
2015-04
2015-07
2015-10
2016-01
2016-04
2016-07
2016-10
2017-01
Le terme M-Learning

2017-04
2017-07
2017-10
2018-01
2018-04
Desktop

2018-07
2018-10
2019-01
2019-04
2019-07
2019-10
Mobile

2020-01
2020-04
2020-07
2020-10
2021-01
Tablet

2021-04
2021-07
2021-10
01. Définition et concepts clés

Source : [Link]

2022-01
2022-04
2022-07
2022-10
2023-01
2023-04
2023-07
2023-10
2024-01
10
 01. Définition et concepts clés

Le terme M-Learning

Le M-learning, ou apprentissage mobile, est la diffusion de ressources

d'apprentissage sur des dispositifs mobiles comme les smartphones et
les tablettes. Cette technologie permet aux apprenants d'étudier
virtuellement n'importe où, n'importe quand, à condition qu'ils
possèdent un appareil mobile. L'objectif majeur du m-learning est
d'élargir les possibilités en termes de temps, de lieu, d'accessibilité et
de contexte d'apprentissage.

11
 01. Définition et concepts clés

Le terme M-Learning

L'objectif du M-Learning est d'élargir les possibilités en termes :

Temps Lieu Accessibilité Contexte

d’apprentissage

12
 01. Définition et concepts clés

Le terme M-Learning

Le m-learning est donc une forme de e-learning exploitant la force

principale des technologies mobiles (des ordinateurs portables, des
tablettes et Smartphones). Malgré le fait que le concept du m-
learning est récent, il est communément défini comme étant le
domaine qui permet d'étudier la combinaison de l'enseignement et
de l'apprentissage à travers des technologies mobiles.

13
 01. Définition et concepts clés

Le terme M-Learning

Le M-learning peut être appréhendé sous quatre perspectives distinctes :

▪ Une extension du e-Learning : développé autour de l'enseignement à

distance, l'e-learning sous-entend une séparation géo-temporelle entre
l'enseignant et l'étudiant. Le m-learning, quant à lui, représente une
synergie entre le e-learning et les technologies mobiles.

▪ Un apprentissage réalisé à l'aide d'appareils mobiles : bien que la

littérature prédomine cette définition techno-centrique, elle est considérée
correcte mais limitée, car elle ne permet que de situer l'apprentissage
mobile dans le contexte de l'apprentissage en ligne.

▪ Apprentissage fondé sur la mobilité des apprenants : en ce sens, Göth et

Schwabe ont proposé la définition suivante : « mobile learning is learning of
mobile actors. In contrast to other mobile activities (e.g., for pleasure or
work), mobile learning activities are embedded in a didactic framework ».
14
 01. Définition et concepts clés

Le terme M-Learning

E-Learning

M-Learning

MMS PC
PDA Tablet PC
SMS
laptop
smartphone

15
 01. Définition et concepts clés

Ubiquitous Learning (u-learning)

L’ubiquitous learning désigne un mode d’apprentissage rendu possible partout
et à tout moment grâce à la disponibilité permanente des technologies
mobiles, connectées et intelligentes. Ces caractéristiques essentielles sont :
▪ l’accessibilité continue : l’apprenant peut apprendre dans n’importe quel
contexte (maison, transport, campus).
▪ L’intégration dans la vie quotidienne : l’apprentissage devient un processus
fluide, non limité à une salle de classe.
▪ La contextualisation : les contenus peuvent s’adapter à l’environnement, au
moment et au profil de l’apprenant.
▪ Des technologies support : smartphones, réseaux 4G/5G, capteurs,
notifications intelligentes, IA.

16
 01. Définition et concepts clés

U-Learning vs M-Learning

▪ m-learning = apprendre avec un appareil mobile.

▪ u-learning = apprendre dans un environnement connecté,
intelligent et continu.
Le m-learning est une étape, le u-learning une évolution vers
un apprentissage totalement intégré et contextuel.

17
02. Tendances du marché
 02. Tendances du marché

Évolution

Croissance technologique du mobile

▪ L’essor du M-Learning est directement lié aux progrès rapides des
smartphones, devenus plus puissants, plus rapides et plus accessibles.

▪ L’amélioration des écrans tactiles, de la capacité de stockage et des

processeurs permet désormais d’offrir des contenus d’apprentissage riches
(vidéos, quiz, simulations).

Généralisation mondiale du smartphone

▪ La large diffusion des smartphones rend l’apprentissage mobile accessible à
des millions d’utilisateurs.

▪ Le mobile devient l’appareil principal pour accéder à Internet dans de

nombreux pays, stimulant naturellement l’adoption du M-Learning.

19
 02. Tendances du marché

Évolution

Connectivité en expansion
▪ Le déploiement massif de la 4G, de la 5G et du Wi-Fi mobile améliore
les conditions d’apprentissage en mobilité.

▪ L’accès permanent au réseau permet un apprentissage continu,

synchrone ou asynchrone.

Écosystème applicatif riche

▪ L’apparition d’applications mobiles performantes (Moodle App,
Coursera, Duolingo, Classroom…) a transformé le smartphone en
véritable environnement d’apprentissage.
▪ Les magasins d’applications (Play Store, App Store) facilitent l’accès
immédiat à des ressources pédagogiques variées.
20
 02. Tendances du marché

Quelques chiffres

▪ En 2025, environ 5,78 milliards de personnes utilisent un

smartphone dans le monde.
▪ Les smartphones représentent près de 87 % des téléphones
mobiles en circulation à l’échelle mondiale.
▪ Le marché des smartphones continue de croître : au deuxième
trimestre 2024, les ventes mondiales ont augmenté de 8 % en
glissement annuel.
▪ Les technologies mobiles (smartphones, services associés)
génèrent aujourd’hui environ 5,8 % du PIB mondial, représentant
une valeur économique ajoutée de 6,5 trillions de dollars.

21
 02. Tendances du marché

Pourquoi ces chiffres importent pour le Mobile Learning

▪ Avec près de 6 milliards d’utilisateurs de smartphone, le potentiel

d’accès à des contenus d’apprentissage mobile est extrêmement large.

▪ La domination des smartphones parmi les téléphones mobiles garantit

que le mobile est le support principal d’accès au web et aux
applications — un contexte idéal pour l’adoption du M-Learning.

▪ La croissance continue des ventes de smartphones illustre que de

nouvelles populations accèdent au mobile — ce qui élargit la base
possible d’apprenants mobiles.

▪ L’importance économique du mobile montre que le secteur est mûr pour

investir dans les applications éducatives, les plateformes et les outils
pédagogiques mobiles.

22
 02. Tendances du marché

Impact du M-Learning sur les méthodes d’enseignement

▪ Passage du cours magistral au microlearning : le M-Learning

encourage des contenus courts, modulaires et ciblés, remplaçant
progressivement les séances longues et linéaires.

▪ Enseignement plus flexible et centré apprenant : les étudiants

peuvent apprendre à leur rythme, en choisissant le moment et le lieu
d’apprentissage, ce qui favorise l’autonomie.

▪ Intégration d’activités interactives : les enseignants utilisent

davantage de quiz mobiles, vidéos courtes, discussions instantanées
et défis gamifiés pour maintenir l’attention.

▪ Suivi individualisé et adaptation : Grâce aux données d’usage

(learning analytics), les enseignants peuvent ajuster les contenus,
identifier les difficultés et personnaliser les parcours.
23
03. Enjeux et défis
 03. Enjeux et défis

Les enjeux de l'apprentissage mobile

Des travaux de recherche montrent que l'apprentissage mobile

offre des avantages considérables pour le développement de
plates-formes d'apprentissage novatrices, collaboratives et
communicantes. Toutefois, la mise en place d'une formation à
distance pour les appareils mobiles reste un défi en raison de la
complexité de la préparation d'un contenu pédagogique
adapté aux appareils mobiles, en tenant compte du contexte
technologique et socioculturel des apprenants.

25
 03. Enjeux et défis

Le défi institutionnel

Lié à l'adoption du m-learning implique de convaincre les

responsables d'une institution éducative de fournir les
ressources techniques, humaines et financières nécessaires.
Cela influencera les processus de conception pédagogique,
les méthodes de développement pour les concepteurs et les
modalités d'accès aux cours pour les étudiants. La gestion du
changement vise à modifier les attitudes et les comportements
à divers niveaux organisationnels et individuels dans le secteur
de l'éducation.

26
 03. Enjeux et défis

Le défi pédagogique

Concerne la manière dont la technologie est intégrée de

manière réfléchie dans les activités éducatives, au-delà de
son simple usage. Il est essentiel de suivre des lignes
directrices spécifiques en matière de conception et
d'adopter des approches innovantes du processus
d'apprentissage, afin de créer des modèles pédagogiques
adaptés.

27
 03. Enjeux et défis

Les défis de la conception du m-learning

Ces défis résident dans la compréhension des capacités des

appareils mobiles, qui englobent diverses fonctionnalités. Les
concepteurs doivent maîtriser la conception pédagogique,
l'interface conviviale et la répartition visuelle de l'écran.
Contrairement à l'apprentissage en ligne, l'apprentissage en ligne
doit s'adapter aux caractéristiques des appareils mobiles, telles
que la taille de l'écran et la bande passante. Une conception
efficace tient compte de la diversité des appareils et de la qualité
de l'interaction entre l'utilisateur et le système.

28
 03. Enjeux et défis

Le défi technique du m-learning

Lié aux obstacles associés à l'infrastructure, aux appareils, au

développement d'applications, à l'assistance technique, à la
sécurité et aux compétences techniques des apprenants. Ces
difficultés émanent de l'évolution rapide des technologies et
des appareils, créant des contraintes telles que la taille réduite
de l'écran, la mémoire limitée, la batterie limitée, le débit du
réseau, la sécurité et la confidentialité.

29
 03. Enjeux et défis

Défis culturels et sociaux

L'intégration du m-learning est confrontée à des défis culturels

et sociaux, tels que les interruptions fréquentes dues à l'utilisation
personnelle d'appareils mobiles. Les préoccupations éthiques et
la résistance au changement des enseignants entravent
l'adoption, en soulignant les problèmes liés à la confidentialité
et à l'augmentation de la charge de travail [93]. L'accessibilité
des appareils mobiles, avec les contraintes liées au coût et aux
changements fréquents de modèles, constitue un défi
supplémentaire.

30
Merci
 Master : Ingénierie Techno-pédagogique
et Innovation

DÉVELOPPEMENT APPLICATIONS
MOBILE-LEARNING :
Concevoir une base de données

Prof. Mohamed DAOUDI

Année universitaire : 2025/2026

Plan

01. Introduction

02. Présentation de la méthode merise

03. Du cahier des charges au MCD

04. Les entités, les attributs et le MCD

05. Les associations et les cardinalités

06. Du MCD au MLD

 01. Introduction

La conception de bases de données consiste à modéliser, organiser et

structurer les données d’un système d’information afin de garantir leur
cohérence, intégrité et accessibilité.

Elle permet de représenter les entités, relations et contraintes du

domaine réel, selon une démarche rigoureuse et progressive.

Une bonne conception vise à :

▪ éviter la redondance et les incohérences ;

▪ assurer la qualité, sécurité et pérennité des données ;

▪ faciliter les requêtes, l’analyse et l’évolution du système ;

▪ optimiser les performances et les coûts de stockage.

3
 02. Présentation de la méthode merise

MERISE : Méthode d’Étude et de Réalisation Informatique pour les

Systèmes d’Entreprise.

MERISE est une méthode d’analyse et de conception :

❑ Analyse : Étude du problème

▪ Étudier le système existant

▪ Comprendre les besoins : diagnostiquer

▪ En déduire le niveau conceptuel : donner une vision

fonctionnelle du système

❑ Conception : Étude de la solution

▪ Proposer de nouvelles solutions organisationnelles.

4
 02. Présentation de la méthode merise

La méthode Merise se caractérise par :

▪ une approche systémique en ayant une vue de l’entreprise en

termes de systèmes.

▪ une séparation des données et des traitements.

▪ une approche par niveaux.

▪ Les modèles

5
 02. Présentation de la méthode merise

L’approche systémique
Approche systémique # Approche analytique

« L’approche systémique doit permettre de dégager, à partir des

invariants, des propriétés et du comportement des systèmes
complexes, quelques règles générales destinées à mieux comprendre
ces systèmes et à agir sur eux »
▪ Approche globalisante
▪ Approche descendante qui met l’accent sur les interconnections
entre les sous-systèmes
▪ Qui va du général au particulier

L’approche systémique comporte trois étapes:

▪ l’analyse des systèmes
▪ la modélisation
▪ la simulation 6
 02. Présentation de la méthode merise

La séparation des données et des traitements

Merise procède à un traitement séparé des données et des processus, où

la vue des données est modélisée en trois étapes: de la conception à la

physique en passant par la logique. De même, la vue axée sur les

processus passe par les trois étapes conceptuelles, organisationnelle et

opérationnelle.

7
 02. Présentation de la méthode merise

Une approche par niveaux

Pour la conception d’un SI, il est nécessaire de considérer quatre

niveaux d’étude :

◦ Niveau conceptuel: ce qu’il faut faire

◦ quoi ?

◦ Niveau organisationnel: la manière de faire

◦ Qui ?, Quand ?, Combien ?, Où ?

◦ Niveau logique: choix des moyens et ressources

◦ avec quoi ? quels outils ?

◦ niveau physique: les moyens de le faire

◦ Comment ?
8
 02. Présentation de la méthode merise

Les modèles

MERISE comporte un modèle de données et modèle de traitement

pour chaque niveau.

Nous intéresserons dans ce cours aux modèles qui représentent les

données de notre système :

▪ Le modèle Conceptuel de Données (MCD)

▪ Le modèle Organisationnel de Données (MOD)

▪ Le modèle Logique de Données (MLD)

▪ Le modèle Physique de Données (MPD)

9
 03. Du cahier des charges au MCD

La transition du cahier des charges vers le Modèle Conceptuel

de Données (MCD) consiste à transformer les besoins

fonctionnels exprimés en langage naturel en une

représentation structurée des données.

Cette étape permet d’identifier les entités, attributs et

relations, en traduisant les exigences métier en une

modélisation claire, cohérente et indépendante de toute

technologie.

10
 03. Du cahier des charges au MCD

Le dictionnaire des données

Pendant la phase de conception, les données recueillies et spécifiées

sont inscrites dans un dictionnaire. Ce dictionnaire est un outil important
car il constitue la référence de toutes les études effectuées ensuite.

Les données sont présentées dans un tableau.

11
 03. Du cahier des charges au MCD

Modèle Conceptuel des Données

Le Modèle Conceptuel des Données introduit la notion d’entités, de

relations et de propriétés. Il décrit de façon formelle les données
utilisées par le système d’information par une représentation graphique
simple et accessible. Les éléments de base constituant un modèle
conceptuel des données sont :

◦ les propriétés

◦ les entités

◦ les relations

12
 04. Les entités, les attributs et le MCD

La notion d'entité
▪ Une entité permet de modéliser un ensemble d'objets concrets ou
abstraits de même nature.

▪ Une entité est caractérisée par son nom et ses propriétés.

13
 04. Les entités, les attributs et le MCD

La notion de propriété
▪ Une propriété est une donnée élémentaire d'une entité

▪ Une propriété est unique dans un MCD; et ne peut pas être

rattachée à plusieurs entités différentes.

▪ Le nom de la propriété est indiqué à l'intérieur du rectangle qui

représente l'entité correspondante.

14
 04. Les entités, les attributs et le MCD

La notion d'identifiant

▪ Permet de distinguer les différentes occurrences

▪ Composé d'une ou de plusieurs propriétés de l'entité

▪ Chaque occurrence d’une entité doit avoir une valeur

différente pour l’identifiant

▪ Le choix d'un identifiant correct est très important pour la

modélisation

15
 05. Les associations et les cardinalités

La notion de relation
▪ Décrit un lien entre deux ou plusieurs entités.

▪ Chaque relation possède un nom, généralement un verbe à l'infinitif.

▪ Elle n'a pas d'identifiant propre, elle est implicitement identifiée par
les identifiants des entités auxquelles elle est liée.

Nous distinguons deux types de relations :

▪ les relations binaires, qui sont liées à 2 entités

▪ les relations ternaires, qui sont liées à 3 entités

16
 05. Les associations et les cardinalités

Les cardinalités d'une relation

▪ Une relation est liée à chacune de ses entités par une patte.
Sur la patte, on indique les cardinalités.

▪ Les cardinalités précisent la participation de l'entité

concernée à la relation.

▪ Le premier nombre indique la cardinalité minimale, le

deuxième la cardinalité maximale.

17
 06. Du MCD au MLD

Le modèle logique des données

formalisme des tables logiques est toujours basé sur un MCD donné

Un MLD est essentiellement composé de tables logiques reliées entre elles

par des flèches.

MCD

MLD 18
 06. Du MCD au MLD

Règles de transformation du MCD au MLD

Transformation des entités

Toute entité est transformée en table. Les propriétés de l'entité

deviennent les attributs de la table. L'identifiant de l'entité devient la
clé primaire de la table.

Lettres
majuscules
Entité "Entreprise" Table "Entreprise"

Entreprise ENTREPRISE
No_Etreprise NO_ETREPRISE
Nom NOM
Adresse ADRESSE
Code_postal CODE_POSTAL
Localité LOCALITÉ

MCD MLD 19
 06. Du MCD au MLD

Règles de transformation du MCD au MLD

Transformation des relations binaires du type (x,n) – (x,1)

Afin de représenter la relation, on duplique la clé primaire de la table

basée sur l'entité à cardinalité (x,n) dans la table basée sur l'entité à
cardinalité (x,1).

Cet attribut est appelé clé étrangère.

Les deux tables sont liées par une flèche nommée selon la relation, qui
pointe de la table à clé étrangère vers la table qui contient la clé primaire
correspondante.

20
MCD MLD
 06. Du MCD au MLD

Règles de transformation du MCD au MLD

Transformation des relations binaires du type (x,1) – (x,1)

Nous devons distinguer plusieurs cas. Sachant qu'une relation binaire

du type (1,1)-(1,1) ne doit pas exister il nous reste les 2 cas suivants:

▪ Relation binaire (0,1)-(1,1)

▪ Relation binaire (0,1)-(0,1)

21
 06. Du MCD au MLD

Règles de transformation du MCD au MLD

Relation binaire (0,1)-(1,1)

On duplique la clé de la table basée sur l'entité à cardinalité (0,1) dans

la table basée sur l'entité à cardinalité (1,1).
Client
No_client Carte_Membre
Nom 0,1 Disposer 1,1 No_carte
Prenom Type_abonnement
Adresse Date_creation
Code_postal
MCD

CLIENT
CARTE_MEMBRE
NO_CLIENT
NOM Disposer NO_CARTE
PRENOM NO_CLIENT
ADRESSE TYPE_ABONNEMENT
CODE_POSTAL DATE_CREATION 22
MLD
 06. Du MCD au MLD

Règles de transformation du MCD au MLD

Relation binaire (0,1)-(0,1)

On duplique la clé d'une des tables dans l'autre. Lorsque la relation

contient elle-même des propriétés, celles-ci deviennent également
attributs de la table dans laquelle a été ajoutée la clé étrangère.

Salarié Entreprise
Directeur technique
No_Salarié 0,1 0,1 No_Etreprise
Nom Nom
Prénom Adresse_siège
MCD

SALARIÉ ENTREPRISE
ENTREPRISE SALARIÉ
NO_SALARIÉ
NO_ENTREPRISE
Directeur technique
NO_ETREPRISE ou NO_SALARIÉ Directeur technique NO_ETREPRISE
NOM
NOM NOM NOM
ADRESSE_SIÈGE
PRÉNOM ADRESSE_SIÈGE PRÉNOM
NO_SALARIÉ

MLD

23
 06. Du MCD au MLD

Règles de transformation du MCD au MLD

Transformation des relations binaires du type (x,n) – (x,n)

On crée une table supplémentaire ayant comme clé primaire une clé
composée des clés primaires des 2 tables. Lorsque la relation contient
elle-même des propriétés, celles-ci deviennent attributs de la table
supplémentaire. Une propriété de la relation qui est soulignée devra
appartenir à la clé primaire composée de la table supplémentaire.

Commande Article
Porter Code_article
No_commande 1,n 0,n
Quantité libellé
Date
Prix_unitaire
MCD
MLD

COMMANDE PORTER ARTICLE

CODE_ARTICLE CODE_ARTICLE
NO_COMMANDE
NO_COMMANDE LIBELLÉ 24
DATE
QUANTITÉ PRIX_UNITAIRE
 06. Du MCD au MLD
Règles de transformation du MCD au MLD
Transformation des relations ternaires
On crée une table supplémentaire ayant comme clé primaire une clé
composée des clés primaires de toutes les tables reliées. Cette règle
s'applique de façon indépendante des différentes cardinalités. Lorsque la
relation contient elle-même des propriétés, celles-ci deviennent attributs
de la table supplémentaire. Une propriété de la relation qui est soulignée
devra appartenir à la clé primaire composée de la table supplémentaire.
Enseignant
Matière
No_enseignant Enseigner
0,n 0,n
Nom Code_Matière
Prénom libellé
Date_de_naissance 1,n
ENSEIGNANT
Classe ENSEIGNER
MATIÈRE
NO_ENSEIGNANT
Nom_classe NO_ENSEIGNANTC
NOM CODE_MATIÈRE
Cycle CODE_MATIÈRE
MCD PRÉNOM LIBELLÉ
NOM_CLASSE
DATE_DE_NAISSANCE

CLASSE
NOM_CLASSE
MLD CYCLE

25
 06. Du MCD au MLD

Règles de transformation du MCD au MLD

Transformation de plusieurs relations entre 2 entités
Les règles générales s’appliquent

posséder
Personne Maison
No_Personne habiter
0,n 1,n Adresse
Adresse
Personne Maison Code_Postal
Nom
Localité
No_Personne Prénom
Adresse
Nom Code_Postal Posséder
Prénom Localité
1,1 1,n
No_Personne
habiter Adresse
MCD MLD

26
 06. Du MCD au MLD

Règles de transformation du MCD au MLD

Transformation des relations réflexives

Nous appliquons les règles générales avec la seule différence que la

relation est 2 fois reliée à la même entité

Filiale
0,n
mère
DÉTENIR
Société SOCIÉTÉ
NO_SOCIÉTÉ
No_Société Détenir NO_SOCIÉTÉ
Pourcentage_du_capital
NO_SOCIÉTÉ_MÈRE
Nom NOM
POURCENTAGE_DU_CAPITAL
Capital CAPITAL
0,n
filiale MLD
MCD Mère

27
 06. Du MCD au MLD

Règles de transformation du MCD au MLD

Transformation des relations réflexives

Nous appliquons les règles générales avec la seule différence que la

relation est 2 fois reliée à la même entité

0,1 ÊTRE_MARIÉ
mari

Personne PERSONNE

No_Matricule Être_marié NO_MATRICULE

Nom NO_MATRICULE_ÉPOUSE

Prénom NOM
0,1 PRÉNOM
épouse MLD
MCD

28
 06. Du MCD au MLD

Travaux Pratiques
▪ Télécharger MySQL Workbench ➔
[Link]
▪ Télécharger MySQL ou utiliser une installation existante (Xampp, Wamp, etc)

▪ Modélisez le projet qui vous a été attribué en élaborant un Modèle Conceptuel

de Données (MCD) puis le Modèle Logique de Données (MLD) correspondant.
▪ Réaliser le Modèle Physique de Données (MPD) à l’aide de MySQL Workbench.
▪ Créer votre base de données dans MySQL.

▪ Déposez le fichier .mwb modélisé avec MySQL Workbench, ainsi que le fichier
.sql généré lors de l’opération de Forward Engineering, comme livrables du
premier devoir sur l’espace Classroom.

29
Merci
 Master : Ingénierie Techno-pédagogique
et Innovation

DÉVELOPPEMENT APPLICATIONS
MOBILE-LEARNING :
Introduction au langage Dart

Prof. Mohamed DAOUDI

Année universitaire : 2025/2026

Plan
01. Introduction

02. Syntaxe de base

03. 03. Collections en Dart : List, Set, Map

04. Les structures conditionnelles

05. Les structures répétitives (Boucles)

06. Les Fonctions

07. Gestion des erreurs : try / catch / finally

08. La programmation asynchrone

 01. Introduction

Dart est un langage de programmation moderne créé par

Google pour développer des applications rapides et fluides. Il est
conçu pour être simple à apprendre et idéal pour construire des
interfaces utilisateur de haute qualité.

Dart est un langage orienté objet qui permet de créer des

applications mobiles, web et desktop. Il peut être exécuté
directement, compilé en code machine ou transformé en
JavaScript pour le web.

Dart a été créé par Google en 2011. Google continue de le

développer car il joue un rôle essentiel dans son écosystème,
surtout grâce à Flutter.

3
 01. Introduction
Pourquoi utiliser le langage Dart ? reload très rapide.

1. Développement multiplateforme 3. Syntaxe simple et moderne

Dart est le langage principal de Flutter, ▪ Syntaxe claire, proche de Java,

ce qui permet de créer une seule base JavaScript et C#.
de code pour : ▪ Facile à apprendre, surtout pour les
▪ Android débutants.

▪ iOS ▪ Supporte la programmation orientée

objet et fonctionnelle.
▪ Web
▪ Desktop (Windows, macOS, Linux) 4. Productivité élevée
▪ Hot Reload : voir les changements
2. Excellentes performances
instantanément sans redémarrer
▪ Dart est compilé en code natif (AOT) l’application.
pour les applications mobiles, ce qui
▪ Outils intégrés puissants (Dart
offre de très bonnes performances.
DevTools).
▪ En mode développement, il utilise la
compilation JIT, permettant un hot
4
 01. Introduction

Pourquoi utiliser le langage Dart ?

5. Typage sûr
▪ Langage fortement typé avec un système de types moderne (null safety).
▪ Réduction des erreurs à l’exécution.

6. Polyvalence

Dart peut être utilisé pour :

▪ Applications mobiles (Flutter)
▪ Applications web
▪ Applications serveur
▪ Scripts
▪ Etc.

7. Soutenu par Google

▪ Développé et maintenu par Google.
▪ Large communauté et écosystème en croissance.
5
 01. Introduction

Domaines d’utilisation du langage Dart

Dart est utilisé :

▪ dans Flutter pour créer des apps Android, iOS, web et desktop

▪ dans le web (compilé en JavaScript)

▪ dans les applications desktop

▪ sur les serveurs pour créer des API

6
 01. Introduction

L’environnement Dart

Pour programmer en Dart, il faut comprendre l’environnement, c’est-

à-dire tout ce qui permet :

▪ d’écrire du code Dart
▪ de l’exécuter
▪ de le compiler
▪ de tester rapidement

Cet environnement repose principalement sur le Dart SDK.

7
 01. Introduction

Le Dart SDK

SDK = Software Development Kit

Un ensemble d’outils nécessaires pour exécuter et compiler du code.
Le SDK, c’est comme une boîte à outils pour un mécanicien :
▪ clé, tournevis, lampes…
▪ Sans la boîte → impossible de travailler.

Que contient le Dart SDK ?

▪ Le compilateur Dart
▪ L’outil en ligne de commande dart
▪ Le runtime (pour exécuter du code)
▪ Les bibliothèques de base (core libraries)
▪ Les outils de build & analyse (dart analyze, dart format, etc.)
8
 01. Introduction

DartPad — L’éditeur en ligne

DartPad est un éditeur gratuit, en ligne, pour tester du code Dart
sans installation. [Link]

Avantages:
▪ Pas besoin d’installer Dart
▪ Tester directement dans le navigateur
▪ Supporte :
◦ le Dart simple
◦ Flutter (dans le navigateur)
▪ Idéal pour l’apprentissage en classe
▪ Prend en charge l’auto-complétion et les erreurs

9
 02. Syntaxe de base

La syntaxe de Dart est conçue pour être facile à lire et à écrire,

surtout pour les développeurs ayant déjà utilisé des langages
comme Java, JavaScript ou C#.

▪ Utilise des accolades {} pour structurer le code

▪ Instructions terminées par un point-virgule ;

▪ Supporte la programmation orientée objet (classes, objets,

héritage)
▪ Intègre des fonctionnalités modernes :

o typage optionnel

o null safety

o fonctions anonymes (lambda)

Cette familiarité permet une prise en main rapide, même pour

les débutants.
10
 02. Syntaxe de base

Les variables

Une variable = boîte dans la mémoire de l'ordinateur.

▪ Elle contient une valeur (nombre, texte, vrai/faux...)

▪ On peut lire cette valeur, la modifier, ou l'utiliser dans des calculs

En Dart, on écrit en général :

type nomDeLaVariable = valeur;

Exemples:

int scoreQuiz = 20;

String nomApprenant = "Yassine";
bool estConnecte = true; // l'apprenant est connecté 11
 02. Syntaxe de base
Les variables
2. Règles pour nommer une variable
▪ Doit commencer par une lettre ou _ (pas de chiffre au début)

▪ Pas d'espace, pas de caractères spéciaux : -, !, ?...

▪ Utiliser le camelCase en Dart : nombreEtudiants, prixTotal

// Bons exemples :
int nombreApprenants = 30;
double prixCours = 99.9;
String nomApprenant = "Ali";

// **Mauvais exemples :**

int 2score = 20; // commence par un chiffre
interdit
double prix-cours; // tiret interdit
String nom apprenant = "Sara"; // espace interdit

12
 02. Syntaxe de base

Les variables
3. Table des types principaux

Type Description

int Représente un nombre entier.

double Représente un nombre décimal.

num Peut contenir un int ou un double.

String Représente du texte (chaînes de caractères).

bool Valeur logique : true ou false.

var Type déduit automatiquement par Dart.

dynamic Type flexible qui peut changer durant l’exécution.

List Collection ordonnée d’éléments.

Set Collection sans doublons.

13
Map Collection de paires clé → valeur.
 02. Syntaxe de base

Les variables
4. Déclarer une variable :
4.1. int : nombres entiers

int scoreQuiz = 21;

int nombreDeModules = 150;
print(scoreQuiz); // 21
print(nombreDeModules); // 150

4.2. double : nombres décimaux

double scoreQuiz = 36.5;

double progressionCours = 19.99;
print(scoreQuiz); // 36.5
print(progressionCours); // 19.99 14
 02. Syntaxe de base

Les variables
4. Déclarer une variable :
4.3. String : texte
Le texte est entre guillemets " " ou ' '.

String nomApprenant = "Yassine";

String message = 'Bienvenue dans le module Flutter';
print(nomApprenant); // Yassine
print(message); // Bienvenue dans le module Flutter

15
 02. Syntaxe de base
Les variables
4. Déclarer une variable :
4.3. String : texte
Concaténation vs Interpolation en Dart
Lorsque tu veux afficher du texte + des variables, Dart te propose deux façons :
➢ Concaténation :
C’est le fait de coller des textes ensemble en utilisant l’opérateur +.

String nomApprenant = "Ali";

int scoreQuiz = 22;
print("L'apprenant "+ nomApprenant +" a un score de " + [Link]() + ".");

Pourquoi [Link]() :: Parce que age est un int(nombre), et Dart ne peut

pas coller un texte "..." avec un nombre directement. Il faut donc convertir en
texte → .toString() 16
 02. Syntaxe de base
Les variables
4. Déclarer une variable :
4.3. String : texte
Concaténation vs Interpolation en Dart
➢ Interpolation (plus pratique):

L’interpolation permet d’insérer directement la valeur d'une variable dans

la chaîne de caractères.
▪ On utilise le symbole $variable
▪ Ou ${expression} pour les calculs ou les opérations complexes.

String nomApprenant = "Ali";

int scoreQuiz = 22;
print("L'apprenant $nomApprenant a un score de $scoreQuiz.");

int quiz1 = 5;
int quiz2 = 3;
print("Le score total des deux quiz est ${quiz1 + quiz2}."); 17
 02. Syntaxe de base
Les variables
4. Déclarer une variable :
4.4. bool → vrai / faux

bool aTerminéQuiz = true;

bool aObtenuBadge = false;
print(aTerminéQuiz); // true
print(aObtenuBadge); // false

On l’utilise souvent dans des conditions :

if (aTerminéQuiz) {
print("Badge débloqué ");
} else {
print("Pas encore de badge.");
} 18
 02. Syntaxe de base
Les variables
5. Conversions de types en Dart

Méthode Utilisation

Convertit une valeur (int, double, bool, etc.) en texte

toString()
(String). example [Link]().

Convertit un String qui contient un entier en int (erreur si

[Link](text)
invalide). example [Link]("20")

Convertit un (int, string) qui contient un nombre décimal

[Link](text)
en double. example [Link]("20.50")

19
 02. Syntaxe de base
Les Opérateurs
Les opérateurs permettent de manipuler des valeurs, comparer des données,
effectuer des calculs, et contrôler le comportement du programme.

1. Les opérateurs arithmétiques

Ils servent à faire des calculs mathématiques.

Opérateur Utilisation Exemple Résultat

+ Addition 5+3 8
- Soustraction 10 - 4 6
* Multiplication 4*2 8
/ Division 9/2 4.5
~/ Division entière 9 ~/ 2 4
% Modulo (reste) 10 % 3 1

20
 02. Syntaxe de base

Les Opérateurs

2. Les opérateurs de comparaison

Ils permettent de comparer deux valeurs. Le résultat est toujours true ou false.

Opérateur Signification Exemple Résultat

== égal à 5 == 5 true
!= différent de 5 != 3 true
> supérieur à 7>4 true
< inférieur à 2<9 true
>= supérieur ou égal 5 >= 5 true
<= inférieur ou égal 3 <= 1 false

21
 02. Syntaxe de base
Les Opérateurs
3. Les opérateurs logiques

Ils permettent de combiner des conditions.

Opérateur Nom Description

&& ET Vrai si toutes les conditions sont vraies
II OU Vrai si au moins une des conditions est vraie
! NON Inverse la condition

Exemple :

bool connecté = true;

int scoreQuiz = 20;
if (connecté && scoreQuiz >= 15) {
print("Cours débloqué");
}
22
 02. Syntaxe de base
Les Opérateurs
4. Les opérateurs d'affectation

Ils servent à donner une valeur à une variable.

Opérateur Exemple Explication

= x=5 affecte 5 à x

+= x += 3 x=x+3

-= x -= 2 x=x-2

*= x *= 2 x=x*2

/= x /= 2 x=x/2

23
 02. Syntaxe de base
Les Opérateurs
5. Les opérateurs d'incrémentation / décrémentation

Opérateur Signification

x++ augmente de 1 après utilisation

++x augmente de 1 avant utilisation

x-- diminue de 1 après utilisation

--x diminue de 1 avant utilisation

24
 02. Syntaxe de base
Les Opérateurs
5. Les opérateurs d'incrémentation / décrémentation

void main() {
int x;
// x++
x = 5;
print(x++); // 5 (utilisé puis augmenté)
print(x); // 6
// ++x
x = 5;
print(++x); // 6 (augmenté puis utilisé)
print(x); // 6
// x--
x = 5;
print(x--); // 5 (utilisé puis diminué)
print(x); // 4
// --x
x = 5;
print(--x); // 4 (diminué puis utilisé)
print(x); // 4
} 25
 02. Syntaxe de base
Méthodes les plus utilisées avec String en Dart
Méthode Ce qu’elle fait Exemple
length Donne le nombre de caractères. "Hello".length → 5
isEmpty true si la chaîne est vide. "".isEmpty → true
isNotEmpty true si la chaîne n’est pas vide. "Hi".isNotEmpty → true
toUpperCase() Met tout le texte en MAJUSCULES. "hello".toUpperCase() → "HELLO"
toLowerCase() Met tout le texte en minuscules. "BONJOUR".toLowerCase() → "bonjour"
trim() Enlève les espaces au début et à la fin. " hi ".trim() → "hi"
trimLeft() Enlève les espaces au début. " hi".trimLeft() → "hi"
trimRight() Enlève les espaces à la fin. "hi ".trimRight() → "hi"
contains("x") Vérifie si un texte est présent. "Hello".contains("ell") → true
startsWith("x") Vérifie si la chaîne commence par ce texte. "Bonjour".startsWith("Bon") → true
endsWith("x") Vérifie si la chaîne finit par ce texte. "[Link]".endsWith(".png") → true
substring(a, b) Récupère une partie du texte (de a à b exclu). "Bonjour".substring(0, 3) → "Bon"
indexOf("x") Donne la position de la première occurrence. "salut salut".indexOf("lut") → 2
lastIndexOf("x") Position de la dernière occurrence. "salut salut".lastIndexOf("lut") → 8
replaceAll("a", "b") Remplace tout a par b. "ha ha".replaceAll("ha", "hi") → "hi hi"
split("x") Coupe en liste selon un séparateur. "a,b,c".split(",") → ["a","b","c"]

26
 02. Syntaxe de base
Les Commentaires en Dart

Un commentaire est du texte que Dart ignore complètement lors de

l'exécution. Il sert uniquement à expliquer le code.

Types de commentaires en Dart

▪ Commentaire sur une ligne - //

int scoreQuiz = 20; // score initial de l'apprenant

print(scoreQuiz); // afficher le score

▪ Commentaire sur plusieurs lignes - /* ... */

/*
Ceci est un commentaire sur
le score initial d'un apprenant.
*/
int score = 10; 27
 02. Syntaxe de base
Les Commentaires en Dart
Types de commentaires en Dart
▪ Documentation - ///

/// Calcule le score total d'un apprenant sur deux quiz.

/// [quiz1] : score du premier quiz
/// [quiz2] : score du deuxième quiz
int scoreTotal(int quiz1, int quiz2) {
return quiz1 + quiz2;
}

Tableau récapitulatif
Type Syntaxe Usage Exemple

Commentaire court // noter une idée, expliquer une ligne int age = 20; // l'âge

Commentaire long /* ... */ expliquer un bloc /* Ceci explique le code */

Documentation /// expliquer une fonction ou classe /// additionne deux nombres

28
 03. Collections en Dart : List, Set, Map

1. List - Liste ordonnée

Une List est une structure de données qui permet de stocker plusieurs
éléments dans une seule variable.

Ces éléments sont ordonnés, c’est-à-dire qu’ils conservent l’ordre dans

lequel ils ont été ajoutés.

Chaque élément d’une List est associé à une position appelée index :

▪ L’index commence toujours à 0

▪ Le deuxième élément a l’index 1, le troisième 2, etc.

Caractéristiques principales

▪ Une List peut contenir des éléments du même type (recommandé)

▪ La taille peut être fixe ou dynamique

▪ On accède aux éléments grâce à leur index

29
 03. Collections en Dart : List, Set, Map
1. List - Liste ordonnée
Opérations courantes sur List
Action Fonction Exemple Résultat
["Pomme","Banane","
Ajouter à la fin add(item) [Link]("Kiwi")
Orange","Kiwi"]
Ajouter plusieurs addAll([...]) [Link](["Mangue","Poire"]) ajoute plusieurs
place "Fraise" en
Insérer à une position insert(index, item) [Link](1, "Fraise")
index 1
Modifier un élément list[index] = valeur fruits[0] = "Ananas" remplace "Pomme"
supprime la 1re
Supprimer par valeur remove(item) [Link]("Banane")
occurrence
supprime l'élément
Supprimer par index removeAt(index) [Link](1)
index 1
Rechercher un élément contains(item) [Link]("Orange") true/false

Trouver un index indexOf(item) [Link]("Orange") renvoie 2

Compter les éléments length [Link] nombre d'éléments

Vider la liste clear() [Link]() []

30
 03. Collections en Dart : List, Set, Map
1. List - Liste ordonnée
Exemple

void main() {
// Liste des cours suivis par l'apprenant
List<String> cours = ["Dart", "Flutter", "UI Design"];
// Affichage du premier cours
print(cours[0]); // Dart
// Affichage du nombre total de cours
print("Nombre de cours suivis : ${[Link]}"); // 3
// Ajout d'un nouveau cours
[Link]("Firebase");
print("Cours après ajout : $cours");
// Vérification si un cours spécifique est suivi
// true
print("L'apprenant suit-il 'Flutter' ? ${[Link]("Flutter")}");
}

31
 03. Collections en Dart : List, Set, Map
2. Set - Collection sans doublons

Un Set est une collection d’éléments non ordonnée, ce qui signifie que les
éléments n’ont pas de position fixe (pas d’index comme dans une List).

Une caractéristique essentielle d’un Set est qu’il n’accepte pas les doublons
: chaque valeur ne peut apparaître qu’une seule fois dans la collection.

Caractéristiques principales

▪ Collection non ordonnée

▪ Aucun index pour accéder aux éléments

▪ Éléments uniques (pas de répétition)

▪ Utile pour éliminer les doublons ou vérifier l’existence d’une valeur

32
 03. Collections en Dart : List, Set, Map
2. Set - Collection sans doublons

Fonctions utiles pour Set

Action Fonction Exemple Résultat
Ajouter un élément add(item) [Link](4) {1,2,3,4}

Ajouter plusieurs addAll({...}) [Link]({5,6}) ajoute sans doublons

Supprimer une
remove(item) [Link](2) supprime 2
valeur

Vider le Set clear() [Link]() {}

Vérifier présence contains(item) [Link](3) true/false

Compter éléments length [Link] taille du set

renvoie les éléments

Intersection [Link](set2)
communs

fusionne sans
Union [Link](set2)
doublons

33
 03. Collections en Dart : List, Set, Map
2. Set - Collection sans doublons
Exemple

void main() {
Set<String> badges = {"Débutant", "Intermédiaire"};

[Link]("Débutant"); // ignoré (doublon)

[Link]("Avancé");

print(badges); // {Débutant, Intermédiaire, Avancé}

}

34
 03. Collections en Dart : List, Set, Map

3. Map - Dictionnaire clé → valeur

Une Map est une collection qui stocke les données sous forme de paires clé
→ valeur.

Chaque clé est associée à une seule valeur et doit être unique dans la Map.

Contrairement aux List, l’accès aux données ne se fait pas par un index, mais
par la clé.

Caractéristiques principales

▪ Données organisées en clé → valeur

▪ Clés uniques (pas de duplication possible)

▪ Accès rapide aux valeurs grâce aux clés

▪ Les clés et les valeurs peuvent être de types différents

35
 03. Collections en Dart : List, Set, Map
3. Map - Dictionnaire clé → valeur
Opérations Map
Action Fonction Exemple Résultat

Lire une valeur map[clé] etudiant["nom"] "Sara"

Ajouter ou
map[clé] = valeur etudiant["age"] = "21" ajoute/maj
modifier

Ajouter plusieurs addAll({...}) [Link]({"note": "18"}) ajoute

Supprimer par clé remove(clé) [Link]("ville") enlève ville

Vérifier une clé containsKey(key) [Link]("nom") true

Vérifier une valeur containsValue(val) [Link]("Sara") true

Liste des clés keys [Link] renvoie toutes les clés

Liste des valeurs values [Link] renvoie toutes les valeurs

Vider la Map clear() [Link]() {}

Taille length [Link] nombre d'entrées

36
 03. Collections en Dart : List, Set, Map
3. Map - Dictionnaire clé → valeur
Exemple

void main() {
Map<String, dynamic> apprenant = {
"nom": "Sara",
"scoreQuiz": 20,
"module": "Flutter"
};
print(apprenant["nom"]); // Sara
apprenant["scoreQuiz"] = 21; // mise à jour du score
[Link]({"badge": "Débutant"});
[Link]("module");
print(apprenant); // {nom: Sara, scoreQuiz: 21, badge: Débutant}
print([Link]("nom")); // true
print([Link](21)); // true
print([Link]); // 3
} 37
 04. Les structures conditionnelles
Les conditions permettent à un programme de prendre des décisions.
Les conditions servent à :

▪ exécuter un bloc de code si une situation est vraie

▪ choisir entre plusieurs possibilités
▪ vérifier des données avant de continuer
▪ contrôler le comportement d'un programme

Structure générale d'une condition

if (condition) {
// instructions si la condition est vraie
} else if (autreCondition) {
// instructions si la première est fausse, mais celle-ci vraie
} else {
// instructions si aucune condition n'est vraie
} 38
 04. Les structures conditionnelles
Exemple simple:

int scoreQuiz = 20;

if (scoreQuiz >= 15) {
print("Quiz réussi.");
} else {
print("Quiz échoué.");
}
// Résultat: Quiz réussi.

Exemple avec else if:

int scoreQuiz = 14;

if (scoreQuiz >= 16) {
print("Excellent travail !");
} else if (scoreQuiz >= 14) {
print("Cours validé.");
} else if (scoreQuiz >= 10) {
print("Cours partiellement validé.");
} else {
print("Cours non validé.");
} // Résultat : Cours validé. 39
 04. Les structures conditionnelles

Conditions avec opérateurs logiques

// Exemple 1 : ET &&
int scoreQuiz = 19;
bool abonnementActif = true;
if (scoreQuiz >= 15 && abonnementActif == true) {
print("Accès au cours autorisé.");
}
// Exemple 2 : OU||
String langue = "Français";
if (langue == "Français" || langue == "Arabe") {
print("Contenu disponible.");
}
//Exemple 2 : NON!
bool estConnecte = false;
if (!estConnecte) {
print("Veuillez vous connecter.");
} 40
 04. Les structures conditionnelles

Condition ternaire (forme courte)

Pour les petites conditions, on peut utiliser l'opérateur ternaire :

condition ? valeurSiVrai : valeurSiFaux;

Exemple :

int scoreQuiz = 17;

String message = (scoreQuiz >= 15) ? "Quiz validé" : "Quiz non validé";
print(message); // Quiz validé

41
 04. Les structures conditionnelles

L'instruction switch
Utilisée lorsqu’une variable peut avoir plusieurs valeurs possibles.

String module = "Quiz 2";

switch (module) {
case "Module 1":
print("Introduction au cours");
break;
case "Quiz 2":
print("Évaluation intermédiaire");
break;
case "Module 3":
print("Contenu avancé");
break;
default:
print("Autre contenu");
}

// Résultat : Évaluation intermédiaire

// Chaque `case` se termine par break
// pour éviter d'exécuter le reste des cases. 42
 05. Les structures répétitives (Boucles)

Une boucle est une structure de contrôle qui permet de répéter

automatiquement l’exécution d’un bloc de code tant qu’une condition
donnée est respectée ou pendant un nombre précis de fois.

Au lieu d’écrire plusieurs fois la même instruction, les boucles

permettent de réduire le code, de le rendre plus lisible et plus efficace.

En langage Dart, les boucles sont très utilisées pour :

▪ parcourir des collections (List, Set, Map),

▪ répéter une action un certain nombre de fois,

▪ exécuter du code jusqu’à ce qu’une condition devienne fausse.

43
 05. Les structures répétitives (Boucles)

// Sans boucle : affichage manuel des leçons

print("Leçon 1");
print("Leçon 2");
print("Leçon 3");

// Avec boucle : affichage automatique des leçons

for (int i = 1; i <= 3; i++) {
print("Leçon $i");
}

44
 05. Les structures répétitives (Boucles)

1. La boucle for - Répéter un nombre précis de fois

Une boucle for en Dart est une structure qui permet de répéter un bloc
d’instructions un certain nombre de fois, en utilisant un compteur.

Structure :

for (initialisation ; condition ; modification) {

// code répété
}

Exemple
▪ int i = 1; → Je commence à 1
▪ i <= 5; → Je continue tant que i ≤ 5

for (int i = 1; i <= 5; i++) { ▪ i++ → À chaque tour, j'ajoute 1

print(i);
} 45
 05. Les structures répétitives (Boucles)

2. La boucle for-in - Parcourir une liste

La boucle for in sert à parcourir directement les éléments d’une collection

(comme une List, un Set ou un Map), sans utiliser d’indice.

List<String> lecons = ["Introduction", "Variables", "Boucles"];

for (var lecon in lecons) {
print(lecon);
}
// Résultat :
// Introduction
// Variables
// Boucles

46
 05. Les structures répétitives (Boucles)
3. La boucle while - Répéter tant qu'une condition est vraie
On peut expliquer une boucle while avec une phrase facile à retenir : « Tant
que j’ai faim, je mange. »
Ici, la condition « j’ai faim » est vérifiée avant chaque action. Si elle est vraie,
l’action se répète ; si elle devient fausse, la boucle s’arrête.

int lecon = 1;
while (lecon <= 10) { // tant que leçon est inférieure ou égale à 10
print("Leçon $lecon"); // affiche le nom de la leçon
lecon++; // passe à la leçon suivante pour éviter une boucle infinie
}
▪ La condition i <= 10 est testée avant chaque tour.
▪ Si la condition est vraie, le bloc de code s’exécute.
▪ i++ sert à modifier la variable pour que la boucle puisse s’arrêter à un moment donné.
▪ Si la condition devient fausse, la boucle s’arrête automatiquement. 47
 05. Les structures répétitives (Boucles)
4. La boucle do-while – Exécuter au moins une fois

La boucle do-while permet d’exécuter un bloc de code au moins une fois,

même si la condition est fausse dès le départ. L’idée est simple : « Tu goûtes
toujours la soupe au moins une fois, puis tu décides si tu en reprends. »

Contrairement à la boucle while, la condition est testée après l’exécution

du code. C’est pour cela que le code s’exécute au minimum une fois.

int quiz = 1;
do {
print("Quiz $quiz"); // le code s’exécute au moins une fois
quiz++;
} while (quiz <= 10);
▪ i devient quiz pour représenter les quiz d’un cours
▪ La boucle do…while garantit l’affichage d’au moins
un quiz, même si la condition est fausse dès le départ.
48
 05. Les structures répétitives (Boucles)

5. break et continue

Pour contrôler une boucle, on modifie leur comportement normal pendant leur
exécution à l’aide des deux instructions break et continue.

▪ break – Arrêter complètement la boucle

L’instruction break permet de sortir immédiatement de la boucle, même si la

condition est encore vraie. L’idée est : « Tu cherches un objet dans une pile.
Quand tu l’as trouvé, tu t’arrêtes immédiatement. »

▪ continue – Sauter une étape

L’instruction continue permet de sauter l’itération en cours et de passer

directement à la suivante. L’idée est : « Tu corriges 10 copies. Si une copie est
vide, tu la passes et tu continues avec la suivante. »

À retenir
▪ continue → sauter une itération de la boucle
49
▪ break → arrêter complètement la boucle
 05. Les structures répétitives (Boucles)

5. break et continue

for (int i = 1; i <= 10; i++) {

if (i == 3) {
continue; // quiz non soumis → on passe au suivant
}
if (i == 7) {
break; // problème détecté → on arrête la correction
}
print("Correction du quiz $i");
}
▪ La boucle représente la correction des quiz des apprenants
▪ continue permet d’ignorer un quiz non soumis
▪ break arrête la correction en cas de problème
▪ Exemple typique dans une application de mobile learning 50
 06. Les Fonctions

Les fonctions sont un élément fondamental en programmation. Elles

permettent de découper un programme en petites parties faciles à
comprendre et à réutiliser. Grâce aux fonctions, le code devient plus
clair, plus organisé et plus professionnel.

Les fonctions évitent la répétition de code. Elles permettent aussi de

regrouper des instructions qui réalisent une tâche précise. Ainsi, lorsque
vous voulez répéter cette tâche, il suffit d’appeler la fonction.

51
 06. Les Fonctions

Structure d'une fonction

Une fonction suit une structure simple et bien définie.
Elle commence par le type de valeur qu’elle retourne, suivi du nom de la
fonction, des paramètres éventuels, puis du bloc d’instructions qui contient
le code à exécuter.
Syntaxe générale

typeRetour nomDeLaFonction(parametres) {
// instructions
return valeur;
} ▪ typeRetour : le type de la valeur retournée par la fonction (int, double,
String, bool, void, etc.).
▪ nomDeLaFonction : identifie la fonction (doit être explicite et clair).
▪ parametres : données passées à la fonction (optionnels).
▪ Bloc d’instructions : contient les actions réalisées par la fonction.
▪ return : renvoie une valeur correspondant au type de retour. 52
 06. Les Fonctions
Exemple

// Déclaration de la fonction
int calculerScoreQuiz(int quiz1, int quiz2) {
int resultat = quiz1 + quiz2; // calcul du score
return resultat; // valeur retournée
}
void main() {
// Appel de la fonction
int score = calculerScoreQuiz(5, 3);
print("Le score total du quiz est : $score");
}
▪ La fonction calcule le score total d’un apprenant
▪ Les paramètres représentent les résultats de deux quiz
▪ Exemple simple et cohérent avec le mobile learning

53
 06. Les Fonctions

Paramètres optionnels en Dart

Il est possible de définir des paramètres non obligatoires, appelés
paramètres optionnels. Ils sont placés entre crochets [] dans la définition
de la fonction.

L’utilisateur appelle la fonction avec ou sans ces paramètres, selon ses

besoins.

Syntaxe générale

typeRetour nomDeLaFonction(paramObligatoire, [paramOptionnel]) {

// instructions
}

54
 06. Les Fonctions

Paramètres optionnels en Dart

Exemple:

// [nomApprenant] : nom de l'étudiant & // [message] : message optionnel

void saluerApprenant(String nomApprenant, [String message]) {
if (message != null) {
print("$message $nomApprenant"); // affiche le message personnalisé
} else {
print("Bienvenue $nomApprenant"); // message par défaut
}
}
// Appels de la fonction
saluerApprenant("Ali"); // utilise le message par défaut
saluerApprenant("Ali", "Félicitations"); // message personnalisé

▪ Fonction adaptée au mobile learning

▪ Paramètre optionnel pour personnaliser le message à l’apprenant
▪ Les commentaires aident à comprendre chaque étape. 55
 06. Les Fonctions

Paramètres nommés
En Dart, les paramètres nommés permettent de rendre l’appel d’une
fonction plus lisible, surtout lorsqu’il y a plusieurs arguments.

Ils sont définis entre accolades {} dans la déclaration de la fonction.

L’avantage est que l’ordre des paramètres n’a plus d’importance lors de
l’appel.

Syntaxe générale

typeRetour nomDeLaFonction({type param1, type param2, ...}) {

// instructions
}

56
 06. Les Fonctions

Paramètres nommés
Exemple:

// Fonction pour afficher les informations d'un apprenant

// Les paramètres nom et score sont nommés et optionnels
void afficherInfo({String nom, int scoreQuiz}) {
print("Nom : $nom, Score du quiz : $scoreQuiz");
}

// Appels de la fonction
afficherInfo(nom: "Ali", scoreQuiz: 25);
// ordre inversé possible grâce aux paramètres nommés
afficherInfo(scoreQuiz: 30, nom: "Sara");

•age devient scoreQuiz pour refléter le score d’un apprenant

•Les paramètres nommés permettent de changer l’ordre lors de l’appel
•La fonction est adaptée à un contexte mobile learning
57
 06. Les Fonctions
Fonctions fléchées (Arrow Functions)
Lorsque la fonction contient une seule instruction, Dart permet d’écrire
une version plus courte et lisible, appelée fonction fléchée.
La syntaxe utilise => à la place des accolades {} et du mot-clé return.
Syntaxe générale

typeRetour nomDeLaFonction(parametres) => expression;

Exemple:

// Fonction pour calculer le carré du score d'un quiz

int scoreAuCarré(int scoreQuiz) => scoreQuiz * scoreQuiz;
void main() {
print(scoreAuCarré(5)); // Affiche : 25
}
▪ n devient scoreQuiz pour représenter le score d’un apprenant
▪ La fonction calcule le carré du score, utile par exemple pour des
58
calculs statistiques dans une application de mobile learning
 06. Les Fonctions
Fonctions comme variables
En Dart, les fonctions sont des valeurs. Cela signifie qu’on peut :
▪ Les stocker dans des variables
▪ Les passer en paramètres à d’autres fonctions
▪ Les retourner depuis une fonction
Cela rend le code plus flexible et permet de créer des programmes
modulaires et dynamiques.
▪ Stocker une fonction dans une variable

// Fonction pour calculer le score total de deux quiz

int totalScore(int quiz1, int quiz2) => quiz1 + quiz2;
void main() {
// On stocke la fonction dans une variable
var calcul = totalScore;
print(calcul(5, 3)); // Affiche : 8
} 59
 06. Les Fonctions
Fonctions comme variables
▪ Passer une fonction en paramètre

// Fonction pour afficher le résultat d'une opération sur les scores de quiz
void afficherResultat(int Function(int, int) operation, int quiz1, int quiz2) {
print("Résultat du score total : ${operation(quiz1, quiz2)}");
}
// Fonction pour calculer le score total de deux quiz
int totalScore(int a, int b) => a + b;
void main() {
afficherResultat(totalScore, 10, 4); // Affiche : Résultat du score total : 14
}
▪ operation reste un paramètre fonctionnel, appliqué aux scores de quiz
▪ a et b deviennent quiz1 et quiz2 pour refléter les scores d’un apprenant
▪ Illustratif pour montrer comment passer des fonctions comme
arguments dans le contexte du mobile learning
60
 07. Gestion des erreurs : try / catch / finally

Dans un programme, certaines instructions peuvent provoquer des erreurs.

Une erreur non gérée → l’application crashe.

La solution : entourer le code fragile avec :

▪ try → On ESSAYE d’exécuter du code

▪ catch → Si une erreur arrive, on la CAPTURE

▪ finally → Ce code s’exécute TOUJOURS, même s’il y a erreur ou pas

61
 07. Gestion des erreurs : try / catch / finally
try — On teste un code qui peut provoquer une erreur

Le bloc try sert à placer du code qui peut échouer.

Exemples de code dangereux :

▪ division par zéro

▪ lire un fichier qui n’existe pas

▪ appeler une API sans internet

▪ convertir du texte en nombre

Exemple

try {
int x = 10 ~/ 0; // erreur : division par zéro
print(x);
}
62
 07. Gestion des erreurs : try / catch / finally

catch — Attraper et gérer l’erreur

Quand une erreur se produit dans le try, Dart saute vers catch, qui permet :

▪ d’empêcher l’arrêt du programme

▪ d’afficher un message clair

▪ de réagir (ex : redemander une saisie)

Exemple

try {
int resultat = 10 ~/ 0;
print(resultat);
} catch (erreur) {
print("Une erreur s'est produite : $erreur");
}

63
 07. Gestion des erreurs : try / catch / finally

finally — S’exécute toujours, même si erreur ou pas

Le bloc finally contient du code qui doit s’exécuter :

▪ s’il y a une erreur
▪ s’il n’y a pas d’erreur
▪ si tu fais un return dans le try
▪ si tu fais un throw

Exemple

try {
int x = 10 ~/ 0;
print(x);
} catch (e) {
print("Erreur détectée : $e");
} finally {
print("Bloc finally exécuté.");
} 64
 08. Programmation Asynchrone

La programmation asynchrone permet d’exécuter des tâches qui prennent du

temps sans bloquer l’application.
Elle est essentielle lorsque certaines opérations peuvent être longues, comme
accéder à un fichier, télécharger des données ou attendre une réponse d’API.
Pourquoi l’asynchrone est important
Sans asynchrone, une tâche longue bloquerait l’application, ce qui
provoquerait un freeze ou un ralentissement visible pour l’utilisateur.
Exemples de tâches asynchrones
▪ Télécharger un fichier depuis Internet
▪ Attendre une réponse d’API
▪ Lire un fichier sur le disque
▪ Attendre la fin d’une animation

Ces opérations peuvent être exécutées en arrière-plan, pendant que le reste

de l’application continue de fonctionner normalement.
65
 08. Programmation Asynchrone

Les Futures

Un Future représente une valeur qui sera disponible dans le futur, après l’exécution
d’une opération asynchrone. Il n’est pas immédiat, il indique simplement qu’une
valeur sera fournie plus tard.

Pourquoi utiliser un Future ?

▪ Pour gérer les opérations longues (ex : téléchargement, lecture de fichier,

requêtes API)
▪ Pour éviter de bloquer l’application pendant l’attente.
▪ Pour que le programme puisse continuer à s’exécuter sans interruption.

États d’un Future :

1. Non complété (uncompleted) → la valeur n’est pas encore disponible.

2. Complété avec succès → le Future fournit une valeur.
3. Complété avec erreur → le Future renvoie une exception.
66
 08. Programmation Asynchrone
Les Futures

Future<String> fetchData() {
return [Link](Duration(seconds: 2), () {
return "Données reçues !";
}); }
void main() {
print("Début du programme");
fetchData().then((value) {
print(value); // S’affiche après 2 secondes
});
print("Fin du programme");
}

▪ [Link](Duration(seconds: 2), ...) → simule une opération longue de 2 secondes.

▪ La méthode .then((value) { ... }) → permet de récupérer la valeur du Future lorsqu’elle est disponible.
▪ Pendant l’attente, le programme continue à s’exécuter, affichant "Fin du programme" avant
"Données reçues !".
67
 08. Programmation Asynchrone
Future avec .then()

void main() {
fetchData().then((resultat) {
print(resultat);
});

print("En attente...");
}
▪ fetchData() renvoie un Future, donc l’opération est asynchrone.
▪ La méthode .then((resultat) { ... }) permet de définir ce qui sera fait quand la valeur sera disponible.
▪ Pendant que le Future s’exécute, Dart continue à exécuter le reste du programme.
▪ C’est pour cela que "En attente..." s’affiche avant "Données reçues !".

À retenir

▪ .then() permet de réagir à la valeur d’un Future lorsqu’elle est prête.

▪ L’exécution est non bloquante : le programme ne s’arrête pas pendant

l’attente. 68
 08. Programmation Asynchrone

Async / Await
Pourquoi utiliser async / await ?
Pour écrire du code asynchrone de manière simple et lisible, comme du code
synchronisé. Évite l’utilisation répétée de .then().
1. async
On ajoute le mot-clé async à une fonction pour indiquer qu’elle contient du
code asynchrone.
Une fonction async retourne toujours un Future, même si elle semble retourner
une valeur normale.

Future<void> maFonction() async {

// code asynchrone
}

69
 08. Programmation Asynchrone

Async / Await
2. await
Le mot-clé await permet d’attendre qu’un Future soit complété avant de
continuer l’exécution.
Le code semble synchrone, mais reste non bloquant pour l’application.

Future<String> fetchData() async {

await [Link](Duration(seconds: 2));
return "Données reçues !";
}
void main() async {
print("Début");
String resultat = await fetchData(); // attend le Future
print(resultat);
print("Fin");
}
70
 08. Programmation Asynchrone

Async / Await

À retenir

▪ async → indique qu’une fonction contient du code asynchrone et

retourne un Future.

▪ await → attend la fin d’un Future avant de passer à la ligne suivante.

▪ Rend le code plus naturel et lisible que .then().

71
Merci
 Master : Ingénierie Techno-pédagogique
et Innovation

DÉVELOPPEMENT APPLICATIONS
MOBILE-LEARNING :
Installation et configuration de
l’environnement de développement Flutter

Prof. Mohamed DAOUDI

Année universitaire : 2025/2026

Plan
01. Installation d’Android Studio

02. Configuration du SDK Android

03. Installation de Git

04. Installation et vérification de Flutter

05. Installation et configuration de Visual Studio Code

06. Création d’un premier projet Flutter

07. Lancement et test de l’application

 01. Installation d’Android Studio

Android Studio est l’environnement de développement intégré (IDE)

officiel pour la création d’applications Android. Il est développé et
maintenu par Google, et repose sur la plateforme IntelliJ IDEA.
Android Studio fournit tous les outils nécessaires pour concevoir,
développer, tester et déployer des applications Android de manière
professionnelle.

Cet IDE intègre nativement le SDK Android, un émulateur performant,

des outils de débogage, de profilage et de gestion de projets. Il
permet le développement en Java, Kotlin, et sert également de
base pour les projets Flutter destinés aux plateformes Android.

3
 01. Installation d’Android Studio
Principales fonctionnalités d’Android Studio

Éditeur de code intelligent Outils de débogage et de test

▪ Complétion automatique ▪ Débogueur intégré
▪ Détection d’erreurs en temps réel ▪ Analyse des performances (CPU,
▪ Refactoring du code mémoire, réseau)
▪ Tests unitaires et tests UI
Gestion du SDK Android
▪ Installation et mise à jour des Support de Flutter
plateformes Android ▪ Création et exécution de projets Flutter
▪ Gestion des outils et des versions du ▪ Intégration avec Dart
SDK ▪ Gestion des émulateurs Android pour
Flutter
Émulateur Android intégré
▪ Simulation de différents appareils
(téléphones, tablettes, versions
Android)
▪ Tests rapides sans appareil physique

4
 01. Installation d’Android Studio

Rôle d’Android Studio dans le développement Flutter

Dans un projet Flutter, Android Studio est principalement utilisé pour :

▪ Fournir le SDK Android et les outils de compilation

▪ Gérer les émulateurs Android

▪ Configurer l’environnement Android requis par Flutter

Bien que le développement Flutter puisse se faire dans Visual Studio

Code, Android Studio reste indispensable pour la configuration de la
partie Android.

5
 01. Installation d’Android Studio

Installation d’Android Studio

Étape 1 : Télécharger Android Studio

Téléchargez Android Studio depuis le site officiel :
[Link]

6
 01. Installation d’Android Studio
Installation d’Android Studio
Étape 2 : Installer le programme
Lancez le fichier téléchargé, puis cliquez sur Next et Install en laissant les
options par défaut.

7
 02. Configuration du SDK Android
Configuration du SDK Android

Étape 3 : Installer le SDK et les outils Android

À l’ouverture d’Android Studio, laissez l’assistant installer automatiquement

le SDK Android, les packages et les outils nécessaires.

Android Studio vous demande si vous

souhaitez envoyer des données d’utilisation
anonymes afin d’améliorer le produit.
Pour continuer l’installation simplement,
cliquez sur « Don’t send ».
Le choix de l’une ou l’autre option n’a aucun
impact sur le déroulement de l’installation

8
 02. Configuration du SDK Android
Configuration du SDK Android

Étape 3 : Installer le SDK et les outils Android

L’assistant d’installation démarre. Cliquez sur “Next”

pour commencer la configuration d’Android Studio.

Étape — Choisir le type d’installation

Sélectionnez Standard, l’option recommandée pour
installer Android Studio avec les réglages par défaut.
Cliquez ensuite sur Next pour continuer

9
 02. Configuration du SDK Android
Configuration du SDK Android

Étape 3 : Installer le SDK et les outils Android

▪ Vérifiez le dossier du SDK Android

Ici, Android Studio montre le chemin où le SDK
sera installé :
C:\Users\yssnbhrz\AppData\Local\Android\Sdk
▪ Vérifiez les composants à télécharger
Android Studio affiche la liste des outils
nécessaires pour développer des applications
Android :
▪ Cliquez sur le bouton “Next”
Après avoir vérifié les paramètres, cliquez sur
Next pour continuer l’installation.

10
 02. Configuration du SDK Android
Configuration du SDK Android

Étape 3 : Installer le SDK et les outils Android

À gauche, Android Studio affiche toutes les

licences liées aux outils que vous allez installer.
▪ Accepter la licence
Pour continuer l’installation, sélectionnez “Accept”.
Ce bouton signifie que vous acceptez les
conditions d’utilisation des outils Android.
▪ Cliquer sur “Next”
Une fois que vous avez accepté, cliquez sur le
bouton Next pour passer à l’étape suivante.

11
 02. Configuration du SDK Android
Configuration du SDK Android

Étape 3 : Installer le SDK et les outils Android

Android Studio commence le téléchargement.

Cette étape télécharge automatiquement
tous les outils nécessaires pour développer des
applications Android, comme l’émulateur, les
plateformes Android et les outils de
compilation.

12
 02. Configuration du SDK Android
Configuration du SDK Android

Étape 3 : Installer le SDK et les outils Android

▪ Message de réussite
Le message “was successfully created” indique que
l’installation des composants et la configuration de
l’émulateur sont terminées avec succès.
▪ Cliquer sur “Finish”
Pour finaliser l’installation et ouvrir Android Studio,
cliquez sur Finish

13
 02. Configuration du SDK Android
Configuration du SDK Android

Étape 3 : Installer le SDK et les outils Android

▪ Ouvrir le SDK Manager

cliquez sur More Actions pour afficher d’autres options.
▪ Accéder au SDK Manager
Dans la liste des actions disponibles, sélectionnez SDK
Manager.

Le SDK Manager permet de vérifier et d’installer les

versions du SDK Android nécessaires pour Flutter ou vos
projets Android.

14
 02. Configuration du SDK Android
Configuration du SDK Android

Étape 3 : Installer le SDK et les outils Android

Dans la fenêtre des paramètres (Settings), cliquez sur

Languages & Frameworks, puis sur Android SDK.
▪ Ouvrir l’onglet “SDK Tools”
Cet onglet liste tous les outils du SDK que vous pouvez
installer ou mettre à jour.
▪ Cocher “Android SDK Command-line Tools (latest)”
Cochez cette option pour installer les outils en ligne de
commande du SDK

15
 02. Configuration du SDK Android
Configuration du SDK Android

Étape 3 : Installer le SDK et les outils Android

Fenêtre de confirmation
Android Studio affiche une fenêtre pour confirmer
que vous souhaitez installer les outils sélectionnés,
ici : Android SDK Command-line Tools (latest).

16
 02. Configuration du SDK Android
Configuration du SDK Android

Étape 3 : Installer le SDK et les outils Android

Installation en cours
Android Studio commence maintenant
l’installation du composant sélectionné : Android
SDK Command-line Tools (latest).

17
 02. Configuration du SDK Android
Configuration du SDK Android

Étape 3 : Installer le SDK et les outils Android

Fin de l’installation
Android Studio affiche plusieurs lignes indiquant
que les Command-line Tools ont été :
téléchargés, installés, et configurés correctement.
Les messages ready, complete et finished
confirment que tout s’est bien passé

18
 02. Configuration du SDK Android
Configuration du SDK Android

Étape 3 : Installer le SDK et les outils Android

Fermer Android Studio

Fin de la configuration
À ce stade, l’installation du SDK Android et des
outils nécessaires est terminée.
Android Studio est prêt à être utilisé avec Flutter.

19
 03. Installation de Git

Git est un outil essentiel utilisé par beaucoup de technologies, y compris

Flutter, pour télécharger des projets, des packages et du code depuis
GitHub ou d’autres plateformes.

Pour télécharger Git :

Rendez-vous sur le site officiel : [Link]

20
 03. Installation de Git

L’installation de Git sur Windows est très simple :

Ouvrez le fichier d’installation, puis laissez tous les paramètres par défaut.

Il suffit de cliquer successivement sur Next jusqu’à la fin de l’assistant,

puis sur Install et enfin Finish.

Aucune configuration particulière n’est requise.

21
 04. Installation et vérification de Flutter

1. Télécharger Flutter SDK

1. Va sur le site officiel : [Link]

▪ Tape dans Google : "Flutter Windows install" et ouvre la documentation
officielle de Flutter.
2. Télécharge le fichier .zip de Flutter pour Windows (généralement
flutter_windows_x.[Link]).

22
 04. Installation et vérification de Flutter

2. Décompresser Flutter dans un dossier propre

1. Crée un dossier, par exemple :

▪ C:\flutter (recommandé)
Évite C:\Program Files (à cause des permissions).
2. Décompresse le contenu du .zip dans ce dossier :
▪ Résultat attendu : C:\flutter\bin créé.

23
 04. Installation et vérification de Flutter

3. Ajouter Flutter au PATH (variables d’environnement)

1. Clique droite sur Ce PC → Propriétés.

2. Clique sur Paramètres système avancés → bouton Variables d’environnement.

3. Dans la section Variables système (ou utilisateur) :

▪ Sélectionne Path → Modifier.

▪ Clique sur Nouveau et ajoute le chemin :

▪ C:\flutter\bin

4. Valide avec OK partout.

24
 04. Installation et vérification de Flutter
3. Ajouter Flutter au PATH (variables d’environnement)

25
 04. Installation et vérification de Flutter
4. Régénérer le cache Flutter

Après l’installation de Git :

1. Supprimez le dossier : flutter/bin/cache
2. Ouvrez un terminal et exécutez la commande :
flutter pub cache clear
Ces étapes permettent à Flutter de recréer (re-télécharger) correctement
son cache et d’éviter les erreurs liées aux packages.

26
 04. Installation et vérification de Flutter

5. Vérifier l’installation de Flutter

1. Ouvre Invite de commandes ou PowerShell.

2. Tape : flutter --version

▪ Si tu vois la version de Flutter → c’est bon

▪ Si commande inconnue → le PATH n’est pas bien configuré.

Lors de la première exécution de la commande flutter --version, Flutter doit

télécharger des fichiers nécessaires au fonctionnement du SDK.

Cela peut prendre quelques minutes et nécessite une connexion Internet.

Une fois le téléchargement terminé, la commande affiche la version de

Flutter installée sur la machine.

27
 04. Installation et vérification de Flutter
6. Vérifier l’installation avec flutter doctor

Ouvre CMD (Invite de commandes) ou PowerShell sur Windows.

Lancer la commande : flutter doctor
Après l’exécution, tu verras une liste d’éléments avec un symbole.
▪ tout est bien configuré,
▪ il manque quelque chose à corriger,
▪ un élément important n’est pas installé.
Corriger les problèmes signalés
pour les licences Android, il faudra exécuter :
flutter doctor --android-licenses
Puis répondre y pour accepter.

28
 04. Installation et vérification de Flutter
6. Vérifier l’installation avec flutter doctor

Après chaque correction, relance : flutter doctor

Les principaux éléments qui doivent être en vert sont :

▪ Flutter – le SDK est bien installé.
▪ Android toolchain – le SDK Android et les outils sont configurés.
▪ Android Studio (ou ton IDE principal) – reconnu par Flutter.
▪ Connected device / Devices – au moins un appareil ou émulateur
disponible (si tu veux tester sur Android).
29
 05. Installation et configuration de Visual Studio Code

1. Télécharger et installer VS Code

Aller sur le site officiel de Visual Studio Code :

[Link] (Télécharger la version Windows.)

Lancer le fichier .exe puis suivre l’installation :

▪ Accepter la licence.

▪ Laisser les options par défaut.

▪ Cliquer sur Next, Next, Install… jusqu’à la fin.

VS Code est l’éditeur de code que nous allons utiliser pour écrire, modifier
et organiser le code Flutter.

30
05. Installation et configuration de Visual Studio Code

2. Installer les extensions Flutter et Dart dans VS Code

Ouvrir le gestionnaire d’extensions

▪ Ouvrir VS Code.

▪ Cliquer sur l’icône Extensions (à gauche, symbole de carrés).

▪ Dans la barre de recherche, taper : Flutter.

▪ Cliquer sur l’extension Flutter.

▪ Cliquer sur le bouton Install.

▪ Cette extension va automatiquement d’installer aussi l’extension Dart.

31
05. Installation et configuration de Visual Studio Code

2. Installer les extensions Flutter et Dart dans VS Code

32
 06. Création d’un premier projet Flutter

Créer un projet Flutter dans VS Code

1. Ctrl + Shift + P → taper Flutter: New Project

2. Choisir Application

3. Sélectionner un dossier

4. Donner un nom au projet

5. VS Code ouvre le projet automatiquement

33
 06. Création d’un premier projet Flutter
Créer un projet Flutter dans VS Code

34
 07. Lancement et test de l’application

Lancer l'application

Clique en haut sur : No Device

Quand tu vois "No Device", ça veut

dire : Flutter ne voit aucun appareil
pour lancer l’application.

35
07. Lancement et test de l’application
Cela permet d’activer le support Android
pour ce projet.
Tu dois choisir cette option si tu veux tester
l’application sur un émulateur Android, ou
un téléphone Android connecté en USB.

Cliquez sur "Start Medium Phone API 36.1"

pour ouvrir l’émulateur Android et tester
votre application dessus

Patientez quelques secondes pendant que

l’émulateur Android se lance.

36
07. Lancement et test de l’application

L’émulateur Android est maintenant

ouvert et prêt à exécuter votre
application Flutter.

37
07. Lancement et test de l’application

Cliquez sur le bouton en forme

de triangle, puis choisissez “Run
Without Debugging” pour lancer
l’application sur l’émulateur.

Patientez pendant que Flutter

compile l’application, l’installe
sur l’émulateur et la lance
automatiquement pour les tests.

38
Merci
 Master : Ingénierie Techno-pédagogique
et Innovation

DÉVELOPPEMENT APPLICATIONS
MOBILE-LEARNING :
Les composants graphiques de base
et la navigation dans Flutter

Prof. Mohamed DAOUDI

Année universitaire : 2025/2026

Plan
01. Architecture d’un projet Flutter

02. Principes de base de l’interface utilisateur Flutter

03. Structure de base d’un écran Flutter

04. Composants graphiques de base

05. Formulaires et saisie utilisateur

06. Navigation et routage dans Flutter

 01. Architecture d’un projet Flutter

L’architecture d’une application Flutter concerne la manière dont on structure,

organise et conçoit le code pour qu’une application soit maintenable,
évolutive et testable, surtout lorsque l’équipe ou la complexité augmente.

Une architecture bien pensée apporte plusieurs bénéfices :

▪ Maintenabilité : le code est plus facile à comprendre, modifier et corriger.

▪ Scalabilité : possibilité d’ajouter des fonctionnalités sans que le code

devienne chaotic.

▪ Testabilité : les composants peuvent être testés de manière isolée.

▪ Meilleure expérience développeur : onboarding plus rapide dans une base

de code claire.

Ces objectifs sont essentiels dans des applications réelles où plusieurs

développeurs contribuent simultanément.
3
 01. Architecture d’un projet Flutter

1. Séparation des préoccupations (Separation of Concerns)

Chaque partie de l’application doit avoir une responsabilité distincte :

▪ L’interface utilisateur (UI layer) gère l’affichage et l’interaction.

▪ La logique métier (Logic layer) gère les règles du domaine.

▪ La couche de données (Data layer) gère l’accès aux API, bases de

données, etc.

Ces zones doivent être clairement séparées pour maximiser la lisibilité et

limiter les dépendances.

4
 01. Architecture d’un projet Flutter

2. Organisation des dossiers d’un projet Flutter

Un projet Flutter est organisé selon une structure standard qui sépare
clairement le code applicatif, les plateformes cibles et les ressources. Cette
organisation vise à faciliter la maintenabilité, la portabilité multi-plateforme
et le travail en équipe.

Les principaux répertoires et fichiers sont :

▪ lib/

▪ android/

▪ ios/

▪ assets/

▪ [Link]

5
 01. Architecture d’un projet Flutter

Rôle du répertoire lib/

Contient l’intégralité du code Dart de l’application. C’est le point central

du projet Flutter. Il Inclut généralement :

▪ [Link] (point d’entrée de l’application),

▪ les écrans (screens),

▪ les widgets,

▪ la logique métier et la navigation.

Toute modification fonctionnelle de l’application se fait principalement

dans ce dossier. D’un point de vue architectural, lib/ représente la couche
applicative Flutter, indépendante des plateformes.

6
 01. Architecture d’un projet Flutter

Rôle des répertoires android/ et ios/

▪ android/ :
▪ Contient le projet Android natif (Gradle, Kotlin/Java).
▪ Utilisé pour :
▪ la configuration Android (SDK, permissions),
▪ l’intégration avec des fonctionnalités natives.
▪ ios/ :
▪ Contient le projet iOS natif (Xcode, Swift/Objective-C).
▪ Gère :
▪ la configuration iOS,
▪ les certificats,
▪ les capacités spécifiques à iOS.
Flutter s’appuie sur ces dossiers pour compiler l’application sur chaque
plateforme, sans que le développeur Flutter n’ait à écrire du code natif
dans la majorité des cas.
7
 01. Architecture d’un projet Flutter

Rôle du dossier assets/

Contient les ressources statiques de l’application :
▪ images,
▪ icônes,
▪ fichiers JSON,
▪ polices de caractères.
Ces ressources doivent être déclarées explicitement dans [Link]
pour être accessibles dans le code. Permet de séparer clairement :
▪ le code,
▪ les ressources visuelles et multimédias

8
 01. Architecture d’un projet Flutter

Rôle du fichier [Link]

Fichier central de configuration du projet Flutter.

Permet de définir :
▪ les dépendances (packages Flutter),

▪ les assets utilisés,

▪ la version de l’application,

▪ les contraintes de l’environnement Flutter.

9
 01. Architecture d’un projet Flutter

2. Point d’entrée de l’application

Rôle du fichier [Link]

Le fichier [Link] constitue le point d’entrée unique de toute

application Flutter. Il joue un rôle fondamental car il définit :

▪ le démarrage de l’application,

▪ le premier widget affiché à l’écran,

▪ l’initialisation globale de l’environnement Flutter.

Dans un projet Flutter standard, ce fichier se trouve dans le répertoire

lib/ et est exécuté automatiquement lors du lancement de
l’application.

10
 01. Architecture d’un projet Flutter

2. Point d’entrée de l’application

La fonction main()
La fonction main() est la première fonction exécutée par
l’application. Elle suit les conventions du langage Dart.
Son rôle principal est :
▪ d’initialiser l’application,
▪ puis de lancer l’interface utilisateur.

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

Toute application Flutter valide doit contenir une fonction main().

11
 01. Architecture d’un projet Flutter
2. Point d’entrée de l’application
La fonction runApp()

runApp() est une fonction fournie par le framework Flutter. Elle prend en
paramètre un widget racine (root widget). Ce widget devient la racine
de l’arbre de widgets de l’application.

Rôle de runApp() :
▪ attacher l’arbre de widgets au moteur Flutter,

▪ déclencher le cycle de rendu,

▪ afficher l’interface graphique à l’écran.

À partir de ce point, Flutter gère automatiquement :

▪ le rendu,

▪ les interactions utilisateur,

▪ les mises à jour de l’interface. 12

 01. Architecture d’un projet Flutter

2. Point d’entrée de l’application

Le widget racine de l’application
Le widget passé à runApp() est généralement :
▪ MaterialApp (applications Material Design),
▪ ou CupertinoApp (style iOS).
Ce widget racine :
▪ définit la structure globale de l’application,
▪ configure le thème, la navigation et la localisation.

void main() {
runApp(MaterialApp(
home: HomePage(),
));
}
13
 02. Principes de base de l’interface utilisateur Flutter

1. Concept de widget et arbre de widgets

Le widget comme unité fondamentale de Flutter
Dans Flutter, tout est widget. Un widget représente une brique
élémentaire de l’interface utilisateur, pouvant correspondre à :
▪ un élément visuel (texte, bouton, image),
▪ une structure de mise en page (ligne, colonne, conteneur),
▪ ou un comportement (gestion de gestes, navigation).
Contrairement aux frameworks traditionnels, Flutter ne distingue pas :
▪ composants graphiques,
▪ layouts,
▪ styles.
Tous ces éléments sont unifiés sous le concept de widget.

14
 02. Principes de base de l’interface utilisateur Flutter

1. Concept de widget et arbre de widgets

Widgets immuables et description déclarative de l’UI
Les widgets Flutter sont immuables :
▪ une fois créés, ils ne changent pas,
▪ toute modification de l’interface entraîne la recréation de widgets.
Flutter adopte une approche déclarative :
▪ le développeur décrit à quoi doit ressembler l’interface,
▪ Flutter se charge de mettre à jour l’affichage en conséquence.

15
 02. Principes de base de l’interface utilisateur Flutter
1. Concept de widget et arbre de widgets
L’arbre de widgets (Widget Tree)
L’interface Flutter est organisée sous forme d’un arbre de widgets :
▪ chaque widget peut contenir un ou plusieurs widgets enfants. Mais, Il
existe certains widgets qui n’ont pas de propriété child.
▪ l’ensemble forme une structure hiérarchique.
Exemple conceptuel :
▪ MaterialApp
▪ Scaffold
▪ AppBar
▪ Column
▪ Text
▪ Button
AppBar n’est pas un child ; c’est une propriété de Scaffold (appBar:), donc
on ne la met pas dans body ni comme enfant. Cet arbre décrit toute la
structure visuelle de l’application, depuis le widget racine jusqu’aux
éléments les plus simple 16
 02. Principes de base de l’interface utilisateur Flutter

1. Concept de widget et arbre de widgets

Rôle de l’arbre de widgets dans le rendu

L’arbre de widgets permet à Flutter de :

▪ calculer le rendu graphique,
▪ gérer les événements utilisateurs,
▪ optimiser les performances via des mises à jour ciblées.

Lorsqu’un changement survient :

▪ Flutter compare l’ancien arbre au nouveau,
▪ seules les parties modifiées sont redessinées.

17
 02. Principes de base de l’interface utilisateur Flutter

2. Widgets StatelessWidget et StatefulWidget

Notion d’état dans une interface Flutter

L’état (state) représente les données susceptibles de changer au

cours de l’exécution de l’application, telles que :

▪ une valeur saisie par l’utilisateur,

▪ un compteur,

▪ le résultat d’une requête,

▪ l’état d’un bouton (activé/désactivé).

Flutter distingue deux grandes catégories de widgets selon la

présence ou non d’un état modifiable.

18
 02. Principes de base de l’interface utilisateur Flutter
2. Widgets StatelessWidget et StatefulWidget
Le widget StatelessWidget

Un StatelessWidget est un widget sans état interne :

▪ son affichage dépend uniquement des paramètres fournis lors de sa création,
▪ il ne change pas au cours du temps.

Caractéristiques principales :
▪ interface statique,
▪ simple à comprendre et à maintenir,
▪ performant car sans gestion d’état.

Exemples d’utilisation :
▪ affichage de texte,
▪ icônes,
▪ écrans informatifs,
▪ composants purement visuels.

Un StatelessWidget est reconstruit uniquement si son parent change.

19
 02. Principes de base de l’interface utilisateur Flutter
2. Widgets StatelessWidget et StatefulWidget
Le widget StatefulWidget
Un StatefulWidget est un widget avec un état modifiable :
▪ son interface peut évoluer dynamiquement,
▪ il est associé à un objet State.
Caractéristiques principales :
▪ interface dynamique et interactive,
▪ gestion d’événements utilisateur,
▪ mise à jour de l’affichage via setState().
Exemples d’utilisation :
▪ formulaires,
▪ boutons interactifs,
▪ listes dynamiques,
▪ animations simples.
La séparation entre StatefulWidget et State permet de :
▪ préserver la structure du widget,
▪ gérer proprement les changements d’état. 20
 02. Principes de base de l’interface utilisateur Flutter
3. Cycle de rendu et mise à jour de l’interface
Principe du cycle de rendu dans Flutter

Le cycle de rendu décrit le processus par lequel Flutter :

▪ construit l’interface utilisateur,

▪ l’affiche à l’écran,

▪ puis la met à jour en cas de changement.

Flutter adopte un modèle réactif et déclaratif :

▪ l’interface est reconstruite à partir de l’état courant,

▪ toute modification de l’état déclenche une nouvelle description de l’UI.

Le développeur ne manipule jamais directement l’interface graphique,

il modifie l’état, et Flutter s’occupe du rendu.
21
 02. Principes de base de l’interface utilisateur Flutter
3. Cycle de rendu et mise à jour de l’interface
Étapes principales du cycle de rendu

Le cycle de rendu Flutter peut être résumé en plusieurs étapes logiques :

▪ Construction des widgets
Flutter appelle la méthode build() pour créer l’arbre de widgets.
▪ Création des objets internes
Les widgets sont traduits en éléments et objets de rendu.
▪ Calcul de la mise en page (layout)
Flutter détermine la taille et la position de chaque composant.
▪ Peinture (painting)
Les éléments sont dessinés à l’écran.
▪ Affichage final
L’interface est rendue de manière fluide.
22
 02. Principes de base de l’interface utilisateur Flutter
3. Cycle de rendu et mise à jour de l’interface
Mise à jour de l’interface et rôle de setState()

Dans un StatefulWidget, la mise à jour de l’interface est déclenchée par :

setState(() {
// modification de l’état
});

Effets de setState() :
▪ signale à Flutter qu’un changement d’état a eu lieu,

▪ déclenche l’appel de la méthode build(),

▪ reconstruit uniquement les parties concernées de l’arbre de widgets.

setState() ne met pas à jour l’écran directement, il indique simplement que

l’interface doit être recalculée.
23
 03. Structure de base d’un écran Flutter

1. MaterialApp et configuration globale

Rôle du widget MaterialApp
Le widget MaterialApp constitue le point central de configuration d’une
application Flutter utilisant le Material Design. Il est généralement placé
au sommet de l’arbre de widgets, juste après runApp().
Ses rôles principaux sont :
▪ définir la structure globale de l’application,
▪ gérer la navigation et les routes,
▪ appliquer un thème visuel cohérent,
▪ configurer la langue, le format des textes et le comportement
général de l’UI.
Sans MaterialApp, de nombreuses fonctionnalités essentielles de Flutter
ne sont pas disponibles.
24
 03. Structure de base d’un écran Flutter
1. MaterialApp et configuration globale
Gestion du thème et de l’apparence globale

MaterialApp définit le thème visuel global de l’application via la

propriété theme. Cela inclut :
▪ les couleurs principales,
▪ la typographie,
▪ le style des boutons,
▪ les icônes et animations.
Exemple:

MaterialApp(
theme: ThemeData(
primarySwatch: [Link],
),
);

25
 03. Structure de base d’un écran Flutter
1. MaterialApp et configuration globale
Autres configurations globales

MaterialApp permet également de configurer :

▪ la langue et la localisation,

▪ le comportement du bouton retour,

▪ le mode debug,

▪ la gestion des erreurs de navigation.

Ces paramètres agissent à l’échelle de toute l’application.

26
 03. Structure de base d’un écran Flutter

2. Scaffold et organisation d’une page

Rôle du widget Scaffold

Le widget Scaffold fournit la structure de base d’un écran Flutter

conforme aux principes du Material Design. Il agit comme un
conteneur principal qui organise les différentes zones d’une page.

Ses fonctions principales sont :

▪ structurer l’interface d’un écran,

▪ gérer les éléments standards de navigation et d’action,

▪ assurer une cohérence visuelle entre les pages.

En pratique, chaque écran principal d’une application Flutter est

généralement construit autour d’un Scaffold.
27
 03. Structure de base d’un écran Flutter

2. Scaffold et organisation d’une page

Les zones principales du Scaffold
Scaffold divise une page en plusieurs zones fonctionnelles :
▪ appBar : barre supérieure contenant le titre, les actions et parfois la
navigation.
▪ Body: zone centrale de contenu, où sont placés les widgets principaux
de l’écran.
▪ floatingActionButton: bouton d’action flottant, destiné à une action
principale.
▪ drawer / endDrawer: menu latéral pour la navigation ou les options
secondaires.
▪ bottomNavigationBar: barre de navigation inférieure pour les
applications multi-sections.
Toutes ces zones sont optionnelles, mais leur usage structuré améliore
l’ergonomie.
28
 03. Structure de base d’un écran Flutter

2. Scaffold et organisation d’une page

Organisation du contenu dans le body

Le body du Scaffold accueille :

▪ les widgets de mise en page (Column, Row, ListView),

▪ les composants graphiques (textes, boutons, formulaires),

▪ les éléments interactifs.

29
 03. Structure de base d’un écran Flutter

3. Composants principaux : AppBar, Body et actions

AppBar : barre supérieure et navigation

Le widget AppBar représente la barre supérieure d’un écran Flutter. Il

joue un rôle central dans :
◦ l’identification de l’écran,
◦ l’accès aux actions principales,
◦ la navigation (retour, menus).

Fonctions principales :
◦ affichage du titre de la page,
◦ intégration d’icônes d’actions (actions),
◦ gestion du bouton de retour automatique,
◦ affichage de menus ou d’onglets.

AppBar contribue fortement à la cohérence de navigation et à

l’ergonomie globale de l’application.

30
 03. Structure de base d’un écran Flutter

3. Composants principaux : AppBar, Body et actions

Body : contenu principal de l’écran

Le body du Scaffold contient le contenu fonctionnel principal de la

page. Il accueille :

▪ les widgets de mise en page (Column, Row, ListView),

▪ les composants graphiques (texte, images),

▪ les éléments interactifs (boutons, formulaires).

31
 03. Structure de base d’un écran Flutter

3. Composants principaux : AppBar, Body et actions

Actions : interaction et commandes utilisateur

Les actions représentent les commandes accessibles à l’utilisateur

pour interagir avec l’écran. Elles peuvent être placées :

▪ dans l’AppBar (icônes, menus),

▪ via un FloatingActionButton,

▪ dans le contenu du body.

Rôle des actions :

▪ déclencher une fonctionnalité,

▪ modifier l’état de l’application,

▪ lancer une navigation ou un traitement.

32
 04. Composants graphiques de base

Dans Flutter, tout ce que vous voyez à l’écran est un widget. Un

widget peut être un texte, un bouton, une image, ou même une
page entière.

Quand on construit une application Flutter, on assemble des

widgets, un peu comme des briques LEGO, pour créer l’interface
utilisateur (UI).

33
 04. Composants graphiques de base
4.1 Widgets de mise en page

Les widgets de mise en page servent à organiser l’écran : ils décident où les
éléments sont placés, comment ils sont alignés et quelle taille ils occupent.

a. Row & Column

En Flutter, Row et Column sont les deux widgets les plus importants pour
organiser les éléments à l’écran.

▪ Row permet de placer plusieurs widgets sur une seule ligne horizontale
(de gauche à droite).

▪ Column permet de placer plusieurs widgets verticalement (les uns sous

les autres).

34
 04. Composants graphiques de base
4.1 Widgets de mise en page

a. Row & Column

Column (horizontal) Column (vertical)

Row( Column(
mainAxisAlignment: [Link], mainAxisAlignment: [Link],
crossAxisAlignment: [Link], crossAxisAlignment: [Link],
mainAxisSize: [Link], mainAxisSize: [Link],
children: [ children: [
Icon([Link]), Icon([Link]),
Icon([Link]), Icon([Link]),
Icon([Link]), Icon([Link]),
], ],
) )

▪ mainAxisAlignment → alignement sur l’axe principal

Values : start end center spaceBetween spaceAround spaceEvenly
▪ crossAxisAlignment → alignement sur l’axe secondaire
Values : start end center stretch baseline (needs textBaseline)
▪ [Link] → prend tout l’espace disponible (valeur par défaut)
35
▪ [Link] → s’adapte uniquement à la taille du contenu
 04. Composants graphiques de base
4.1 Widgets de mise en page

a. Row & Column

Point important à retenir

▪ Row et Column ne scrollent pas
▪ Si le contenu dépasse l’écran → erreur de débordement
Nous verrons plus tard comment résoudre ce problème avec
SingleChildScrollView ou ListView. 36
 04. Composants graphiques de base
4.1 Widgets de mise en page

b. Container (boîte)

Container est l’un des widgets les plus utilisés en Flutter. On peut le voir
comme une boîte qui permet de contenir, styliser et positionner un widget.

Container(
width: 120,
height: 120,
margin: [Link](10),
padding: [Link](8),
alignment: [Link],
decoration: BoxDecoration(
color: [Link],
borderRadius: [Link](16),
),
child: Text(
"Flutter",
style: TextStyle(color: [Link]),
),
) 37
 04. Composants graphiques de base
4.1 Widgets de mise en page

c. Padding

Padding est un widget qui sert à ajouter un espace intérieur autour d’un widget.

Padding(
padding: [Link](16),
child: Text("Bonjour"),
)

d. SizedBox

SizedBox est un widget très simple qui sert à donner une taille fixe ou à créer de
l’espace entre les widgets.

SizedBox(height: 20), 38
 04. Composants graphiques de base
4.1 Widgets de mise en page
d. SafeArea
un widget qui empêche le contenu d’être caché par les zones dangereuses de
l’écran.
▪ encoche (notch)
▪ barre de statut
▪ barre de navigation système
▪ coins arrondis
Il ajoute automatiquement des marges internes pour que le contenu reste visible.

Scaffold(
body: SafeArea(
top: true,
bottom: false, // ignorer la zone du bas
child: Text("Contenu personnalisé"),
),
); 39
 04. Composants graphiques de base
4.1 Widgets de mise en page
e. Expanded

Expanded est un widget utilisé dans Row, Column ou Flex pour faire en sorte
qu’un widget prenne l’espace disponible.

Row(
children: [
Expanded(
flex: 1,
child: Container(color: [Link], height: 50),
),
Expanded(
flex: 2,
child: Container(color: [Link], height: 50),
),
],
)

Rouge = 1 part, Bleu = 2 parts

Le bleu prend 2 fois plus d’espace que le rouge. 40
 04. Composants graphiques de base
4.1 Widgets de mise en page
f. Stack (superposition)
`Stack` est un widget qui permet de superposer plusieurs widgets, les uns au-
dessus des autres.
Contrairement à `Row` (horizontal) et `Column` (vertical), `Stack` travaille en
profondeur (avant / arrière).

Stack(
children: [
[Link]('assets/[Link]'),
Positioned(
bottom: 10,
right: 10,
child: Text("Texte"),
),
],
)

Pour placer un widget à un endroit précis dans un Stack, on utilise Positioned. 41

 04. Composants graphiques de base
4.1 Widgets de mise en page
g. Center
Center est un widget très simple qui sert à mettre son enfant (child) au centre
de l’espace disponible.

Center(
child: Text("Centre"),
)

h. Spacer

Spacer est un widget utilisé dans Row ou Column pour ajouter un espace
flexible entre les widgets.

Row(
children: [
Text("Gauche"),
Spacer(), // Spacer() pousse le text "Droite" vers la droite.
Text("Droite"),
],
) 42
 04. Composants graphiques de base
4.1 Widgets de mise en page
i. SingleChildScrollView
C’est un widget qui permet de rendre scrollable un seul enfant (child).
Très utile quand tu as une page avec beaucoup de widgets (formulaire,
colonne longue) et tu veux éviter l’erreur overflow.

SingleChildScrollView(
scrollDirection: [Link],
child: Column(
children: [
Text("Titre"),
SizedBox(height: 20),
// beaucoup de widgets...
],
),
)

Dans SingleChildScrollView, la propriété scrollDirection définit dans quel sens

on fait défiler le contenu :
▪ [Link] (par défaut) : scroll de haut en bas.
▪ [Link] : scroll de gauche à droite.
43
 04. Composants graphiques de base
4.2 Widgets d’affichage
Les widgets d’affichage sont les widgets qui servent à montrer du contenu à
l’utilisateur. Ils n’organisent pas l’écran (comme Row ou Column) et n’ajoutent
pas de logique d’action, mais ils affichent des informations visuelles.

a. Text
Text est le widget utilisé pour afficher du texte à l’écran. Il sert à afficher : titres,
paragraphes, messages, labels, etc.

Text(
"Flutter", // Le contenu du texte à afficher
style: TextStyle( // Style (apparence) du texte
fontSize: 20, // Taille du texte (20 pixels)
color: [Link], // Couleur du texte (bleu)
fontWeight: [Link], // Texte en gras
),
// Si le texte dépasse, il est coupé et on affiche "..."
overflow: [Link],
) 44
 04. Composants graphiques de base
4.2 Widgets d’affichage lib/assets/images/
On ajoute lib/assets/images/ dans
b. Image
[Link] pour déclarer à Flutter que ce
Image est le widget qui sert à afficher une image
dossier contient des fichiers (images) à inclure
dans Flutter.
dans l’application au moment du build
▪ On peut afficher une image depuis :
Ouvre [Link] et ajoute :
▪ les assets (images dans le projet)
flutter:
▪ Internet (URL)
assets:
Image depuis les assets (dans le projet)
- lib/assets/images/
Étape 1 — Déclarer l’image dans [Link]
[Link] = la liste officielle des
Mets tes images dans un dossier, par exemple :
ressources de l’application

Étape 2 — Utiliser l’image dans le code

[Link](
'lib/assets/images/[Link]',
width: 120,
height: 120,
fit: [Link],
) 45
 04. Composants graphiques de base
4.2 Widgets d’affichage
b. Image
Image depuis Internet (URL)

[Link](
"[Link] // Lien de l’image
width: 200,
fit: [Link],
loadingBuilder: (context, child, progress) {
if (progress == null) return child;
return const Center(child: CircularProgressIndicator());
},
errorBuilder: (context, error, stack) {
return const Icon(Icons.broken_image, size: 40);
},
)
46
 04. Composants graphiques de base
4.2 Widgets d’affichage
c. CircleAvatar

CircleAvatar est un widget qui sert à afficher une image ou une lettre dans
un cercle. On l’utilise souvent pour une photo de profil.

CircleAvatar(
radius: 40,
backgroundImage: AssetImage('assets/images/[Link]'),
// backgroundImage: NetworkImage('[Link] // depuis
Internet
)

47
 04. Composants graphiques de base
4.2 Widgets d’affichage
d. ListTile

ListTile est un widget Flutter prêt à l’emploi pour afficher une ligne structurée
dans une liste. Il permet de montrer un titre, un sous-titre, une icône principale
et une icône secondaire, avec un style cohérent et peu de code.

ListTile(
leading: Icon([Link]),
title: Text("Title"),
subtitle: Text("Subtitle"),
trailing: Icon(Icons.arrow_forward_ios),
onTap: () {
print("Ouverture du profil");
},
)

48
 04. Composants graphiques de base

4.3 Widgets interactifs (Buttons)

Les widgets interactifs sont les widgets qui permettent à

l’utilisateur d’interagir avec l’application. Contrairement aux
widgets d’affichage, ils réagissent aux actions de l’utilisateur
comme un clic, un appui ou un geste.

49
 04. Composants graphiques de base
4.3 Widgets interactifs (Buttons)
a. ElevatedButton
bouton Material avec une élévation (ombre), utilisé pour les actions principales
(envoyer, valider, confirmer). Quand l’utilisateur clique, le code dans
onPressed s’exécute.

ElevatedButton(
// onPressed: null, -- Bouton désactivé (grisé)
onPressed: () {
print("Bouton cliqué");
},
style: [Link](
backgroundColor: [Link],
foregroundColor: [Link],
padding: [Link](horizontal: 24, vertical: 12),
shape: RoundedRectangleBorder(
borderRadius: [Link](12),
),
elevation: 4,
),
child: Text("Valider"),
) 50
 04. Composants graphiques de base
4.3 Widgets interactifs (Buttons)
a. ElevatedButton
▪ Icône + texte

[Link] est une variante de ElevatedButton qui permet

d’afficher une icône et un texte dans le même bouton.

[Link](
onPressed: () {},
icon: Icon([Link]),
label: Text("Envoyer"),
)

51
 04. Composants graphiques de base
4.3 Widgets interactifs (Buttons)
b. TextButton

Un bouton sans fond et sans ombre, utilisé pour les actions secondaires
(annuler, retour, lien).

TextButton(
onPressed: () {
print("Cliqué");
},
style: [Link]( // obligatoire
foregroundColor: [Link],
padding: [Link](horizontal: 16, vertical: 8),
textStyle: TextStyle(
fontSize: 16,
fontWeight: [Link],
),
),
child: Text("Annuler"),
)

52
 04. Composants graphiques de base
4.3 Widgets interactifs (Buttons)
b. TextButton
▪ Texte + icône

Un bouton Texte + Icône combine une icône et un texte dans le même

bouton. Il permet à l’utilisateur de comprendre plus rapidement l’action
grâce au visuel (icône) et à l’explication écrite (texte).

[Link](
onPressed: () {},
icon: Icon(Icons.arrow_forward),
label: Text("Suivant"),
)

53
 04. Composants graphiques de base
4.3 Widgets interactifs (Buttons)
c. IconButton

IconButton est un bouton qui affiche seulement une icône (sans texte).
Quand on clique dessus, il exécute une action avec onPressed.
Très utilisé dans :
▪ AppBar (search, menu, back)
▪ actions rapides (delete, edit, share)

IconButton(
onPressed: () {
print("Icône cliquée");
},
icon: Icon([Link]),
)

54
 04. Composants graphiques de base

4.4 Widgets de listes et de grilles

Les widgets de listes et de grilles sont utilisés pour afficher plusieurs éléments
de manière organisée et défilable. Ils sont indispensables lorsqu’une
application doit afficher des données répétées comme : listes d’utilisateurs,
produits, messages, images, etc.

Contrairement aux widgets simples (Text, Icon, Container), ces widgets

permettent :
▪ l’affichage dynamique d’un grand nombre d’éléments,

▪ le défilement (scroll) vertical ou horizontal,

▪ une meilleure performance pour les longues listes.

55
 04. Composants graphiques de base

4.4 Widgets de listes et de grilles

a. ListView

ListView est un widget qui permet d’afficher une liste d’éléments scrollable
(verticale ou horizontale).

Affiche ses éléments dans une seule direction :

▪ verticalement (par défaut),

▪ ou horizontalement.

Lorsque la liste est longue, Flutter ne crée pas tous les widgets en même temps
(selon le type de ListView). les widgets sont créés seulement quand ils
deviennent visibles à l’écran. Cela permet :
▪ d’économiser la mémoire,

▪ d’améliorer la performance,

▪ d’éviter les erreurs de débordement. 56

 04. Composants graphiques de base
4.4 Widgets de listes et de grilles
a. ListView
[Link]
La version la plus utilisée et la plus performante de ListView.
Elle est recommandée quand on a une liste longue ou dynamique (API, base
de données…).

final List<String> students = ["Yassine","Aya","Hamza","Sara","Omar", ];

[Link](
itemCount: [Link], // nombre d’étudiants
itemBuilder: (context, index) {
return ListTile(
leading: CircleAvatar( // avatar (1ère lettre)
child: Text(students[index][0]),
),
title: Text(students[index]), // nom de l’étudiant
subtitle: Text("Étudiant #${index + 1}"), // info simple
onTap: () {
print("Tu as cliqué sur ${students[index]}"); // action au clic
},
);
},
) 57
 04. Composants graphiques de base
4.4 Widgets de listes et de grilles
b. GridView

GridView est un widget qui affiche des éléments en grille (lignes + colonnes),
comme une galerie de photos.

▪ Les éléments sont organisés en colonnes

▪ La grille peut être scrollable

▪ Pour de grandes grilles, on utilise une version builder (performance)

[Link]

[Link] est la version la plus performante pour afficher une grille

avec beaucoup d’éléments.

Elle est recommandée quand la grille est grande ou dynamique (API, base
de données…). [Link] fonctionne comme [Link].
58
 04. Composants graphiques de base
4.4 Widgets de listes et de grilles
b. GridView
[Link] final List<String> students = ["Yassine", "Aya","Hamza", "Sara",];
[Link](
padding: [Link](10),
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2, // nombre de colonnes
crossAxisSpacing: 10, // espace entre colonnes
mainAxisSpacing: 10, // espace entre lignes
),
itemCount: [Link], // nombre d’éléments (des étudiants)
itemBuilder: (context, index) {
final name = students[index];
return Container(
padding: [Link](12),
decoration: BoxDecoration(
color: [Link],
borderRadius: [Link](12),
),
child: Column(
mainAxisAlignment: [Link],
children: [
Text(
name, // nom complet
style: TextStyle(color: [Link], fontSize: 16),
),
),
);
},
)

59
 05. Formulaires et saisie utilisateur

Les formulaires et la saisie utilisateur permettent à l’utilisateur d’entrer des

informations dans l’application, comme un nom, un email, un mot de passe
ou des données numériques.

Dans Flutter, les formulaires servent à :

▪ collecter des données auprès de l’utilisateur,

▪ valider les informations saisies,

▪ réagir aux erreurs (champ vide, format incorrect),

▪ soumettre les données (inscription, connexion, recherche, etc.).

Flutter fournit des widgets et des outils pour gérer facilement :

▪ la validation des champs,

▪ la récupération des valeurs saisies,

▪ l’état du formulaire.
60
 05. Formulaires et saisie utilisateur
5.1 Champs de saisie (TextField, TextFormField)
a. Form

Form est un widget qui regroupe plusieurs champs (souvent TextFormField) et

permet de :
▪ valider tous les champs en une seule fois (validate())

▪ sauvegarder les valeurs (save())

▪ réinitialiser le formulaire (reset())

Pour contrôler un formulaire, on utilise une clé :

final _formKey = GlobalKey<FormState>();

Cette clé permet :

▪ validate() → vérifier les champs

▪ save() → sauvegarder les valeurs

▪ reset() → réinitialiser le formulaire

61
 05. Formulaires et saisie utilisateur
5.1 Champs de saisie (TextField, TextFormField)
b. TextField

TextField est un champ de saisie simple qui permet à l’utilisateur d’entrer

du texte. Il est utilisé quand on veut récupérer une valeur (recherche,
message, note) sans validation obligatoire.

TextField(
controller: controller,
keyboardType: [Link],
obscureText: false,
maxLength: 30,
decoration: InputDecoration(
labelText: "Email",
hintText: "exemple@[Link]",
prefixIcon: Icon([Link]),
border: OutlineInputBorder(),
),
onChanged: (value) {
print(value);
},
) 62
 05. Formulaires et saisie utilisateur
5.1 Champs de saisie (TextField, TextFormField)
c. TextFormField
TextFormField est un TextField spécial pour les formulaires. Il s’utilise à
l’intérieur d’un widget Form et permet facilement :
▪ la validation (validator)
▪ la sauvegarde (onSaved)
▪ la gestion d’erreurs automatiquement.

TextFormField(
controller: emailCtrl,
validator: (value) {
if (value == null || [Link]) {
return "Email obligatoire";
}
if (![Link]("@")) {
return "Email invalide";
}
return null; // valide
},
onChanged: (value) => print(value),
) 63
 05. Formulaires et saisie utilisateur
5.1 Champs de saisie (TextField, TextFormField)
d. Checkbox

Checkbox est un widget booléen qui permet à l’utilisateur de cocher /

décocher une option (valeur true ou false ). Il est utilisé pour accepter des
conditions, activer ou désactiver une option, ou sélectionner une préférence.

bool isChecked = false;

Row(
children: [
Checkbox(
value: isChecked,
onChanged: (value) {
setState(() {
isChecked = value!;
});
},
),
Text("J’accepte les conditions"),
],
)
64
 05. Formulaires et saisie utilisateur
5.1 Champs de saisie (TextField,
TextFormField) String gender = "M";
Column(
e. Radio children: [
Radio<String>(
Radio est un widget interactif qui permet à value: "M",
groupValue: gender,
l’utilisateur de choisir une seule option parmi onChanged: (value) {
setState(() {
plusieurs. gender = value!;
Contrairement à Checkbox (plusieurs choix },
});

possibles), Radio = choix unique. ),

Text("Homme"),
Un Radio fonctionne avec : Radio<String>(
value: "F",
▪ value → valeur de ce bouton groupValue: gender,
onChanged: (value) {
▪ groupValue → valeur sélectionnée du setState(() {
gender = value!;
groupe });
},
▪ onChanged → action au clic ),
Text("Femme"),
Tous les Radio ayant le même groupValue ],
)
font partie du même groupe.
65
 05. Formulaires et saisie utilisateur
5.1 Champs de saisie (TextField, TextFormField)
e. Switch

Switch est un widget interactif qui permet à l’utilisateur d’activer ou

désactiver une option. Il fonctionne avec une valeur booléenne ( true /
false), comme Checkbox, mais avec une apparence différente.

bool isOn = false;

Row(
mainAxisAlignment: [Link],
children: [
Text("Notifications"),
Switch(
value: isOn,
onChanged: (value) {
setState(() => isOn = value);
},
),
],
)
66
 05. Formulaires et saisie utilisateur
5.2 Validation et gestion des formulaires

La validation et la gestion des formulaires permettent de vérifier que les

données saisies par l’utilisateur sont correctes, complètes et valides avant de les
utiliser ou de les envoyer (serveur, base de données, API).

Dans Flutter, cette étape est essentielle pour :

▪ éviter les erreurs de saisie (champ vide, email invalide, mot de passe court),

▪ améliorer l’expérience utilisateur,

▪ garantir la qualité des données.

67
 05. Formulaires et saisie utilisateur
5.2 Validation et gestion des formulaires

Form(
key: _formKey,
child: Column(
children: [
// Champ Email
TextFormField(
decoration: const InputDecoration(labelText: "Email"),
keyboardType: [Link],
validator: (value) {
if (value == null || [Link]().isEmpty) {
return "L’email est obligatoire";
}
return null; // valide
},
),
const SizedBox(height: 20),
ElevatedButton(
onPressed: () {
if (_formKey.currentState!.validate()) {
print(" Formulaire valide");
} else {
print(" Formulaire invalide");
}
},
child: const Text("Valider"),
),
],
),
) 68
 05. Formulaires et saisie utilisateur
5.2 Validation et gestion des formulaires

Quand l’utilisateur clique sur le bouton (Valider), Flutter exécute

_formKey.currentState!.validate() :

Flutter parcourt les champs TextFormField un par un (du premier au dernier).

Pour chaque champ, il appelle validator(value) :

▪ si le validator retourne un texte → le champ est invalide et le message

s’affiche.

▪ si le validator retourne null → le champ est valide.

À la fin :

▪ s’il existe au moins un champ invalide → validate() retourne false

▪ si tous les champs sont valides → validate() retourne true

69
 06. Navigation et routage dans Flutter

La navigation dans Flutter permet à l’utilisateur de se déplacer entre les

différents écrans de l’application.

Chaque écran représente une page (screen) avec son propre contenu.

Flutter fournit un système de navigation simple et puissant, basé sur des

routes et une pile de navigation, gérée par le widget Navigator.

70
 06. Navigation et routage dans Flutter

6.1 Principes fondamentaux de la navigation

❖ Notion d’écran (screen/page) et de pile de navigation

Dans Flutter, un écran (ou page) est généralement un widget (souvent

avec Scaffold) qui représente une vue complète de l’application.

La navigation fonctionne comme une pile (stack) :

▪ le premier écran est au bas de la pile,

▪ chaque nouvelle page est ajoutée au-dessus,

▪ quand on revient en arrière, la page du dessus est retirée.

Exemple logique :
1. Écran Accueil

2. Écran Détails (empilé au-dessus)

3. Retour → on enlève Écran Détails

71
 06. Navigation et routage dans Flutter

6.1 Principes fondamentaux de la navigation

❖ Concept de routes dans Flutter

Une route représente un chemin vers un écran.

Dans Flutter, une route peut être :

▪ une route directe (widget passé directement),

▪ une route nommée (identifiée par une chaîne de caractères).

Les routes permettent :

▪ d’organiser la navigation,
▪ de rendre le code plus clair,

▪ de centraliser la gestion des écrans.

Chaque route correspond généralement à un écran.

72
 06. Navigation et routage dans Flutter

6.1 Principes fondamentaux de la navigation

❖ Rôle du widget Navigator

Navigator est le widget responsable de la gestion de la navigation dans

Flutter. Il permet de :

▪ ouvrir un nouvel écran (push),

▪ revenir à l’écran précédent (pop),

▪ remplacer un écran,

▪ gérer la pile de navigation.

Navigator agit comme un gestionnaire de pages, en ajoutant ou supprimant

des routes dans la pile.

Sans Navigator, il est impossible de naviguer entre les écrans.

73
 06. Navigation et routage dans Flutter

6.2 Routage structuré et organisation multi-écrans

Cette partie concerne la navigation structurée dans les applications Flutter qui
contiennent plusieurs écrans.
Au lieu de naviguer directement vers un widget, on utilise des routes nommées,
ce qui rend l’application plus organisée, lisible et maintenable.
❖ Routes nommées (Named Routes)
Une route nommée est une route identifiée par un nom (chaîne de
caractères), par exemple :"/", "/login", "/profile".
Ces routes sont généralement définies dans MaterialApp. Les routes nommées
permettent :
▪ une navigation plus claire,
▪ d’éviter la duplication de code,
▪ de centraliser la gestion des écrans.
La navigation se fait ensuite avec [Link]() et [Link]().

74
 06. Navigation et routage dans Flutter

6.2 Routage structuré et organisation multi-écrans

❖ Organisation de la navigation dans une application multi-écrans

Dans une application avec plusieurs écrans, les routes nommées permettent :

▪ de structurer l’application,

▪ de séparer chaque écran dans un fichier dédié,

▪ de gérer facilement le point d’entrée (initialRoute).

Cette organisation est idéale pour :

▪ applications moyennes et grandes,

▪ projets professionnels,

▪ travail en équipe.

75
 06. Navigation et routage dans Flutter

6.2 Routage structuré et organisation multi-écrans

❖ Exemple complet : Routes nommées + passage de données vers Profile (named routes)

class HomePage extends StatelessWidget {

const HomePage({[Link]});
class MyApp extends StatelessWidget {
@override
const MyApp({[Link]});
Widget build(BuildContext context) {
return Scaffold(
@override appBar: AppBar(title: const Text("Home")),
Widget build(BuildContext context) { body: Center(
return MaterialApp( child: ElevatedButton(
debugShowCheckedModeBanner: false, onPressed: () {
initialRoute: "/", [Link](
routes: { context,
"/profile",
"/": (context) => const HomePage(),
arguments: "Yassine", );
"/profile": (context) => const ProfilePage(),
},
}, child: const Text("Aller au profil"),
); ),
} ),
} );
}
}

76
 06. Navigation et routage dans Flutter

6.2 Routage structuré et organisation multi-écrans

❖ Exemple complet : Routes nommées + passage de données vers Profile (named routes)

class ProfilePage extends StatelessWidget {

const ProfilePage({[Link]});

@override
Widget build(BuildContext context) {
final name = [Link](context)!.[Link] as String;//recevoir donnée

return Scaffold(
appBar: AppBar(
title: Text("Profil de $name"),
leading: IconButton(
onPressed: () => [Link](context), // bouton retour
icon: const Icon(Icons.arrow_back),
tooltip: "Retour",
),
),
body: Center(
child: Text("Bienvenue $name"),
),
);
}
} 77
Travaux Pratiques : Écran Login + Navigation + Validation
❑ Objectif du TP ❑ LoginScreen – Validation
▪ Mettre en place un formulaire de ▪ Email obligatoire
connexion avec validation ▪ Mot de passe obligatoire
▪ Implémenter la navigation entre deux ▪ La case « J’accepte les termes et
écrans conditions » doit être cochée
▪ Transmettre des données entre écrans ▪ Si la case n’est pas cochée :
▪ Afficher un message (ex. SnackBar)
❑ Écrans à réaliser ▪ Message : « Vous devez accepter»
▪ LoginScreen
▪ Logo ❑ Navigation
▪ Texte « Welcome » ▪ Si toutes les validations sont correctes :
▪ Formulaire de connexion ▪ Naviguer vers InfoScreen
▪ Bouton Login ▪ Utiliser une route nommée
▪ InfoScreen (pushNamed)
▪ Affichage des informations ▪ Données à transmettre :
saisies ▪ Email
▪ Bouton Back ▪ Mot de passe
▪ Accepté (true / false)
❑ LoginScreen – Contenu
▪ Logo (Icon ou Image) ❑ InfoScreen – Contenu
▪ Texte « Welcome » ▪ Afficher :
▪ Formulaire contenant : ▪ Email
▪ Champ Email ▪ Mot de passe
▪ Champ Mot de passe (masqué) ▪ Texte « Accepté : Oui / Non »
▪ Case à cocher « J’accepte les ▪ En bas de l’écran :
termes et conditions » ▪ Bouton pour revenir à l’écran
▪ Bouton Login précédent
Travaux Pratiques : Écran Login + Navigation + Validation
Merci
 Master : Ingénierie Techno-pédagogique
et Innovation

DÉVELOPPEMENT APPLICATIONS
MOBILE-LEARNING :
Accès aux données MySQL dans
Flutter via une API REST en PHP

Prof. Mohamed DAOUDI

Année universitaire : 2025/2026

Plan
01. Architecture client–serveur des applications mobiles

02. Notion d’API Web et communication applicative

03. APIs REST et opérations sur les données

04. Protocole HTTP et échanges client–serveur

05. Format JSON et échange de données

06. Backend PHP et accès sécurisé à MySQL

07. Sécurité et organisation d’une API PHP

08. Exemple pratique d’intégration de Flutter avec MySQL

01. Architecture client–serveur des applications mobiles

Architecture client–serveur

Les applications mobiles modernes reposent sur une architecture

client–serveur. Ce modèle permet de séparer l’interface utilisateur, la
logique applicative et le stockage des données, tout en assurant une
communication standardisée via le protocole HTTP.

Dans cette architecture:

▪ Le client et le serveur sont deux entités distinctes

▪ La communication se fait via des requêtes HTTP/HTTPS

▪ Les données ne sont jamais stockées directement sur le client

3
 01. Architecture client–serveur des applications mobiles

Rôle de l’application cliente Flutter

Flutter est responsable de l’affichage de l’interface utilisateur et de

l’interaction avec l’utilisateur, tout en déléguant le traitement des
données au serveur backend.

Rôles de l’application cliente Flutter:

▪ Affichage de l’interface utilisateur (UI)

▪ Récupération des actions de l’utilisateur

▪ Envoi de requêtes HTTP vers l’API

▪ Traitement des réponses au format JSON

▪ Aucun accès direct à la base de données distante n’est autorisé

4
 01. Architecture client–serveur des applications mobiles

Rôle du serveur backend (API PHP)

Le serveur backend, sous forme d’une API REST en PHP par exemple,
assure le lien entre l’application Flutter et la base de données. Il centralise
la logique métier, contrôle l’accès aux données et garantit la sécurité des
échanges.

Rôles du serveur backend:

▪ Réception des requêtes HTTP du client

▪ Validation et traitement des données

▪ Exécution de la logique métier

▪ Communication avec la base MySQL

▪ Génération de réponses JSON

5
01. Architecture client–serveur des applications mobiles

Rôle de MySQL et séparation client–serveur

MySQL constitue la couche de stockage de l’architecture. Le principe

de séparation client–serveur impose que la base de données soit
accessible uniquement par le backend afin de garantir la sécurité et
la cohérence des données.
Flutter ne se connecte jamais directement à une base de données
MySQL pour des raisons de sécurité et d’architecture. Toutes les
opérations passent obligatoirement par une API serveur, qui fait
l’intermédiaire entre l’application Flutter et la base de données.

6
 02. Notion d’API Web et communication applicative

Une API Web (Application Programming Interface) permet à des applications

différentes de communiquer entre elles via Internet.
Dans une architecture moderne, l’API joue le rôle d’intermédiaire sécurisé
entre l’application cliente (ex. Flutter) et la base de données, en exposant
des services clairement définis.
▪ Définition et objectifs d’une API Web : fournir des services accessibles à
distance, indépendants de la technologie cliente
▪ API comme intermédiaire : le client envoie des requêtes, l’API traite la
logique métier et accède à la base de données
▪ Endpoints et URLs : chaque service est identifié par une URL précise (ex.
/login, /users, /products)
▪ Échanges de données : les informations sont transmises via des formats
standardisés, principalement JSON

7
 03. APIs REST et opérations sur les données
Principe et contraintes du style REST
REST (Representational State Transfer) est un style architectural utilisé pour concevoir
des APIs Web modernes. Il repose sur le protocole HTTP et définit un ensemble de
contraintes permettant d’assurer une communication simple, cohérente et évolutive
entre un client (Flutter) et un serveur (API PHP).
Les principales caractéristiques du style REST sont les suivantes :
▪ La communication est stateless, chaque requête est indépendante et complète
▪ Basée sur des ressources (users, products, etc.)
▪ Chaque ressource a une URL claire
▪ Les méthodes HTTP ont un vrai sens
▪ Réponses standardisées (souvent JSON)

8
 03. APIs REST et opérations sur les données

Principe et contraintes du style REST

Exemple:
GET /users → lire les utilisateurs
POST /users → ajouter un utilisateur
PUT /users/1 → modifier l’utilisateur 1
DELETE /users/1 → supprimer l’utilisateur 1

9
 03. APIs REST et opérations sur les données

Notion de ressources dans une API REST

Dans une API REST, les données manipulées par l’application sont
appelées ressources. Une ressource correspond à une entité métier du
système et constitue l’élément central autour duquel l’API est
construite.

Les ressources d’une API REST se caractérisent par :

▪ La représentation d’entités logiques telles que des utilisateurs,

produits, etc.

▪ Une identification unique via des URLs explicites et lisibles

10
 03. APIs REST et opérations sur les données

Opérations CRUD sur les données

Les interactions avec les ressources dans une API REST reposent sur les
opérations CRUD, qui représentent les actions fondamentales
appliquées aux données stockées dans une base de données. Ces
opérations permettent au client de gérer les données sans accéder
directement à la base.

Les opérations CRUD regroupent les actions suivantes :

▪ Create, Read, Update et Delete

▪ Une gestion complète du cycle de vie des données via l’API

11
 03. APIs REST et opérations sur les données

Correspondance entre méthodes HTTP et actions CRUD

Dans une API REST, chaque opération CRUD est associée à une
méthode HTTP spécifique. Cette correspondance permet de rendre l’API
claire, intuitive et facile à maintenir, tout en conservant des URLs stables.

La relation entre méthodes HTTP et opérations sur les données est la

suivante :

▪ GET, POST, PUT/PATCH et DELETE correspondent respectivement aux

actions CRUD

▪ Le changement de méthode HTTP permet d’indiquer l’action à

effectuer sur une ressource

12
 04. Protocole HTTP et échanges client–serveur

Fonctionnement du protocole HTTP

Le protocole HTTP (HyperText Transfer Protocol) est le mécanisme de

communication utilisé entre une application cliente et un serveur. Dans
une architecture client–serveur, HTTP permet au client d’envoyer des
requêtes au serveur et de recevoir des réponses, sans conserver d’état
entre deux échanges.

Le fonctionnement général du protocole HTTP repose sur les éléments

suivants :

▪ Le client initie toujours la communication en envoyant une requête

▪ Le serveur traite la requête et renvoie une réponse correspondante

13
 04. Protocole HTTP et échanges client–serveur
Structure d’une requête HTTP

Une requête HTTP est le message envoyé par le client (Flutter) vers le serveur (API
PHP) afin de demander une action précise. Elle contient toutes les informations
nécessaires au serveur pour comprendre et traiter la demande.

Une requête HTTP est composée des éléments suivants :

▪ L’URL qui identifie la ressource ciblée

▪ La méthode HTTP (GET, POST, PUT, DELETE…)

▪ Les headers qui transportent des informations supplémentaires

▪ Le body qui contient les données envoyées au serveur (le cas échéant)

Remarque : dans la pratique, certains frameworks / langages / hébergements

(ou certaines configurations serveur) ne gèrent pas toujours PUT, PATCH et
DELETE directement ; on utilise alors souvent GET et POST uniquement

14
 04. Protocole HTTP et échanges client–serveur
Structure d’une requête HTTP

Exemple:
Objectif : ajouter un utilisateur depuis Flutter vers une API PHP.
POST [Link]
Méthode HTTP
POST → ajouter une donnée
URL
/users → ressource ciblée
▪ Headers
Content-Type: application/json
▪ Body
{
"name": "Ahmed",
"email": "ahmed@[Link]"
15
}
 04. Protocole HTTP et échanges client–serveur

Structure d’une réponse HTTP

Une réponse HTTP est le message retourné par le serveur au client après
le traitement d’une requête. Elle informe le client du résultat de
l’opération demandée et peut contenir des données à exploiter par
l’application Flutter.

Une réponse HTTP comprend généralement les éléments suivants :

▪ Un code de statut indiquant le résultat de la requête

▪ Des headers décrivant le type de contenu retourné

▪ Un body contenant les données, souvent au format JSON

16
 04. Protocole HTTP et échanges client–serveur

Structure d’une réponse HTTP

Exemple simple de réponse HTTP

▪ Contexte : le serveur API PHP répond à une requête envoyée par Flutter.

HTTP/1.1 200 OK

▪ Code de statut

200 OK → la requête a été traitée avec succès

▪ Headers

Content-Type: application/json

▪ Body

"success": true,

"message": "Utilisateur ajouté avec succès"

} 17
 04. Protocole HTTP et échanges client–serveur

Codes de statut HTTP et gestion des erreurs

Les codes de statut HTTP permettent d’indiquer clairement au client si

une requête a été traitée avec succès ou si une erreur s’est produite. Ils
jouent un rôle essentiel dans la gestion des erreurs côté client et serveur.

Les principales catégories de codes de statut HTTP sont les suivantes :

▪ Codes 2xx : succès de la requête (200 OK, 201 Created)

▪ Codes 4xx : erreurs côté client (400 Bad Request, 401 Unauthorized,
404 Not Found)

▪ Codes 5xx : erreurs côté serveur (500 Internal Server Error)

18
 05. Format JSON et échange de données

Rôle du format JSON dans les APIs

Le format JSON (JavaScript Object Notation) est le format d’échange de

données le plus utilisé dans les APIs Web. Il permet de transmettre des
informations de manière légère, structurée et lisible entre un serveur
backend et une application cliente, indépendamment du langage utilisé.

Dans le contexte des APIs, le format JSON joue les rôles suivants :

▪ Il standardise les échanges de données entre le client et le serveur

▪ Il est nativement supporté par PHP côté serveur et par Flutter côté client

19
 05. Format JSON et échange de données

Structure des objets et tableaux JSON

Les données en JSON sont organisées sous forme d’objets et de

tableaux, ce qui permet de représenter des informations simples ou
complexes. Cette structure facilite la transmission de listes de données
et d’objets imbriqués dans les réponses d’une API.

La structure JSON repose principalement sur :

▪ Des paires clé–valeur pour représenter les objets

▪ Des tableaux pour représenter des collections d’objets

20
 05. Format JSON et échange de données

Structure des objets et tableaux JSON

Exemple:
{
"name": "Ali",
"email": "ali@[Link]"
}
Exemple réponse API par PHP:
{
"success": true,
"message": "Étudiant créé avec succès",
"data": { "id": 10, "name": "Ali", "email": "ali@[Link]" }
}

21
 05. Format JSON et échange de données

Sérialisation des données côté PHP

La sérialisation consiste à convertir des données issues de la base

de données ou des structures PHP en un format JSON transmissible
au client. Dans une API PHP, cette étape est essentielle pour
renvoyer des réponses exploitables par l’application Flutter.

La sérialisation côté PHP implique généralement :

▪ La récupération des données depuis MySQL

▪ La transformation des données PHP en JSON avant l’envoi de la

réponse

22
 05. Format JSON et échange de données

Désérialisation et exploitation des données côté Flutter

La désérialisation correspond à l’opération inverse de la sérialisation.

Elle permet à l’application Flutter de transformer les données JSON
reçues de l’API en objets Dart exploitables pour l’affichage et la
logique applicative.

Le traitement des données JSON côté Flutter repose sur :

▪ La conversion du JSON en objets ou listes Dart

▪ L’utilisation des données pour mettre à jour l’interface utilisateur

23
 06. Backend PHP et accès sécurisé à MySQL

Rôle du backend PHP dans une API

Le backend PHP constitue le cœur de l’API. Il est exécuté côté serveur et

assure le traitement des requêtes envoyées par l’application Flutter. Il
centralise la logique métier, contrôle l’accès aux données et garantit la
cohérence et la sécurité des échanges entre le client et la base de
données.

Le backend PHP intervient principalement pour :

▪ Recevoir et traiter les requêtes HTTP provenant du client

▪ Appliquer la logique métier et générer des réponses au format JSON

24
 06. Backend PHP et accès sécurisé à MySQL

Connexion à la base de données MySQL

La connexion à la base de données MySQL est réalisée exclusivement

côté serveur, via le backend PHP. Cette approche empêche tout
accès direct à la base depuis l’application mobile et permet de
protéger les informations sensibles comme les identifiants de
connexion.

La connexion à MySQL repose sur les principes suivants :

▪ La base de données n’est accessible que par le serveur backend

▪ Les paramètres de connexion sont stockés et protégés côté serveur

25
 06. Backend PHP et accès sécurisé à MySQL

Utilisation de PDO et requêtes préparées

PDO (PHP Data Objects) est une interface standard permettant à PHP
de communiquer avec différentes bases de données, dont MySQL.
Elle favorise un accès sécurisé et structuré aux données, notamment
grâce à l’utilisation des requêtes préparées.

L’utilisation de PDO permet notamment :

▪ Une gestion sécurisée et uniforme des accès à la base de données

▪ L’exécution de requêtes préparées avec paramètres liés

26
 06. Backend PHP et accès sécurisé à MySQL

Protection contre l’injection SQL

L’injection SQL est une attaque qui consiste à insérer du code SQL
malveillant dans une requête afin d’accéder ou de modifier des données
de manière illégitime. La sécurisation du backend PHP est donc
indispensable pour protéger la base MySQL.

La protection contre l’injection SQL repose sur :

▪ L’utilisation systématique des requêtes préparées

▪ La validation et le filtrage des données reçues du client

27
 07. Sécurité et organisation d’une API PHP
Principes de sécurité des APIs Web

La sécurité est un aspect fondamental dans la conception des APIs Web,

car celles-ci exposent des points d’accès aux données et aux services. Une
API mal sécurisée peut entraîner des accès non autorisés, des fuites de
données ou des attaques sur le serveur.

Les principes de base de la sécurité des APIs Web incluent :

▪ La limitation de l’accès aux ressources via des règles de sécurité strictes

▪ La protection des échanges de données entre le client et le serveur

28
 07. Sécurité et organisation d’une API PHP

Authentification et contrôle d’accès

L’authentification permet de vérifier l’identité d’un utilisateur ou d’une
application avant d’autoriser l’accès à une API. Le contrôle d’accès
définit ensuite les actions que cet utilisateur est autorisé à effectuer sur
les ressources de l’API.

Les mécanismes d’authentification et de contrôle d’accès reposent

généralement sur :

▪ L’utilisation de jetons d’accès (tokens) transmis avec les requêtes

▪ La vérification des droits d’accès avant l’exécution des opérations

29
 07. Sécurité et organisation d’une API PHP

Validation des données côté serveur

La validation des données est une étape essentielle pour garantir la

fiabilité et la sécurité d’une API. Même si des contrôles sont effectués

côté client, le serveur doit toujours vérifier les données reçues avant de

les traiter ou de les enregistrer en base de données.

La validation côté serveur consiste notamment à :

▪ Vérifier le format, le type et la cohérence des données reçues

▪ Rejeter toute donnée invalide ou potentiellement dangereuse

30
 07. Sécurité et organisation d’une API PHP

Organisation et structuration d’une API PHP

Une bonne organisation du code est indispensable pour assurer la

maintenabilité et l’évolutivité d’une API PHP. Une API bien structurée

facilite la compréhension du projet, la correction des erreurs et l’ajout de

nouvelles fonctionnalités.

L’organisation d’une API PHP repose généralement sur :

▪ Une séparation claire entre configuration, logique métier et accès aux

données

▪ Une structuration du projet en dossiers et fichiers spécialisés

31
Exemple pratique d’intégration de Flutter avec MySQL

Ce travail pratique a pour objectif de mettre en œuvre une

communication client–serveur entre une application Flutter et une

base de données MySQL via une API PHP. Les étudiants mettront en

place un serveur local, créeront une API REST simple de type CRUD et

configureront les échanges HTTP. Le TP aborde également les aspects

réseau nécessaires à la communication entre l’émulateur et le serveur

local. Enfin, les données récupérées depuis l’API seront affichées

dynamiquement dans l’interface Flutter.

32
 Exemple pratique d’intégration de Flutter avec MySQL
Étape 1 : Préparation du Backend (WAMP/XAMPP)

Cette étape vise à établir l’infrastructure nécessaire permettant à l’application

Flutter de communiquer avec la base de données.

Base de données : Via PHPMyAdmin, créez une base ecole_db et une table students
(id, nom, email).
Création du dossier : Dans C:\wamp64\www\, créez un dossier nommé api_student.
Votre dossier C:\wamp64\www\api_student\ doit ressembler à ceci :
❑ Fichier de configuration et connexion ([Link]) :
Ce fichier centralise la sécurité (CORS) et la connexion à MySQL via PDO (plus
sécurisé que mysqli).
CORS signifie Cross-Origin Resource Sharing (Partage de ressources entre
origines multiples).
Par défaut, pour des raisons de sécurité, les navigateurs et les systèmes mobiles
bloquent les requêtes HTTP faites vers un domaine (ou une adresse IP) différent
de celui où l'application se trouve.
33
 Exemple pratique d’intégration de Flutter avec MySQL

L'origine est définie par : le Protocole (http/https) + le Domaine (ou IP) + le Port.
Le problème : Votre application Flutter (qui tourne sur un téléphone ou un
émulateur) tente d'accéder à un serveur (votre PC avec l'IP 192.168.x.x).
Comme ce ne sont pas les mêmes "origines", le serveur PHP rejette la requête
par sécurité s'il n'est pas configuré pour l'accepter.

header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Headers: Content-Type, Authorization");
header("Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS");

34
 Exemple pratique d’intégration de Flutter avec MySQL

❑ Le fichier de l'API (CRUD) [Link]

Le fichier [Link] reçoit toutes les demandes de Flutter, analyse ce qu'on lui
demande de faire, et interagit avec la base de données.
Pour que l'API fonctionne, elle doit récupérer des informations provenant de
deux endroits différents de la requête HTTP envoyée par Flutter :
▪ L'utilisation de $_GET (Données dans l'URL)
On utilise $_GET pour les informations qui servent à piloter la requête.
Elles sont visibles dans l'adresse URL après le point d'interrogation (?).
Exemple d'URL générée par Flutter : [Link]?action=delete&id=10
▪ L'utilisation de $_POST (Données du formulaire)
On utilise $_POST pour les données contenues dans le corps de la
requête. Ces données sont invisibles dans l'URL, ce qui est plus propre et
sécurisé pour le texte.

35
 Exemple pratique d’intégration de Flutter avec MySQL
<?php
// 1. Récupération des paramètres de l'URL (GET)
$action = $_GET['action'] ?? '';
switch($action) {
case 'read':
// le code
break;
case 'create':
// le code
break;
case 'update':
// le code
break;
case 'delete':
// le code
break;
default:
echo json_encode(["error" => "Action inconnue"]);
break;
}
?>

36
 Exemple pratique d’intégration de Flutter avec MySQL

Comment appeler l'API

1. Lister (READ)
URL : [Link]
Méthode : GET
2. Ajouter (CREATE)
URL : [Link]
Méthode : POST
Body : {"nom": "Ali", "email": "ali@[Link]"}
3. Modifier (UPDATE)
URL : [Link]
Méthode : POST
Body : {"nom": "Ali Nouveau", "email": "ali_new@[Link]"}
4. Supprimer (DELETE)
URL : [Link]
Méthode : GET (ou POST)
Body : Vide

37
 Exemple pratique d’intégration de Flutter avec MySQL

Étape 2 : Configuration Réseau (L'étape critique)

• Le problème : Pour l'émulateur Android, localhost désigne
l'émulateur lui-même, pas votre PC.
• La solution :
1. Trouver l'IP locale du PC (Commande ipconfig dans le terminal,
ex: [Link]).
2. Dans Flutter, l'URL sera :
[Link]
1. Pare-feu : Assurez-vous que le pare-feu Windows autorise les
connexions entrantes sur le port 80 (Apache) ou désactivez
temporairement le pare-feu si nécessaire.

38
 Exemple pratique d’intégration de Flutter avec MySQL
Étape 3 : Configuration de Flutter
Avant d’écrire le code (GET/POST…), il faut préparer le projet pour qu’il puisse
envoyer et recevoir des requêtes réseau (HTTP) vers votre API PHP/MySQL.
Dépendance : Ajoutez http: ^1.1.0 (ou version récente) dans le fichier
[Link].
1. Ajouter la dépendance http (bibliothèque réseau)
Flutter n’envoie pas des requêtes HTTP “tout seul”.
On ajoute donc un package (une librairie) qui fournit des fonctions prêtes :
get(), post(), etc.
Dans le fichier [Link] (à la racine du projet), dans la partie
dependencies.
dependencies:
flutter:
sdk: flutter
http: ^1.1.0 39
 Exemple pratique d’intégration de Flutter avec MySQL
Étape 3 : Configuration de Flutter
2. Donner la permission Internet à Android (obligatoire)
Même si votre code est correct, Android peut bloquer l’accès Internet si la
permission n’est pas déclarée.
Dans : android/app/src/main/[Link]
Juste avant la balise <application>, mettez :
<uses-permission android:name="[Link]" />
À partir d’Android 9 (API 28), Android bloque par défaut le HTTP non sécurisé.
Donc si votre API est comme ça : [Link]
Elle peut être bloquée (même si Internet permission est OK).
Solution
Dans la balise <application>, ajoutez : android:usesCleartextTraffic="true"
Résultat : Android accepte les appels HTTP (non sécurisés), mais en
production, on privilégie l’utilisation de HTTPS.
40
 Exemple pratique d’intégration de Flutter avec MySQL
Étape 4 : Envoi des Requêtes (GET & POST)
A. Requête GET (Récupérer)
On utilise [Link]. La réponse doit être décodée.
var response = await
[Link]([Link]("[Link]
var data = [Link]([Link]);

B. Requête POST (Envoyer)

Pour envoyer des données (ex: ajouter un étudiant), on utilise le body.
var response = await
[Link]([Link]("[Link] "),
body: {
"nom": [Link],
"email": [Link],
},
41
);
 Exemple pratique d’intégration de Flutter avec MySQL

Étape 5 : Affichage Dynamique (FutureBuilder)

Pour l'interface, utiliser le widget FutureBuilder. C'est le moyen le

plus propre pour :

1. Afficher un chargement (CircularProgressIndicator) pendant

que PHP répond.

2. Afficher une erreur si l'IP est mauvaise.

3. Afficher la liste ([Link]) une fois les données reçues.

42
Merci
 Master : Ingénierie Techno-pédagogique
et Innovation

DÉVELOPPEMENT APPLICATIONS
MOBILE-LEARNING :
Déploiement Android : Finaliser et Publier
votre Application sur le Play Store

Prof. Mohamed DAOUDI

Année universitaire : 2025/2026

Plan
01. Finalisation technique de l’application Flutter

02. Création et validation du compte développeur

03. Mise en ligne et processus de validation

 01. Finalisation technique de l’application Flutter

Le déploiement est la phase de transition où votre projet devient un

produit fini prêt pour le marché. Pour réussir cette étape, vous devez suivre
un processus rigoureux :

▪ Finalisation Technique : Définir l’identité unique de votre application

(logo, nom officiel et Package ID) et préparer le fichier .aab signé.

▪ Publier sur Google Play : Configurer la fiche du store, valider l'identité du

développeur et soumettre l'application pour l'examen final par les
équipes de Google.

3
 01. Finalisation technique de l’application Flutter

Configuration de l'Identité de l'App (Package Name)

Le Package Name (ou Application ID) est l'identifiant unique de

votre application sur le Play Store (ex: com.votre_nom.nom_app).

Modification manuelle : Vous devez modifier cet identifiant dans :

▪ android/app/[Link] (ligne applicationId).

▪ [Link] (les fichiers dans main, debug et profile).

▪ La structure des dossiers Java/Kotlin (MainActivity).

Méthode rapide (recommandée) : Utiliser le package

change_app_package_name.

flutter pub add dev:change_app_package_name

dart run change_app_package_name:main [Link]

4
 01. Finalisation technique de l’application Flutter
Changer le nom de l’application Flutter (App Name)

Le nom de l’application est le texte affiché sous l’icône de l’application sur

le téléphone de l’utilisateur. Ce nom peut être différent du package name
(identifiant technique).

Changement du nom de l’application sous Android

Le nom de l’application est défini directement dans le fichier

[Link] (android/app/src/main/[Link] )à l’aide
de l’attribut android:label.

Exemple :

<application

android:label="Fse App"

Dans cet exemple, le texte “ Fse App ” correspond exactement au nom

affiché sous l’icône de l’application sur le téléphone Android.
5
 01. Finalisation technique de l’application Flutter
Personnalisation de l'Icône de l'Application
L'icône par défaut de Flutter doit être remplacée avant toute publication.
Utilisation du package flutter_launcher_icons
flutter pub add flutter_launcher_icons --dev
1. Ajoutez une image haute résolution (1024x1024) dans un dossier assets/icon/.
2. Configurez le fichier [Link] :
dev_dependencies:
flutter_launcher_icons: ^0.13.1
flutter_launcher_icons:
android: "launcher_icon"
ios: true
image_path: "assets/icon/app_icon.png"
adaptive_icon_background: "#FFFFFF" # Pour les icônes Android modernes
adaptive_icon_foreground: "assets/icon/app_icon_fg.png"
3. Générez les icônes :
flutter pub get
flutter pub run flutter_launcher_icons
Cette commande crée automatiquement les dossiers d'images dans les répertoires
6
natifs : android/app/src/main/res et ios/Runner/[Link].
 01. Finalisation technique de l’application Flutter

Signature de l'application (Signing the App)

Étape 1 : Créer un Keystore (Signature de l'application)

Android exige que toutes les applications soient signées numériquement

avant d'être téléchargées sur le Store. Le Keystore est un fichier binaire

sécurisé qui contient votre clé privée d'autentification.

Attention : Ce fichier est vital pour votre application. Si vous le perdez ou si

vous oubliez le mot de passe, vous ne pourrez plus jamais mettre à jour votre

application sur le Google Play Store. Sauvegardez-le précieusement (sur un

Cloud privé ou un disque externe).

7
 01. Finalisation technique de l’application Flutter
Signature de l'application (Signing the App)

A. Générer la clé

Ouvrez votre terminal et tapez la commande suivante selon votre système :

▪ Windows :
keytool -genkey -v -keystore $env:USERPROFILE\[Link] -storetype JKS
-keyalg RSA -keysize 2048 -validity 10000 -alias upload

▪ Mac/Linux :
keytool -genkey -v -keystore ~/[Link] -storetype RSA -keysize 2048 -
validity 10000 -alias upload

On vous demandera un mot de passe. Notez-le bien, il est indispensable pour

chaque mise à jour.

8
 01. Finalisation technique de l’application Flutter

Signature de l'application (Signing the App)

B. Localiser et déplacer le fichier

Une fois la commande terminée, le fichier nommé [Link] est

créé à la racine de votre dossier utilisateur :

▪ Chemin Windows : C:\Utilisateurs\votre-nom\[Link]

▪ Chemin Mac/Linux : /Users/votre-nom/[Link]

Copiez le fichier [Link] dans le dossier android/app/ de votre

projet pour permettre à Flutter de le localiser automatiquement lors de la
compilation finale.

9
 01. Finalisation technique de l’application Flutter

Signature de l'application (Signing the App)

Étape 2 : Configurer Flutter pour utiliser la clé

Maintenant que vous avez généré votre clé de signature, vous devez
indiquer à Flutter comment l'utiliser pour signer votre application
automatiquement.

A. Création du fichier de configuration

Allez dans le dossier android/ (à la racine de votre projet Flutter) et

créez un nouveau fichier texte nommé [Link].

10
 01. Finalisation technique de l’application Flutter

Signature de l'application (Signing the App)

B. Remplir les informations
Copiez et collez les lignes suivantes dans le fichier, puis adaptez-les :
storePassword=VOTRE_MOT_DE_PASSE
keyPassword=VOTRE_MOT_DE_PASSE
keyAlias=upload
storeFile=[Link]

Mots de passe : Les valeurs de storePassword et keyPassword doivent être

exactement les mêmes que celles que vous avez saisies dans le terminal lors de la
création du fichier Keystore à l'étape 1.
Chemin du fichier (storeFile) : Puisque nous avons déplacé le fichier upload-
[Link] directement dans le dossier android/app/, il suffit d'écrire simplement le
nom du fichier : [Link]. Flutter le cherchera par défaut dans ce dossier.

11
 01. Finalisation technique de l’application Flutter

Signature de l'application (Signing the App)

Étape 3: Modifier le [Link]

Il faut maintenant dire au système de compilation d'Android (Gradle) d'aller

lire les informations dans votre fichier [Link].

Allez dans le dossier android/app/ et ouvrez le fichier [Link].

Attention : Ne confondez pas avec le fichier [Link] qui se trouve

directement à la racine du dossier android/. Nous travaillons bien dans
android/app/[Link].

Ajoutez ce bloc de code

import [Link]

import [Link]

12
 01. Finalisation technique de l’application Flutter

Signature de l'application (Signing the App)

Ajoutez le bloc suivant juste avant la section android { ... } :

val keystoreProperties = Properties()
val keystorePropertiesFile = [Link]("[Link]")
if ([Link]()) {
FileInputStream(keystorePropertiesFile).use {
[Link](it)
}
}

13
 01. Finalisation technique de l’application Flutter
Signature de l'application (Signing the App)
Cherchez le bloc android { ... } et modifiez-le pour ajouter à l’intérieur la
configuration signingConfigs comme ceci :
signingConfigs { // ajouter
create("release") {
keyAlias = keystoreProperties["keyAlias"] as String?
keyPassword = keystoreProperties["keyPassword"] as String?
val storeFilePath = keystoreProperties["storeFile"] as String?
storeFile = storeFilePath?.let { file(it) }
storePassword = keystoreProperties["storePassword"] as String?
}
}
buildTypes { // modifier
getByName("release") {
signingConfig = [Link]("release")
}
}
14
 01. Finalisation technique de l’application Flutter

Génération du bundle (.aab)

Jusqu'à présent, pour tester votre application, vous utilisiez probablement

des versions de débogage (Debug). Pour le Play Store, nous utilisons le
format Android App Bundle (.aab).

Pourquoi le format .AAB et pas .APK ?

Le format .aab est le nouveau standard de Google. Contrairement à l'APK

qui contient toutes les ressources pour tous les types de téléphones, l'AAB
permet à Google Play de générer un APK optimisé et plus léger, spécifique
à chaque appareil utilisateur (gain de place considérable).

15
 01. Finalisation technique de l’application Flutter

Génération du bundle (.aab)

A. Nettoyer le projet
Avant de compiler, il est fortement conseillé de nettoyer les anciens fichiers
temporaires pour éviter les erreurs :
flutter clean
flutter pub get
B. Lancer la compilation finale
Tapez l’un des deux commandes suivantes dans votre terminal :
▪ flutter build appbundle
▪ flutter build apk
Une fois la compilation terminée (cela peut prendre 1 à 2 minutes), Flutter vous
indiquera le chemin du fichier. Vous le trouverez ici :
[Votre_Projet]/build/app/outputs/bundle/release/[Link]
Gardez ce fichier précieusement : il sera indispensable lors de la prochaine étape
pour l'importer sur la Google Play Console, que ce soit pour vos phases de test ou
pour la mise en production finale.
Maintenant que la finalisation technique est terminée, la prochaine étape consiste à
configurer la fiche de l'application sur la Google Play Console pour son déploiement. 16
 02. Création et validation du compte développeur

Création et Vérification du Compte

Inscrivez-vous sur la Google Play Console pour obtenir votre licence de publication.
Ce compte est obligatoire pour importer votre fichier et rendre votre application
disponible sur le store.

En 2026, la distinction entre les types de comptes et les preuves d'identité est
devenue extrêmement précise.

A. Choix du Type de Compte : Personnel vs Organisation

▪ Compte Personnel : Réservé aux particuliers (étudiants, passionnés).
▪ Affichage public : Seul votre nom de développeur est visible sur le Store.
▪ Contrainte : Obligation de passer par la phase de test de 14 jours avec 12
testeurs.
▪ Compte Organisation : Pour les entreprises, associations ou gouvernements.
▪ Affichage public : Votre nom légal, adresse complète, numéro de téléphone et
site web sont affichés sur la fiche de l'application.
▪ Prérequis : Vous devez posséder un numéro D-U-N-S (un identifiant international
fourni par Dun & Bradstreet) pour valider l'existence légale de l'entreprise.

17
 02. Création et validation du compte développeur
Création et Vérification du Compte

B. Le Processus de Vérification d'Identité

Vous devez prouver qui vous êtes :

▪ Documents acceptés : Passeport, carte nationale d'identité ou permis de

conduire en cours de validité. Le document doit être scanné en couleur (les
photocopies noir et blanc ou les fichiers flous sont systématiquement
rejetés).

▪ Vérification de l'adresse : Google peut demander un justificatif de domicile

(facture d'électricité, relevé bancaire) si l'adresse sur votre pièce d'identité
ne correspond pas à celle de votre profil de paiement.

▪ Validation de l'appareil (Nouveauté) : Pour les nouveaux comptes, Google

demande souvent de valider un appareil Android physique via l'application
"Play Console" pour s'assurer que vous disposez du matériel nécessaire pour
tester vos apps. 18
 02. Création et validation du compte développeur

Création et Vérification du Compte

C. Délais et Validation du Profil de Paiement

▪ Le paiement des 25 $ doit être effectué avec une carte de crédit/débit

acceptant les transactions internationales.

▪ Une fois payé, le compte reste en état "En cours de vérification". Tant que
vos documents d'identité n'ont pas été validés par une équipe humaine
ou une IA de Google (sous 2 à 5 jours ouvrés), vous ne pouvez pas créer
de fiche d'application.

Conseil Pro : Assurez-vous que le nom sur votre profil de paiement Google
(Google Pay) est exactement le même que celui sur votre pièce d'identité,
sinon la vérification échouera automatiquement.

19
 03. Mise en ligne et processus de validation

Importez votre fichier .aab dans la console pour lancer le processus de

révision. C'est ici que vous validez la mise en ligne pour rendre votre
application accessible aux utilisateurs.

1. Configuration de Fiche Store

Pour publier votre application, vous devez préparer une Fiche Store
complète comprenant des assets graphiques de haute qualité (icône
512x512, bannière 1024x500 et 4 à 8 captures d'écran réelles), ainsi qu'un
contenu textuel optimisé (nom, description avec mots-clés). Il est également
crucial de bien définir la catégorie, d'ajouter jusqu'à 5 tags pertinents et de
fournir un e-mail d'assistance fonctionnel.

20
 03. Mise en ligne et processus de validation

2. Politique et Confidentialité

A. L'URL de la Politique de Confidentialité (Privacy Policy)

Vous ne pouvez plus simplement uploader un document ; vous devez fournir

un lien URL public.

▪ Contenu obligatoire : Le document doit lister précisément quelles données

vous collectez (email, nom, position GPS, ID publicitaire, etc.), pourquoi
vous les collectez et comment l'utilisateur peut demander leur suppression.

▪ Hébergement : Si vous n'avez pas de site web, vous pouvez utiliser des outils
comme Google Sites, GitHub Pages ou des générateurs de politiques de
confidentialité en ligne.

▪ Accessibilité : Le lien doit être accessible sans mot de passe et présent à la

fois sur le Play Store et à l'intérieur de votre application.

21
 03. Mise en ligne et processus de validation

2. Politique et Confidentialité

B. Déclarations de Contenu et Publicités

▪ Annonces (Ads) : Vous devez déclarer si votre application contient des

publicités (AdMob, Unity Ads, etc.). Si vous dites "Non" mais que Google
détecte un SDK publicitaire dans votre code, l'app sera refusée.

▪ Classification du contenu (IARC) : Vous devrez répondre à un

questionnaire (ex: Présence de violence ? Langage grossier ? Vente de
produits réglementés ?). Cela générera l'âge minimum requis (PEGI 3, 12,
18, etc.).

22
 03. Mise en ligne et processus de validation

2. Politique et Confidentialité

E. Ciblage des Enfants (Politique pour les familles)

▪ Si votre application s'adresse aux enfants de moins de 13 ans, les

règles sont extrêmement strictes (pas de collecte d'identifiants
publicitaires, SDK approuvés uniquement).

▪ Si votre app n'est pas destinée aux enfants, assurez-vous que votre
fiche store ne semble pas les attirer (évitez les dessins trop enfantins si
l'app est pour adultes).

23
 03. Mise en ligne et processus de validation

3. La Période de Test Fermé

Si vous publiez avec un compte personnel, vous ne pouvez pas accéder à

la production directement. Vous devez prouver la stabilité de votre
application via un test rigoureux.

A. Le Recrutement des Testeurs

▪ Le quota : Vous devez recruter au moins 12 testeurs.

▪ Critères : Ce doivent être des comptes Google réels. Ils ne peuvent pas
être des comptes "bots" ou des comptes créés juste pour l'occasion ;
Google peut détecter les comportements inhabituels.

▪ Méthode : Vous collectez les adresses e-mail de vos testeurs et vous les
ajoutez à une "Liste de testeurs" dans la Play Console.

24
 03. Mise en ligne et processus de validation

3. La Période de Test Fermé

B. La Règle des 14 Jours (Stricte)

1. Ce n'est pas seulement une question de nombre, mais de durée et

d'engagement :

2. Disponibilité continue : Vos 12 testeurs (ou plus) doivent avoir accès à

l'application pendant 14 jours consécutifs.

3. Opt-in : Chaque testeur doit accepter l'invitation via un lien spécial

(Web ou Android) et installer l'application.

4. Utilisation réelle : Google suit les statistiques. Si les 12 testeurs installent

l'app mais ne l'ouvrent jamais, Google peut considérer que le test n'est
pas valide et refuser votre passage en production.

25
 03. Mise en ligne et processus de validation

3. La Période de Test Fermé

C. Collecte et Gestion des Feedbacks

Pendant ces 14 jours, vos testeurs peuvent vous envoyer des commentaires
directement via le Play Store (ces avis sont privés et ne seront pas visibles par
le public plus tard).

▪ Répondre aux avis : Il est conseillé de répondre aux commentaires des

testeurs dans la console. Cela montre à Google que vous êtes un
développeur actif et sérieux.

▪ Mises à jour : Si un testeur signale un bug, publiez une version corrective

(ex: v1.0.1). Cela prouve que vous utilisez la phase de test pour améliorer
l'application.

26
 03. Mise en ligne et processus de validation

3. La Période de Test Fermé

D. Le Questionnaire de Fin de Test

Une fois les 14 jours écoulés, un bouton "Demander l'accès à la production"

apparaîtra. Vous devrez répondre à des questions cruciales :

▪ "Comment avez-vous recruté vos testeurs ?"

▪ "Quels ont été les principaux retours de vos testeurs ?"

▪ "Quelles modifications avez-vous apportées suite aux tests ?"

Attention : Si vos réponses sont trop vagues (ex: "Tout s'est bien passé"),
Google peut rejeter votre demande et vous obliger à recommencer 14 jours
de tests supplémentaires.

27
 03. Mise en ligne et processus de validation

4. Demande d'accès à la Production

Une fois les 14 jours de tests obligatoires validés, cliquez sur "Demander
l'accès à la production". Votre application sera soumise à un examen
technique et humain par Google pour vérifier sa conformité.

Dès l'approbation reçue, générez votre fichier final pour le lancement :

▪ Action : Exécutez la commande flutter build appbundle.

▪ Résultat : Le fichier [Link] sera prêt pour la distribution mondiale.

28
Merci