~1~

République Démocratique du Congo

ENSEIGNEMENT SUPERIEUR ET UNIVERSITAIRE
INSTITUT SUPERIEUR PEDAGOGIQUE DE KASONGO

I.S.P./KASONGO
E-mail: ispkasongo1@[Link]

U.E DE PROGRAMMATION MOBILE

Destiné aux apprenants de Bac 3 C.S.I

Par Ir TAMBWE MWAMBA Inyco

Assistant

ANNEE ACADEMIQUE 2024-2025

 ~1~

INSTRODUCTION GENERALE
Quel que soit l’endroit où nous pouvons être et le confort qui peut nous être
procuré, la maison est notre coin du monde, notre seul havre de paix et c’est là que
nous souhaitons avoir le plus de confort possible. Si l’on est bien chez-soi, on est bien
dans notre vie et avec notre entourage.
D’un point de vue scientifique, ce bien-être ne peut être assuré que par le
développement technologique. Ceci se traduit par la création et l’installation de
matériels connectés et programmés selon nos besoins assurant notre confort. De nos
jours, la maison intelligente est devenue le modèle parfait, un paradigme assurant une
vie d’extrême confort et de modernisme.
Ainsi avec le développement que l’électronique et la nanotechnologie ont
connu, tout est devenu miniature et accessible. De plus, avec ce cette Unité
d’Enseignement, nous allons montrer comment avec l’informatique et la
programmation, la programmation mobile a pris de l’ampleur et s’est attaquée à tous
les domaines notamment les Smartphones.
OBJECTIF DU COURS
L’étudiant qui l’aura suivi avec attention, aura des compétences ci-après :
✓ Comprendre les notions de base en programmation Mobile (Android et
Flutter) ;
✓ Appréhender les notions sur la programmation Orienté aux Objets en Dart et
Java ;
✓ Être capable de développer les applications Mobiles ;
✓ Être capable de manipuler une base des données avec une Application Android,
Flutter
 ~2~

CHAPITRE I: INTRODUCTION AU SYSTEME ANDROID

I.1. INTRODUTION
Le système d’exploitation Android est actuellement l’OS le plus utilisé dans le
monde faisant tourner des smartphones, tablettes, montres connectées, liseuses
électroniques, télévisions interactives, et bien d’autres. C’est un système, open source
qui utilise le noyau Linux.
Il a été créé par Android, Inc. qui fut rachetée par Google en 2005. Le
développement d’applications pour Android s’effectue en Java en utilisant des
bibliothèques spécifiques.
Le but de cette Unité d’Enseignement est de vous familiariser avec l’esprit de
développement Android et ses bibliothèques. Nous introduirons les concepts de bases
de création d’application en mettant en œuvre quelques fonctionnalités simples. Cette
U.E. n’est en aucun cas exhaustif, le potentiel des applications Android est beaucoup
plus ample, les exemples cités dans ce document ne devront pas brider votre
imagination ni votre curiosité.
Sur le site officiel pour les développeurs Android vous trouverez la
documentation des classes, des tutoriels ainsi que les lignes directrices pour préparer
une distribution Google Play. Un lexique à la fin de ce document définit quelques
mots du vocabulaire Android utilisé dans cette U.E.
I.1.1. Caractéristiques et les avantages d’Android
a. Open Source
Le contrat de licence pour Android respecte les principes de l’open source, c’est-
à-dire que vous pouvez à tout moment télécharger les sources et les modifier selon vos
goûts ! Bon, je ne vous le recommande vraiment pas, à moins que vous sachiez ce que
vous faites... Notez au passage
Qu’Android utilise des bibliothèques open source puissantes, comme par
exemple SQLite pour les bases de données et OpenGL pour la gestion d’images 2D et
3D.
 ~3~

b. Gratuit (presque)
Android est gratuit, autant pour vous que pour les constructeurs. S’il vous
prenait l’envie de produire votre propre téléphone sous Android, alors vous n’auriez
même pas à ouvrir votre porte-monnaie (mais bon courage pour tout le travail à
fournir !). En revanche, pour poster vos applications sur le Play Store, il vous en
coûtera la modique somme de 25$. Ces 25$ permettent de publier autant
d’applications que vous le souhaitez, à vie !
c. Facile à développer
Toutes les API mises à disposition facilitent et accélèrent grandement le travail.
Ces APIs sont très complètes et très faciles d’accès. De manière un peu caricaturale, on
peut dire que vous pouvez envoyer un SMS en seulement deux lignes de code
(concrètement, il y a un peu d’enrobage autour de ce code, mais pas tellement).
Une API, ou « interface de programmation » en français, est un ensemble de
règles à suivre pour pouvoir dialoguer avec d’autres applications. Dans le cas de
Google API, il permet en particulier de communiquer avec Google Maps.
d. Facile à vendre
Le Play Store (anciennement Android Market) est une plateforme immense et
très visitée ; c’est donc une mine d’opportunités pour quiconque possède une idée
originale ou utile.
e. Flexible
Le système est extrêmement portable, il s’adapte à beaucoup de structures
différentes. Les smartphones, les tablettes, la présence ou l’absence de clavier ou de
trackball, différents processeurs...
On trouve même des fours à micro-ondes qui fonctionnent à l’aide d’Android !
Non seulement c’est une immense chance d’avoir autant d’opportunités, mais en plus
Android est construit de manière à faciliter le développement et la distribution en
fonction des composants en présence dans le terminal (si votre application nécessite
d’utiliser le Bluetooth, seuls les terminaux équipés de Bluetooth pourront la voir sur le
Play Store).
d. Ingénieux
L’architecture d’Android est inspirée par les applications composites, et
encourage par ailleurs leur développement. Ces applications se trouvent
 ~4~

essentiellement sur internet et leur principe est que vous pouvez combiner plusieurs
composants totalement différents pour obtenir un résultat surpuissant. Par exemple, si
on combine l’appareil photo avec le GPS, on peut poster les coordonnées GPS des
photos prises.
I.1.2. Difficultés du développement pour les applications Android
Il existe certaines contraintes pour le développement Android, qui ne
s’appliquent pas au développement habituel !
Prenons un cas concret : la mémoire RAM est un composant matériel
indispensable. Quand vous lancez un logiciel, votre système d’exploitation lui réserve
de la mémoire pour qu’il puisse créer des variables, telles que des tableaux, des listes,
etc.
Ainsi, sur mon ordinateur, j’ai 4 Go de RAM, alors que je n’ai que 512 Mo sur
mon téléphone, ce qui signifie que j’en ai huit fois moins. Je peux donc lancer moins
de logiciels à la fois et ces logiciels doivent faire en sorte de réserver moins de
mémoire.
C’est pourquoi votre téléphone est dit limité, il doit supporter des contraintes
qui font doucement sourire votre ordinateur.
Voici les principales contraintes à prendre en compte quand on développe pour
un environnement mobile :
✓ Il faut pouvoir interagir avec un système complet sans l’interrompre. Android
fait des choses pendant que votre application est utilisée, il reçoit des SMS et
des appels, entre autres. Il faut respecter une certaine priorité dans l’exécution
des tâches. Sincèrement, vous allez bloquer les appels de l’utilisateur pour qu’il
puisse terminer sa partie de votre jeu de sudoku ?
✓ Comme je l’ai déjà dit, le système n’est pas aussi puissant qu’un ordinateur
classique, il faudra exploiter tous les outils fournis afin de débusquer les
portions de code qui nécessitent des optimisations.
✓ La taille de l’écran est réduite, et il existe par ailleurs plusieurs tailles et
résolutions différentes. Votre interface graphique doit s’adapter à toutes les
tailles et toutes les résolutions, ou vous risquez de laisser de côté un bon
nombre d’utilisateurs.
 ~5~

✓ Autre chose qui est directement lié, les interfaces tactiles sont peu pratiques en
cas d’utilisation avec un stylet et/ou peu précises en cas d’utilisation avec les
doigts, d’où des contraintes liées à la programmation événementielle plus
rigides. En effet, il est possible que l’utilisateur se trompe souvent de bouton.
Très souvent s’il a de gros doigts.
✓ Enfin, en plus d’avoir une variété au niveau de la taille de l’écran, on a aussi
une variété au niveau de la langue, des composants matériels présents et des
versions d’Android.
Il y a une variabilité entre chaque téléphone et même parfois entre certains
téléphones identiques. C’est un travail en plus à prendre en compte. Les conséquences
de telles négligences peuvent être terribles pour l’utilisateur. Saturez le processeur et il
ne pourra plus rien faire excepté redémarrer ! Faire crasher une application ne fera en
général pas complètement crasher le système, cependant il pourrait bien s’interrompre
quelques temps et irriter profondément l’utilisateur.
Il faut bien comprendre que dans le paradigme de la programmation classique
vous êtes dans votre propre monde et vous n’avez vraiment pas grand-chose à faire
du reste de l’univers dans lequel vous évoluez, alors que là vous faites partie d’un
système fragile qui évolue sans anicroche tant que vous n’intervenez pas. Votre but est
de fournir des fonctionnalités de plus à ce système et faire en sorte de ne pas le
perturber.
Bon, cela paraît très alarmiste dit comme ça, Android a déjà anticipé la plupart
des âneries que vous commettrez et a pris des dispositions pour éviter des catastrophes
qui conduiront au blocage total du téléphone. Si vous êtes un tantinet curieux, je vous
invite à lire l’annexe sur l’architecture d’Android pour comprendre un peu pourquoi il
faut être un barbare pour vraiment réussir à saturer le système.
I.1.3. En Résumé
➢ Google n’est pas le seul à l’initiative du projet Android. C’est en 2007 que
l’Open Handset Alliance (OHA) a été créé et elle comptait 35 entreprises à ses
débuts.
➢ La philosophie du système réside sur 6 points importants : il fallait qu’il soit
open source, gratuit dans la mesure du possible, facile à développer, facile à
vendre, flexible et ingénieux.
 ~6~

➢ Il ne faut jamais perdre à l’esprit que vos Smartphones sont (pour l’instant)
moins puissants et possèdent moins de mémoire que vos ordinateurs !
➢ Il existe un certain nombre de bonnes pratiques qu’il faut absolument respecter
dans le développement de vos applications. Sans quoi, l’utilisateur aura
tendance à vouloir les désinstaller.
➢ Ne bloquez jamais le Smartphone. N’oubliez pas qu’il fait aussi autre chose
lorsque vous exécutez vos applications.
➢ Optimisez vos algorithmes : votre Smartphone n’est pas comparable à votre
ordinateur en termes de performance.
➢ Adaptez vos interfaces à tous les types d’écran : les terminaux sont nombreux.
➢ Pensez vos interfaces pour les doigts de l’utilisateur final. S’il possède des gros
doigts et que vous faites des petits boutons, l’expérience utilisateur en sera
altérée.
➢ Si possible, testez vos applications sur un large choix de Smartphones. Il existe
des variations entre les versions, les constructeurs et surtout entre les matériels.
➢ Une bonne compréhension du langage Java est nécessaire pour suivre ce cours,
et plus généralement pour développer sur Android.
2. Les Outils et Installations
A. Les Outils
❖ IDE :
Un IDE est un logiciel dont l’objectif est de faciliter le développement,
généralement pour un ensemble restreint de langages. En d’autres termes, il vous est
possible de développer sans un IDE, mais en utiliser un est beaucoup plus pratique.
En effet, il contient un certain nombre d’outils, dont au moins un éditeur de
texte – souvent étendu pour avoir des fonctionnalités avancées telles que l’auto-
complétion ou la génération automatique de code - des outils de compilation et un
débogueur.
Dans le cas du développement Android, un IDE est très pratique pour ceux qui
souhaitent ne pas avoir à utiliser les lignes de commande.
Cette U.E se base sur Eclipse : en effet il est fourni par défaut par Google dans le
paquetage que nous téléchargeons. Vous pouvez aussi opter pour d’autres IDE
 ~7~

compétents tels que IntelliJ IDEA ou NetBeans. Je ne présenterai qu’Eclipse, vous aurez
à explorer vous-mêmes les autres outils si vous êtes intéressé.
Enfin ce que vous devez comprendre, c’est que le code sera pareil quel que soit
l’IDE que vous choisirez, l’IDE n’est qu’un outil, il ne fera pas de travail de
développement à votre place, il ne fera que vous aider dans cette tâche.
❖ JDK (Java Development Kit) :
En tant que développeur Java vous avez certainement déjà installé le JDK (pour
« Java Development Kit »), cependant on ne sait jamais ! Je vais tout de même vous
rappeler comment l’installer. En revanche, si vous l’avez bien installé et que vous êtes
à la dernière version, ne perdez pas votre temps et filez directement à la prochaine
section ! Un petit rappel technique ne fait de mal à personne. Il existe deux
plateformes en Java :
❖ Le JRE (Java Runtime Environment), qui contient la JVM (Java Virtual
Machine, rappelez-vous, j’ai expliqué le concept de machine virtuelle dans le
premier chapitre), les bibliothèques de base du langage ainsi que tous les
composants nécessaires au lancement d’applications ou d’applets Java. En gros,
c’est l’ensemble d’outils qui vous permettra d’exécuter des applications Java.
❖ Le JDK (Java Development Kit), qui contient le JRE (afin d’exécuter les
applications Java), mais aussi un ensemble d’outils pour compiler et déboguer
votre code ! Vous trouverez un peu plus de détails sur la compilation dans
l’annexe sur l’architecture d’Android
❖ SDK C’est-à-dire un kit de développement dans notre langue, c’est un ensemble
d’outils que met à disposition Google afin de vous permettre de développer
des applications pour Android.
❖ Le plugin : est un outil qui permet d’ajouter des fonctions supplémentaires a un
logiciel principal. On le qualifiera aussi de module d’extension ou add-on. Un
plugin ne peut pas fonctionner seul, il est entièrement dépendant de son
logiciel hôte.
❖ Plugin ADT : est une extension d’Eclipse afin de développer des applications
Android ;
A. Configuration de l’IDE
 ~8~

Installation des paquets supplémentaires et des mises à jours

a. Lancez Android Studio
b. Nous commencerons par nous assurer que nous possédons tout ce qu’il faut
pour développer. Dans la page de démarrage, sélectionnez Configure> SDK
Manager. Dans le gestionnaire (fig.2.1) vous verrez la version du SDK installé
(avec les mises jour disponibles) et aussi la version de l’API (Application
Programming Interface) installée et la version de l’OS pour laquelle elle vous
permettra de développer. Installez les éventuelles mises à jour. Assurez-vous de
cocher au moins un System Image pour l’émulateur.
c. Dans l’onglet SDK Tools assurez-vous d’avoir au moins
✓ Android SDK Build Tools
✓ Android SDK Tools
✓ Android SDK Platform Tools
✓ Android Support Library
✓ Android Support Repository
✓ Google Repository
✓ Google Play Services
d. Quand vous aurez terminé, cliquez Apply pour lancez les installations des
éléments supplémentaires.
 ~9~

3. Quelques rappels des notions de Programmation

Ce point permettra faire une mise à niveau par rapport à quelques notions de
programmation apprises dans des promotions précédentes et qui seront encore
utilisées dans le cadre de notre cours et surtout de réviser encore les vocabulaires de
base.
A. Les variables
La seule chose qu’un programme sait faire, c’est des calculs. Il arrive qu’on
puisse lui faire afficher des formes et des couleurs, mais pas toujours. Pour faire des
calculs, on a besoin de variables. Ces variables permettent de conserver des
informations avec lesquelles on va pouvoir faire des opérations. Ainsi, on peut avoir
une variable radis qui vaudra 4 pour indiquer qu’on a quatre radis. Si on a une
variable carotte qui vaut 2, on peut faire le calcul radis + carotte de manière à
pouvoir déduire qu’on a six légumes.
✓ Les primitives
En Java, il existe deux types de variable. Le premier type s’appelle les
primitives. Ces primitives permettent de retenir des informations simples telles que des
nombres sans virgule (auquel cas la variable est un entier, int), des chiffres à virgule
(des réels, float) ou des booléens (variable qui ne peut valoir que vrai (true) ou faux
(false), avec les boolean).
✓ Les Objets
Le second type, ce sont les objets. En effet, à l’opposé des primitives (variables
simples), les objets sont des variables compliquées. Un objet est une entité qui
contient des données qui définissent Son état (on les appelle des propriétés) et des
fonctions (on les appelle des méthodes). Un objet est créé selon un modèle qu'on
appelle une classe.
En fait, une primitive ne peut contenir qu’une information, par exemple la
valeur d’un nombre ; tandis qu’un objet est constitué d’une ou plusieurs autres
variables, et par conséquent d’une ou plusieurs valeurs. Ainsi, un objet peut lui-même
contenir un objet ! Un objet peut représenter absolument ce qu’on veut : une chaise,
une voiture, un concept philosophique, une formule mathématique, etc. Par exemple,
pour représenter une voiture, je créerai un objet qui contient une variable roue qui
vaudra 4, une variable vitesse qui variera en fonction de la vitesse et une variable
 ~ 10 ~

carrosserie pour la couleur de la carrosserie et qui pourra valoir « rouge », « bleu », que
sais-je ! D’ailleurs, une variable qui représente une couleur ?
Ça ne peut pas être une primitive, ce n’est pas une variable facile ça, une
couleur ! Donc cette variable sera aussi un objet, ce qui signifie qu’un objet peut
contenir des primitives ou d’autres objets. Mais dans le code, comment représenter un
objet ? Pour cela, il va falloir déclarer ce qu’on appelle une classe. Cette classe aura un
nom, pour notre voiture on peut simplement l’appeler Voiture, comme ceci :

Les variables ainsi insérées au sein d’une classe sont appelées des attributs. Il est
possible de donner des instructions à cette voiture, comme d’accélérer ou de s’arrêter.
Ces instructions s’appellent des méthodes, par exemple pour freiner :

En revanche, pour changer de vitesse, il faut que je dise si j’accélère ou décélère et de

combien la vitesse change. Ces deux valeurs données avant l’exécution de la méthode
 ~ 11 ~

s’appellent des paramètres. De plus, je veux que la méthode rende à la fin de son
exécution la nouvelle vitesse.
Cette valeur rendue à la fin de l’exécution d’une méthode s’appelle une valeur de
retour.
Par Exemple :

Parmi les différents types de méthode, il existe un type particulier qu’on appelle les
constructeurs. Ces constructeurs sont des méthodes qui construisent l’objet désigné par
la classe. Par exemple, le constructeur de la classe Voiture renvoie un objet de type
Voiture :

On peut ensuite construire une voiture avec cette syntaxe :

Construire un objet s’appelle l’instanciation.

 ~ 12 ~

B. Les Principes de POO (Programmation Orientée Objet)

➢ Héritages
Il existe certains objets dont l’instanciation n’aurait aucun sens. Par exemple, un
objet de type Véhicule n’existe pas vraiment dans un jeu de course. En revanche il est
possible d’avoir des véhicules de certains types, par exemple des voitures ou des
motos. Si je veux une moto, il faut qu’elle ait deux roues et, si j’instancie une voiture,
elle doit avoir 4 roues, mais dans les deux cas elles ont des roues. Dans les cas de ce
genre, c’est-à-dire quand plusieurs classes ont des attributs en commun, on fait appel à
l’héritage. Quand une classe A hérite d’une classe B, on dit que la classe A est la fille de
la classe B et que la classe B est le parent (ou la superclasse) de la classe.
A.

Le mot-clé abstract signifie qu’une classe ne peut être instanciée.

Une méthode peut aussi être abstract, auquel cas pas besoin d’écrire son corps. En
revanche, toutes les classes héritant de la classe qui contient cette méthode devront
décrire une implémentation de cette méthode.
 ~ 13 ~

Pour contrôler les capacités des classes à utiliser les attributs et méthodes les unes des
autres, on a accès à trois niveaux d’accessibilité :
✓ Public, pour qu’un attribut ou une méthode soit accessible à tous ;
✓ Protected, pour que les éléments ne soient accessibles qu’aux classes filles ;
✓ Enfin Private, pour que les éléments ne soient accessibles à personne si ce n’est
la classe elle-même.

On trouve par exemple :

Enfin, il existe un type de classe mère particulier : les interfaces. Une interface
est impossible à instancier et toutes les classes filles de cette interface devront instancier
les méthodes de cette Interface — elles sont toutes forcément abstract.

➢ Encapsulation
L’encapsulation est la capacité permettant de créer et de contrôler l’accès a un
groupe d’éléments. Les classes fournissent le moyen le plus fiable d’assurer
l’encapsulation. Si nous pennons l’exemple d’un compte bancaire, dans une
programmation classique, il nous faudrait de nombreuses variables et procédures ou
fonctions pour manipuler les informations. La situation serait encore plus complexe si
nous devions gérer simultanément plusieurs comptes bancaires.
 ~ 14 ~

Il faudrait alors travailler avec des tableaux et jongler avec les index.
L’encapsulation permet de regrouper les informations et le code les manipulant dans
une classe. Si vous devez travailler avec plusieurs comptes bancaires simultanément
vous aurez alors plusieurs instances de la même classe, limitant ainsi le risque d’erreurs.
L’encapsulation assure également un contrôle sur l’utilisation des données et des
procédures ou fonctions. Vous pouvez utiliser les modificateurs d’accès, tels que
Private ou Protected, pour restreindre l’accès à certaines méthodes, propriétés ou
champs. Une règle fondamentale de l’encapsulation stipule que les données d’une
classe ne doivent être manipulées que par le code de la classe (procédures de
propriétés ou méthodes).
Cette technique est parfois appelée dissimulation de données. Elle assure la
sécurité de fonctionnement de votre code en masquant les détails internes de la classe
et en évitant ainsi qu’ils ne soient utilisés de manière inappropriée. Elle autorise aussi la
modification d’une partie du code sans perturber le fonctionnement du reste de
l’application.
➢ Polymorphisme
Le polymorphisme est une autre notion importante de la programmation
orientée objet. Par son intermédiaire, il est possible d’utiliser plusieurs classes de
manière interchangeable même si ces classes implémentent leurs propriétés et
méthodes de manière différente. Ces propriétés et méthodes sont utilisables par le
même nom, indépendamment de la classe à partir de laquelle l’objet a été construit.
Trois autres concepts sont également associés au polymorphisme. La surcharge,
la substitution et le masquage de membres permettent la définition de membres d’une
classe portant le même nom. Il existe cependant quelques petites distinctions entre ces
trois techniques.
La surcharge est utilisée pour concevoir des propriétés ou des méthodes portant
le même nom mais ayant un nombre de paramètres différents ou des types de
paramètres différents.
La substitution permet la redéfinition de méthodes ou propriétés héritées d’une
classe de base. Les membres substituent peuvent accepter le même nombre et type de
paramètres que la méthode ou propriété de la classe de base.
 ~ 15 ~

Le masquage sert à remplacer localement, dans une classe, un membre d’une

classe. N’importe quel type de membre peut masquer un autre membre. Par exemple,
une propriété peut masquer une méthode héritée. Le masquage se fait uniquement
grâce au nom. Les membres masquent ne sont pas héritables.
C. Compilation et l’exécution
Votre programme est terminé et vous souhaitez le voir fonctionner, c’est tout à
fait normal.
Cependant, votre programme ne sera pas immédiatement compréhensible par
l’ordinateur. En effet, pour qu’un programme fonctionne, il doit d’abord passer par
une étape de compilation, qui consiste à traduire votre code Java en bytecode.
Dans le cas d’Android, ce bytecode sera ensuite lu par un logiciel qui s’appelle
la machine virtuelle Dalvik. Cette machine virtuelle interprète les instructions bytecode
et va les traduire en un autre langage que le processeur pourra comprendre, afin de
pouvoir exécuter votre programme.
4. Création d’une Application Android sous Android Studio
Création d’un projet et d’une application “Hello World”
a. Dans le menu Quick Start, sélectionnez Start a new Android Studio Project ,
et renseignez les informations comme dans la figure 3.1a
b. Cliquez sur Next puis remplissez les champs comme dans la figure 3.1b
Application name : c’est le nom qui va apparaitre dans la liste des
applications sur l’appareil et dans le Play Store. Company domain : c’est un
qualifiant qui apparaitra dans le nom du package Package name : il est
utilisé comme identifiant de l’application, il permet de considérer différentes
versions d’une application comme étant une même application. Il doit être
unique parmi tous les packages installés sur le système. Minimum required
SDK : c’est la version Android la plus ancienne sur laquelle l’application peut
tourner. Il faut éviter de remonter trop en arrière, ça réduirait les
fonctionnalités que vous pourriez donner à votre application. 1
c. Cliquez sur Next. Nous arrivons à la création d’une activité (un écran avec
une interface graphique). Sélectionnez Blank Activity (fig. 3.2a) et cliquez
Next.
 ~ 16 ~

d. Renseignez les champs comme dans la figure 3.2b. Vous pourriez choisir
l’utilisation de fragments, mais pour faire simple nous poursuivrons sans
fragments. Chaque activité dispose d’un layout qui définit la façon dont les
composants seront disposés sur l’écran. Une activité peut être divisée en
portions (ou fragments) chacune ayant son propre layout. La notion de
fragment a été introduite pour favoriser la réutilisabilité de morceaux
d’activité (un fragment peut être définit une fois et réutilisé dans plusieurs
activités).
 ~ 17 ~

e. Cliquez sur Finish, le projet est crée.

Exécution de l’application
Sur un émulateur
Un émulateur permet de reproduire le comportement d’un appareil réel d’une
façon virtuelle. L’utilisation d’un émulateur nous évite d’avoir à charger à chaque fois
 ~ 18 ~

l’application dans un appareil pour la tester. On pourra ainsi lancer l’application dans
l’IDE et elle s’exécutera sur un appareil virtuel appelé Android Virtual Device AVD qui
émule le comportement d’un téléphone, une tablette ou autre.
Pour configurer un émulateur, allez dans Tools > Android > AVD Manager, un
émulateur existe par défaut, mais vous pourriez rajouter d’autres appareils en cliquant
sur Create Virtual Device. Dans l’exemple de la figure 3.3a nous rajoutons une tablette
Nexus 10 avec une extra haute résolution (xhdpi). Nous sélectionnons ensuite le
processeur qui sera émulé (fig.3.3b). En cochant Show downloadable system images
vous pouvez télécharger d’autres images systèmes avec d’autres versions Android.
En cliquant sur Next Vous avez ensuite la possibilité de configurer d’autres
paramètres. Notez qu’à la création de l’appareil sa résolution vous est signalée. Ceci
est important à noter pour l’intégration d’images dans l’application.
Pour lancer l’exécution sur l’émulateur, appuyez sur le bouton d’exécution
(fig.3.4) et sélectionnez l’émulateur sur lequel vous souhaitez lancer l’application. Vous
pouvez cochez Use same device for future launches pour éviter d’avoir à sélectionner
l’appareil à chaque lancement. L’émulateur se lance, ça peut prendre quelques minutes
soyez patients. Rassurez-vous, vous n’aurez pas à le relancer à chaque fois que vous
compilez votre projet, laissez-le ouvert et à chaque fois que vous compilez et relancez
votre application, elle pourra être chargée dans l’émulateur en cours (il vous le
proposera parmi les Running devices).
 ~ 19 ~

Sur un appareil réel

Connectez votre appareil par câble USB à l’ordinateur et installez le pilote si
nécessaire. Activez l’option de débogage USB sur l’appareil en allant dans les
paramètres, sous-développement ou options pour les développeurs. Pour les versions
supérieures à 4.2, cette option est cachée par défaut, pour la faire apparaitre, allez
dans Paramètres>A propos. Et touchez Numéro de build sept fois. Retournez ensuite
à l’écran Paramètres, vous verrez apparaitre Options pour les développeurs, rentrez-y
et activez le débogage.
Lancez l’application depuis Android Studio comme précédemment. Si on vous
demande de choisir l’appareil, sélectionnez Choose a running device, puis votre
téléphone ou tablette. Android Studio installera l’application sur votre appareil et la
lancera.
Si au moment de la sélection de l’appareil vous recevez un message indiquant
que l’appareil n’est pas compatible, assurez-vous d’abord que la version Sdk de
l’appareil est bien supérieure au minSdk version de votre projet. Si c’est le cas, allez sur
votre appareil tout en étant connecté par USB désactivez puis réactivez l’option de
débogage USB, il vous demandera de confirmer l’identifiant de votre ordinateur,
confirmez en lui indiquant de toujours faire confiance à cet ordinateur.
Une fois que votre application est compilée, un fichier. apk est créé dans le
dossier app\build\outputs\apk de votre répertoire de travail.
C’est l’exécutable de votre application. C’est ce fichier que vous devez déployer
pour distribuer votre application. Le contenu de ce fichier peut être inspecté à l’aide
de n’importe quel logiciel standard de compression/décompression de fichiers.
 ~ 20 ~

Se repérer dans le projet

La figure 3.5 montre les principaux éléments de l’interface Android Studio. Tout
projet Android doit respecter une hiérarchie bien précise qui permettra au compilateur
de retrouver les différents éléments et ressources lors de la génération de l’application.
Cette hiérarchie favorise la modularité des applications Android.
A la création du projet, Android Studio crée automatiquement des dossiers
pour contenir les fichiers de code Java, les fichiers XML, et les fichiers multimédias.
L’explorateur de projet vous permettra de naviguer dans ces dossiers.
Les dossiers que nous utiliserons le plus sont java et res.
Le premier contient le code Java qui définit le comportement de l’application
(situé dans le répertoire de votre projet sous app\src\main) et la seconde comporte
des sous dossiers (dans app\src\main\res) où sont stockées les ressources qui définissent
l’interface de l’application (l’apparence).
La séparation entre fonctionnalité et apparence est un point essentiel de la
philosophie Android.
Le code de la classe principale de l’application ([Link]) est situé dans le
sous dossier [Link] de java. Vous trouverez en annexe une brève
explication du code qui y est généré par défaut. C’est dans le dossier java que seront
enregistrées toutes les classes que nous allons créer dans ce projet.
 ~ 21 ~

Par ailleurs, tout ce qui touche à l’interface utilisateur sera intégré dans les sous
dossiers de res, dont voici une brève description : layout regroupe les fichiers XML qui
définissent la disposition des composants sur l’écran. Il contient déjà, dès la création du
projet, le layout de l’activité principale que nous avons créée. Deux fichiers XML sont
créé par Android Studio : activite_principale.xml et content_principale.xml. Le premier
définit l’apparence générale de l’activité : sa disposition, sa taille, sa barre d’outil,
éventuellement des boutons d’action flottant (dans notre cas un bouton email est
rajouté) ainsi que son layout qui n’est autre que content_principale.xml. Ce sera donc
ce dernier que nous manipulerons pour disposer les composants de l’activité et créer
notre interface graphique.
drawable-**** contient tout élément qui peut être dessiné sur l’écran : images
(En PNG de préférence), formes, animations, transitions, etc. Cinq dossiers drawable
permettent aux développeurs de proposer des éléments graphiques pour tout genre
d’appareil Android en fonction de sa résolution. En populant correctement ces dossiers
on peut ainsi créer des applications avec une interface qui s’adapte à chaque résolution
d’écran avec un seul [Link].
ldpi low-resolution dots per inch. Pour des images destinées à des écrans de basse
résolution (~120dpi) mdpi pour des écrans de moyenne resolution (~160dpi) hdpi
pour des écrans de haute résolution (~240dpi) xhdpi pour des écrans ayant une extra
haute résolution (~320dpi) xxhdpi pour des écrans ayant une extra extra haute
résolution (~480dpi).
❖ menu contient les fichiers XML définissant les menus
❖ Mipmap contient les images de l’icône de votre application sous différentes
résolutions.
❖ Values contient les fichiers XML qui définissent des valeurs constantes (des
chaines de caractères, des dimensions, des couleurs, des styles etc.)
❖ Gradle Android Studio utilise un système qu’on appelle Gradle pour compiler
et générer les applications. Pour fonctionner le Gradle a besoin d’un script qui
définit les règles de compilation et génération (configuration et dépendances).
Android Studio crée ainsi un script gradle pour chaque module ([Link]
(Module :app)) du projet ainsi qu’un script pour le projet entier ([Link]
(Project : MonAppli)). Dans le [Link] de l’application on définit entre
 ~ 22 ~

autre la version du SDK utilisée pour la compilation, la version minimale du

SDK nécessaire pour faire tourner l’application (rétro-compatibilité),
l’identifiant de l’application (le nom du package), etc.
Vous trouverez également dans le dossier manifests du projet un fichier nommé
[Link]. Ce fichier est obligatoire dans tout projet Android, et doit
toujours avoir ce même nom. Ce fichier permet au système de reconnaitre
l’application.
On peut accéder à une description rapide des classes ou des attributs
XML en sélectionnant leur nom dans l’éditeur et appuyant sur Ctrl+Q.
Modification de l’interface utilisateur
Pour l’instant notre application ne fait qu’afficher un message sur l’écran, dans
cette section nous allons modifier l’interface pour y mettre un champ de saisie et un
bouton.
Une interface utilisateur est en général constituée de ce qu’on appelle des
ViewGroups qui contiennent des objets de type View ainsi que d’autres ViewGroups.
Un View est un composant, tel un bouton ou un champ de texte, et les ViewGroups
sont des conteneurs qui définissent une disposition des composants (Views) qui y sont
placés. ViewGroup définit la classe de base des différents layouts.
Comprendre le layout
La disposition de notre interface est définie dans le fichier
content_principale.xml situé dans le dossier layout de res. Ouvrez ce fichier. La
première balise que vous retrouverez est <RelativeLayout> qui définit le type du
conteneur qui compose l’interface, il impose la façon dont les composants seront
disposés. Plusieurs types de conteneurs existent, les plus communs sont RelativeLayout,
LinearLayout, TableLayout, GridView, ListView. L’utilisation d’un RelativeLayout, par
exemple, implique que les composants seront placés selon des positions relatives les
uns par rapport aux autres. Un LinearLayout implique une disposition linéaire verticale
ou horizontale, un GridView permet la disposition des éléments selon une grille qui
peut défiler, etc.
A l’intérieur de la balise <RelativeLayout> vous verrez un ensemble d’attributs
définis selon le format plateforme:caractéristique=”valeur” Par exemple le premier
attribut xmlns:android précise où sont définis les balises Android utilisées dans ce
 ~ 23 ~

fichier. La balise <TextView>, fille de la balise <RelativeLayout>, définit un

composant texte qui sera placé sur le layout. En effet, c’est sur ce composant là qu’on
écrit le “Hello World” qu’affiche notre application. Cette chaine de caractère est
définie par l’attribut android:text.
Modifier le type de layout
Nous allons maintenant modifier le type du layout pour le transformer en
Linear-Layout. La figure 3.6 trace la dérivation de la classe LinearLayout. Nous
rajouterons ensuite nos composants sur ce layout dans une disposition linéaire.

Les layouts sont des ViewGroup qui sont eux-mêmes des View
Dans le fichier content_principale.xml
✓ Supprimez l’élément <TextView>
✓ Remplacez l’élément <RelativeLayout> par <LinearLayout>
✓ Rajoutez l’attribut android:orientation et mettre sa valeur à “horizontal”
Le code dans le fichier devient ainsi
 ~ 24 ~

Rajouter d’un champ de saisie

. Rajoutez un élément <EditText> dans le <LinearLayout> tel que

Nous avons ainsi placé un champ de saisie avec les attributs suivants :
android :id permet de donner un identifiant unique à ce View qu’on utilisera pour
référencer cet objet à l’intérieur de notre code.
Le symbol @ est nécessaire pour faire référence à un objet ressource à partir
d’un fichier XML. id est le type de ressource et chp_saisie est le nom qu’on donne à
notre ressource. Le symbole + est utilisé pour définir un ID pour la première fois. Il
indique aux outils du SDK qu’il faudrait générer un ID pour référencer cet objet. Le
symbole + ne doit être utilisé qu’une seule fois au moment où on déclare la ressource
 ~ 25 ~

pour la première fois. Par la suite si on veut faire référence à cet élément, à partir d’un
XML, il suffira d’écrire @id/chp_saisie.
❖ android :layout_width permet de spécifier la largeur de élément.
❖ “wrap_content” signifie que le View doit être aussi large que nécessaire pour
s’adapter à la taille de son contenu. Si en revanche on précise “match_parent”
comme on l’avait fait pour le LinearLayout, dans ce cas le EditText occuperait
toute la largeur de l’écran puisque sa largeur sera celle de son parent c.-à-d.
❖ le LinearLayout android :layout_height idem que pour le layout_width mais
pour la hauteur
❖ android :hint précise le texte par défaut à afficher dans le champ de saisie
quand il est vide. Nous aurions pu préciser directement la chaine de caractère
ici codée en dur, mais on préfère utiliser plutôt une ressource qu’on définira
dans [Link]. Noter que l’utilisation de + ici n’est pas nécessaire parce qu’on
fait référence à une ressource concrète (qu’on définira dans le fichier xml) et
non pas à un identifiant que le SDK doit créer.
Privilégiez toujours l’utilisation des ressources strings plutôt que des chaines de
caractères codées en dur. Cela permet de regrouper tout le texte de votre interface
dans un seul endroit pour simplifier la recherche et la mise à jour du texte, de plus ceci
est indispensable pour que votre application puisse être multilingue. L’IDE vous
affichera un avertissement en cas de non-respect de cette recommandation.
Après la modification du code que nous venons de faire, quand vous
sauvegarderez le fichier, un message d’erreur vous indiquera que l’identifiant
str_chp_saisie n’est pas connu. Nous allons donc le définir.
✓ Ouvrez le fichier [Link] qui se trouve dans res>values
✓ Rajoutez un nouveau string nommé str_chp_saisie et dont la valeur est “Entrer
un texte”
Votre fichier [Link] ressemblera donc à ceci
 ~ 26 ~

Compilez et lancez l’application, l’émulateur affichera un écran tel que dans la

figure 3.7. Tapez un texte et remarquez comment la taille du champ de saisie s’adapte
à la longueur du texte.
Rajouter un bouton
✓ Dans le fichier [Link] rajoutez une chaine de caractère qui s’appelle
"btn_envoyer" et qui vaut Envoi.
✓ Dans le fichier du layout rajoutez un élément <Button> tel que

Lancez l’application. Vous devez voir un bouton à côté du champ de saisie (fig.3.8a).
Si vous souhaitez que votre champ de saisie occupe toute la largeur de l’écran qui reste
après le positionnement du bouton il faut spécifier un poids de 1 au
EditText et une largeur de 0.
 ~ 27 ~

Répondre aux évènements

Pour répondre à un appui sur le bouton il suffit de définir un attribut android:onClick
pour le bouton en lui donnant comme valeur le nom de la méthode qui devrait être appelée
quand le bouton est appuyé, et d’implémenter cette méthode de réponse dans la classe
principale de l’activité.
✓ Dans le fichier xml du layout, rajoutez l’attribut android:onClick à l’élément bouton
tel que :

Dans la classe Principale rajoutez la méthode

Il faut absolument respecter cette signature pour la méthode afin que le système
puisse l’associer au nom donné par android:onClick. Le paramètre view est rempli par
le système et correspond à l’élément qui a généré l’évènement (le bouton Envoi dans
notre cas).
Avant d’aller plus loin dans le traitement, vous pouvez déjà tester si l’appel
s’effectue correctement quand le bouton est appuyé. Pour cela, mettez un point
d’arrêt à l’intérieur de la méthode envoiMessage() et lancez l’application en mode
Debug (fig. 3.5).
✓ Dans l’émulateur appuyez sur le bouton Envoi et vérifiez que le programme
entre bien dans la méthode envoiMessage().
 ~ 28 ~

✓ Arrêtez le débogage et revenez en mode Java en cliquant sur le bouton

correspondant en haut à droite de l’IDE.

Création d’une activité

✓ Dans la barre de menu d’Android Studio allez dans File > new et sélectionner
Activity, puis Blank Activity.
✓ Définissez les paramètres de l’activité comme dans la figure 3.9
En plus des champs déjà vus au moment de la création de l’activité principale,
vous remarquez que pour notre nouvelle activité il faut définir une activité parent.

Ceci est utile pour implémenter le comportement par défaut du bouton retour.
Une fois l’activité créée Android Studio génère :

✓ Un fichier [Link] contenant le code la classe

✓ Les fichiers xml correspondant au layout de la nouvelle activité
✓ Un élément <activity> dans le fichier [Link] et affecte ses
attributs avec les valeurs que nous avons précisées lors de la création de
l’activité
 ~ 29 ~

Une chaine de caractère dans le fichier [Link] correspondant au titre de notre nouvelle
activité.

Lancement de l’activité
Pour faire communiquer les deux activés (l’activité principale et celle que nous
venons de créer) il faut passer par un Intent. Ce dernier représente l’intention de faire
quelque chose, et permet à l’activité principale de lancer l’activité d’affichage.

Dans la méthode envoiMessage() de la classe Principale :

 Créez une intention, Intent intent = new Intent (this, [Link]); sans
oublier d’importer la classe. (l’IDE vous le propose automatiquement Alt+
Import [Link];
A la construction de l’objet intent, nous précisons deux arguments : le premier
est un objet de type Context qui fait référence à l’application qui crée l’intention et le
deuxième précise le nom (de la classe) de l’activité qui reçoit l’intention. Comme le
Intent peut être utilisé pour faire communiquer deux applications, il ne suffit pas de
préciser uniquement le nom de l’activité qui le crée mais il faut également définir
l’application qui l’invoque.
 ~ 30 ~

✓ Lancez l’activité
startActivity(intent);
Compilez et exécutez l’application et appuyez sur le bouton Envoi. La nouvelle
activité se lance, pour l’instant elle est vide. Notez que le bouton de retour est déjà
fonctionnel et permet de remonter à l’activité principale. Ceci est dû au fait que nous
l’avons indiquée comme activité parent au moment de la création de notre activité
d’affichage.
Communication entre les activités
Envoyer un message
Si nous souhaitons que le texte tapé dans l’activité principale soit affiché dans
l’activité d’affichage, il faut faire communiquer les deux activités de sorte à ce que la
première envoie le texte à la deuxième. Ceci s’effectue en utilisant le même Intent qui
a servi pour le lancement de l’activité. En effet une intention peut aussi transporter un
paquet de données.
Modifier la méthode envoiMessage() pour qu’elle contienne le code ci-dessous, sans
oublier d’importer les classes nécessaires.

La méthode findViewById() permet de retrouver un objet de type View à partir

de son identifiant. Ici elle renvoie l’objet correspondant à chp_saisie qu’on cast en
EditText. La variable editText contient désormais l’objet champ de saisie que nous
avions posé sur l’interface principale. Nous récupérons ensuite la chaine de caractère
que contient ce champ en appelant [Link]().toString(). Cette chaine est
ensuite stockée dans la variable message qui est passée en paramètre à la méthode
putExtra() de l’objet intent afin de charger l’intention avec ce message. Afin que
l’activité d’affichage puisse identifier et récupérer les données supplémentaires
 ~ 31 ~

transportées par l’intention il faut définir une clé pour ces données moyennant une
constante publique.
Nous définissons donc la constante MESSAGE_SUPP dans la classe Principale.

En général on définit ce genre de clé en utilisant le nom de notre package

comme préfixe. Ceci garantit l’unicité des clés dans le cas où notre application interagit
avec d’autres.
Récupérer et afficher le message
Arrivés à ce point, nous avons fait en sorte à ce que l’activité principale envoie
un message à l’activité d’affichage. Il nous reste maintenant à récupérer ce message
dans AffichMessage. Pour cela il suffit de rajouter le code ci-dessous dans la méthode
onCreate() de la classe AffichMessage . Cette méthode est appelée à la création de
l’activité.

Ensuite, pour afficher le message nous allons créer un TextView, lui affecter le message
puis le rajouter au layout.
Dans les sections précédentes nous avons appris à créer et rajouter des composants à
partir du fichier xml, ici nous le faisons dans le code.
Voici le code complet de la méthode onCreate()
 ~ 32 ~

Exécutez l’application, entrez un texte dans le champ de saisie et appuyez sur le bouton Envoi.
Votre texte devrait apparaitre sur l’écran suivant.
QUELQUES EXERCICES
1. Application « Hello word »
2. Sommation de deux nombres saisis dans un champ de texte
3. Elaboration d’une calculatrice avec les teste du signe choisi par l’utilisateur

4. Le Swap de l’identité d’une personne

Exécutez l’application, entrez un texte dans le champ de saisie et appuyez sur le bouton
Envoi.
 ~ 33 ~

Exécutez l’application, entrez un texte dans le champ de saisie et appuyez sur le

bouton Envoi. Votre texte devrait apparaitre sur l’écran suivant.
QUELQUES EXERCICES
1. Application « Hello word »
2. Sommation de deux nombres saisis dans un champ de texte
3. Elaboration d’une calculatrice avec les teste du signe choisi par l’utilisateur
4. Le Swap de l’identité d’une personne
 ~ 34 ~

CHAPITRE II : INTRODUCTION AU DEVELOPPEMENT DES APPLICATIONS

MOBILES AVEC FLUTTER
1. Introduction
- SDK : C’est-à-dire un kit de développement dans notre langue, c’est un
ensemble d’outils que met à disposition Google afin de vous permettre de
développer des applications pour Android.
- Le plugin : est un outil qui permet d’ajouter des fonctions supplémentaires a
un logiciel principal. On le qualifiera aussi de module d’extension ou add
on. Un plugin ne peut pas fonctionner seul, il est entièrement dépendant de
son logiciel hôte.
- Framework : (the basic structure of something)
▪ En programmation informatique, un framework désigne un ensemble
cohérent de composants logiciels structurels, qui sert à créer les
fondations ainsi que les grandes lignes de tout ou d’une partie d'un
logiciel.
▪ Un framework, ou framework logiciel, est une plate-forme de
développement d'applications logicielles. Il fournit une base sur
laquelle les développeurs de logiciels peuvent créer des programmes
pour une plate-forme spécifique (Java, .Net, PHP, etc.).
Par exemple, un cadre peut inclure des classes et des fonctions prédéfinies qui
peuvent être utilisées pour traiter les entrées, gérer les périphériques matériels et
interagir avec le logiciel système. Cela rationalise le processus de développement
puisque les programmeurs n'ont pas besoin de réinventer la roue chaque fois qu'ils
développent une nouvelle application. Exemple : JAVA (Spring boot), .Net (Entity
Framework), PHP (Laravel, Symphony, etc.), Java Script (Node JS, Vue JS, etc.), Etc.
▪ Avantage : Standardisation des structures de programmation pour les
développeurs, et les maintenances faciles des applications.
- Flutter : est le SDK d'application mobile, framework créé par Google, pour la
création d'interfaces nativesde haute qualité sur iOS et Android en un temps
record. Flutter fonctionne avec le code existant, et est utilisé par les
développeurs et les organisations du monde entier. Le Hot Reload de Flutter
vous permet de tester rapidement et facilement, de créer des interfaces
 ~ 35 ~

utilisateur, d'ajouter des fonctionnalités et de corriger les bogues plus

rapidement. Découvrez des temps de rechargement inférieurs à la seconde, sans
perte d'état, sur les émulateurs, les simulateurs et le matériel pour iOS et
Android.[1]{Google, 2018 #18}
- Dart : est un langage de programmation généraliste développé à l'origine par
Google et approuvé par lasuite par Ecma (ECMA-408). Il est utilisé pour créer
des applications Web, serveur et mobiles, ainsi que pour les appareils de
l'Internet des objets (IoT). C'est un logiciel open-source sous une licence de
logiciel libre permissive (licence BSD modifiée). Dart est un langage à
héritage unique orienté objet, défini par la classe, utilisant une syntaxe de style
C. Il supporte les interfaces, les mixins, les classes abstraites, les génériques
réifiés, le typage statique et un système de type sonore. Dans ce chapitre nous
allons parler du framework Flutter et le langage Dart. Avec une introduction
aux outils de développements, nous aborderons le langage Dart dans son
ensemble, et passerons sur la programmation Orientée Objet. Nous
apprendrons ensuite le langage Flutter, du Hello World à la base de donnée, en
passant par les widgets. La formation utilisera les versions tel que (Flutter v1.2.1
et Dart 2.2.1).

Objectifs
- Être capable de créer une application iOS et Android ;

- Maîtriser le Framework Flutter et le langage Dart

2. Quelques commandes Flutter et Leurs significations
✓ Flutter doctor : Cette commande intervient dans l’Installation de Flutter,
permet de vérifier les éléments d’installation de du plugin flutter.
✓ flutter doctor –v : Cette commande intervient dans l’Installation de Flutter avec
un peu plus de détail par rapport à la commande précédente.
✓ flutter config --android-sdk cheminSDK : Cette commande permet de configurer
le chemin de d’accès de SDK Android.
✓ Flutter create nomProjet : Cette commande permet la création d’un projet
dont le nom est « nomProjet »
 ~ 36 ~

✓ flutter devices : Cette commande permet de vérifier les propriétés de l’appareil

(Téléphone , etc.) connecté sur le port de l’Ordinateur et qui est mode
débogage.
✓ flutter run : Cette commande permet d’exécuter l’application.
✓ flutter upgrade : Cette commande permet de changer de version avec flutter en
spécifiant la version de destination.
✓ Etc.
3. Installation et Configurations de Flutter et Dart

Quelques étapes à suivre pour installer et Configurer flutter dans Visual Studio Code

✓ Télécharger et Installer Visual Studio Code (Juste des Suivant, Suivant) ;

✓ Copier ou télécharger Le Plugin de Flutter (flutter_windows_v1.2.1) dans la
machine (soit dans le disque C, etc.)
✓ Copier ou Télécharger SDK Android dans la machine
✓ Ajouter les chemins des dossiers du plugin Flutter et de SDK Android dans les
variables d’environnement du Système.
~ 37 ~
 ~ 38 ~

✓ Ouvrir l’invite de commande soit MS DOS ou l’invite de commande dans

Visual Studio Code
✓ Exécuter la commande suivante : flutter doctor : cette commande permet de
vérifier si tous les éléments sont bien installés.

✓ Ensuite Exécuter : flutter config --android-sdk cheminSDK (l’élément en rouge

est le chemin d’accès du dossier de SDK dans la machine)
✓ Exécutez encore la commande : flutter doctor –v : Cette commande permet
aussi vérifier aussi si les éléments nécessaires en détail sont alors bien installés.

✓ Exécutez encore la commande : flutter devices : Cette commande permet aussi

vérifier aussi si l’appareil (Téléphone Android ou IPhone) est connecté à
l’Ordinateur, donc l’appareil sur lequel on peut faire des tests d’exécution des
applications conçues.
 ~ 39 ~

4. Création d’une simple Application

Pour la création de l’application, vous ouvrez encore l’invite de commande ou soit

toujours dans MS-DOS et puis Tapez les commandes suivantes :

✓ Positionnez-vous dans le dossier ou vous voulez mettre votre projet en utilisant

de commande basique de MS-DOS pour changer des directions (cd.. et
cd/dossier) ;
✓
✓ flutter create study (le texte en rouge c’est nom de votre projet, donc c’est
l’endroit où vous préciser le nom de votre projet).

Pour exécuter votre application, toujours dans l’invite de commande ouverte,

vous pouvez aller la commande flutter run (En vous rassurant que vous êtes à la
position de la racine du répertoire du projet que vous voulez exécuter, mais aussi si le
téléphone est connecté et en plus si le téléphone est paramétré en mode debug)
 ~ 40 ~

Résultat de la Compilation

5. Architecture d’une Application Flutter

 ~ 41 ~

Various components of the structure of the application are explained here:

✓ android : Code source généré automatiquement pour créer une application

Android ;
✓ ios : Code source généré automatiquement pour créer une ios ;
✓ lib : Dossier principal contenant le code Dart écrit à l'aide du framework
Flutter ;
✓ lib/[Link] : Point d'entrée de l'application Flutter ;
✓ test : Dossier contenant le code Dart pour tester l'application flutter ;
✓ test/widget_test.dart : Exemple de code ;
✓ .gitignore : Fichier de contrôle de version Git ;
✓ .metadata : généré automatiquement par les outils de flutter ;
✓ .packages : généré automatiquement pour suivre les flutters
packages(Librairies) ;
✓ .iml : fichier de projet utilisé par Android studio ;
✓ [Link] : Utilisé par Pub, gestionnaire de paquets Flutter ;
✓ [Link] : Auto généré par le gestionnaire de packages Flutter, Pub ;
✓ [Link] : Fichier de description de projet écrit au format Markdown
6. Introduction aux Widgets et Layouts

Un widget est une description immuable d'une partie d'une interface utilisateur. En
général les widgets sont des éléments de l’interface graphique des utilisateurs.
Les widgets Flutter sont construits à l'aide d'un cadre moderne qui s'inspire de React.
L'idée centrale est que vous construisez votre interface utilisateur à partir de widgets.
Les widgets décrivent à quoi devrait ressembler leur vue compte tenu de leur
configuration et de leur état actuel. Lorsque l'état d'un widget change, le widget
reconstruit sa description, que le Framework diffère de la description précédente afin
de déterminer les changements minimaux nécessaires dans l'arborescence de rendu
sous-jacente pour passer d'un état à l'autre.

Exemple 1 : Bonjour le monde

L'application Flutter minimale appelle simplement la runApp() fonction avec un

widget:
 ~ 42 ~

La runApp() fonction prend le donné Widget et en fait la racine de

l'arborescence des widgets. Dans cet exemple, l'arborescence des widgets se compose
de deux widgets, le Center widget et son enfant, le Text widget. Le framework force
le widget racine à couvrir l'écran, ce qui signifie que le texte « Hello, world » se
retrouve centré sur l'écran. La direction du texte doit être spécifiée dans cette instance ;
lorsque le MaterialApp widget est utilisé, cela est pris en charge pour vous, comme
démontré plus tard. Un SafeArea widget est également utilisé pour
remplir correctement le texte afin qu'il apparaisse sous l'affichage en haut de l'écran.
A. Les State Widget

Lorsque vous écrivez une application, vous créez généralement de nouveaux

widgets qui sont des sous-classes de l'un StatelessWidget ou l' autre StatefulWidget,
selon que votre widget gère un état ou non. Le travail principal d'un widget est
d'implémenter une build() fonction, qui décrit le widget en termes d'autres widgets de
niveau inférieur. Le framework construit ces widgets à tour de rôle jusqu'à ce que le
processus aboutisse dans des widgets qui représentent le sousjacent RenderObject, qui
calcule et décrit la géométrie du widget.

- StatefulWidget : Un widget dont l'état est mutable. L'état est une information qui
(1) peut être lue de manière synchrone lorsque le widget est
construit et (2) peut changer pendant la durée de vie du widget. Il est de la
responsabilité de l'implémenteur du widget de s'assurer que l' État est rapidement
notifié lorsqu'un tel état change, à l'aide de [Link] .
Un widget avec état est un widget qui décrit une partie de l'interface utilisateur en
créant une constellation d'autres widgets qui décrivent l'interface utilisateur plus
concrètement. Le processus de construction se poursuit de manière récursive jusqu'à
ce que la description de l'interface utilisateur soit entièrement concrète (par
 ~ 43 ~

exemple, se compose entièrement de RenderObjectWidget , qui décrivent

des RenderObject concrets ). Les widgets avec état sont utiles lorsque la partie de
l'interface utilisateur que vous décrivez peut changer dynamiquement, par exemple
en raison d'un état interne piloté par l'horloge, ou en fonction d'un état du
système. Pour les compositions qui dépendent uniquement des informations de
configuration de l'objet lui-même et du BuildContext dans lequel le widget est
gonflé, envisagez d'utiliser StatelessWidget . Les instances StatefulWidget elles-
mêmes sont immuables et stockent leur état mutable soit dans des objets State
séparés créés par la méthode createState , soit dans des objets auxquels cet State
souscrit, par exemple des objets Stream ou ChangeNotifier , auxquels les références
sont stockées dans les champs finaux du StatefulWidget. lui-même.

Le framework appelle createState chaque fois qu'il gonfle un StatefulWidget , ce

qui signifie que plusieurs objets State peuvent être associés au même StatefulWidget si
ce widget a été inséré dans l'arborescence à plusieurs endroits. De même, si un
StatefulWidget est supprimé de l'arborescence puis inséré à nouveau dans
l'arborescence, le framework appellera à nouveau createState pour créer un
nouvel objet State , simplifiant le cycle de vie des objets State . Un StatefulWidget
conserve le même objet State lors du déplacement d'un emplacement
dans l'arborescence à un autre si son créateur a utilisé une GlobalKey pour sa clé.

Étant donné qu'un widget avec une GlobalKey peut être utilisé dans au plus un
emplacement dans l'arborescence, un widget qui utilise une GlobalKey a au plus un
élément associé. Le framework tire parti de cette propriété lors du déplacement d'un
widget avec une clé globale d'un emplacement dans l'arborescence à un autre en
greffant le sous-arbre (unique) associé à ce widget de l'ancien emplacement au nouvel
emplacement (au lieu de recréer le sous-arbre au nouvel emplacement). Les objets
State associés à StatefulWidgetsont greffés avec le reste du sous-arbre, ce qui signifie
que l'objet State est réutilisé (au lieu d'être recréé) dans le nouvel emplacement.

Cependant, pour pouvoir être greffé, le widget doit être inséré dans le nouvel
emplacement dans le même cadre d'animation dans lequel il a été supprimé de
l'ancien emplacement. Il existe deux catégories principales de StatefulWidget. Le
 ~ 44 ~

premier est celui qui alloue des ressources dans [Link] et les supprime dans
[Link] , mais qui ne dépend pas des InheritedWidget ou d'appeler [Link].

Ces widgets sont couramment utilisés à la racine d'une application ou d'une

page et communiquent avec des sous-widgets via ChangeNotifier , Stream ou d'autres
objets de ce type. Les widgets avec état suivant un tel modèle sont relativement bon
marché (en termes de cycles CPU et GPU), car ils sont construits une fois puis ne sont
jamais mis à jour. Ils peuvent donc avoir des méthodes de construction quelque peu
compliquées et profondes. La deuxième catégorie concerne les widgets qui utilisent
[Link] ou dépendent d' InheritedWidget s. Ceux-ci seront généralement
reconstruits plusieurs fois pendant la durée de vie de l'application, et il est donc
important de minimiser l'impact de la reconstruction d'un tel widget. (Ils peuvent
également utiliser [Link] ou [Link] et allouer des
ressources, mais l'important est qu'ils reconstruisent.) Il existe plusieurs techniques que
l'on peut utiliser pour minimiser l'impact de la reconstruction d'un widget avec état:

❖ Poussez l'état aux feuilles. Par exemple, si votre page a une horloge, plutôt que
de mettre l'état en haut de la page et de reconstruire la page entière à chaque
fois que l'horloge tourne, créez un widget d'horloge dédié qui se met à jour
uniquement ;
❖ Réduisez le nombre de nœuds créés de manière transitoire par la méthode de
construction et les widgets qu'elle crée. Idéalement, un widget avec état ne
créerait qu'un seul widget, et ce widget serait un RenderObjectWidget .
(Évidemment, ce n'est pas toujours pratique, mais plus un widget se rapproche
de cet idéal, plus il sera efficace.)
❖ Si un sous-arbre ne change pas, mettez en cache le widget qui représente ce
sousarbre et réutilisez-le chaque fois qu'il peut être utilisé. Il est massivement
plus efficace pour un widget d'être réutilisé que pour un nouveau widget (mais
configuré de manière identique) à créer. La factorisation de la partie avec état
dans un widget qui prend un argument enfant est une façon courante de le
faire ;
❖ Utilisez des constwidgets dans la mesure du possible. (Cela équivaut à mettre en
cache un widget et à le réutiliser.) ;
 ~ 45 ~

❖ Évitez de modifier la profondeur des sous-arborescences créées ou de changer le

type des widgets de la sous-arborescence. Par exemple, plutôt que de renvoyer
l'enfant ou l'enfant encapsulé dans un IgnorePointer , enveloppez toujours le
widget enfant dans un IgnorePointer et contrôlez la propriété
[Link] . En effet, changer la profondeur du sous-arbre nécessite
de reconstruire, de disposer et de peindre l'intégralité du sous-arbre, alors que
le simple fait de changer la propriété nécessitera le moins de
changement possible dans l'arborescence de rendu (dans le cas de
IgnorePointer, par exemple, pas de mise en page ou de est nécessaire du tout).
❖ Si la profondeur doit être modifiée pour une raison quelconque, envisagez
d'encapsuler les parties communes des sous-arbres dans des widgets qui ont
une GlobalKey qui reste cohérente pendant la durée de vie du widget avec
état. (Le widget KeyedSubtree peut être utile à cette fin si aucun autre widget
ne peut facilement se voir attribuer la clé.)

Exemple 1 : Ceci est un squelette d'une sous-classe de widget avec état appelée
YellowBird. Dans cet exemple. L’État n'a pas d'État réel. L'état est normalement
représenté sous forme de champs de membres privés. De plus, les widgets ont
normalement plus d'arguments de constructeur, chacun correspondant à une finale
propriété.