Développement Mobile
iOS (Hybride) avec Flutter
Comprendre les bases du développement d’application mobile à
destination de l’écosystème iOS. Être capable de développer des
applications de bout en bout avec les meilleures pratiques de
développement. Tester et publier une application iOS dans le App Store.
Professeur : AGBAVON Kokou Bienvenu
Université : Collège de Paris
Classe : B2 – IT
Dernière Mise à Jour : 08 Avril 2024
Objectifs du cours :
A la fin de ce cours, l’étudiant aura acquis une compréhension approfondie du
développement des applications mobiles sous iOS. Notamment :
• Une maîtrise des concepts fondamentaux et les meilleurs pratiques de
développement sous iOS.
• Avoir des compétences pratiques dans la création d’applications iOS
fonctionnelles et réactives.
En détail, l’étudiant devra être en mesure de :
• Créer des interfaces utilisateurs riches ;
• Comprendre des composants et déterminer la différence entre un composant
sans état et un composant avec état ;
• Gérer efficacement l’état d’une application (état partagé par plusieurs
composants) ;
• Utiliser une base de données locale pour manipuler les données d’une
application ;
• Intégrer des services externes et des APIs dans une application ;
• Dynamiser l’interactivité d’une application avec les notifications PUSH ;
• Mettre en place des services en background et contrôler le cycle de vie d’une
application ;
• Demander l’accès et utiliser les capteurs d’un appareil : Camera, GPS,
Bluetooth, …
• Architecturer correctement les fonctionnalités et services de son application
suivant un modèle donné.
• Développer et publier un package sur un gestionnaire de dépendances
([Link], ..).
• Déboguer et tester son application dans différents environnements.
• Profiler son application pour détecter les goulots d’étranglements et améliorer
les performances.
• Publier son application dans les boutiques d’applications (Google Play, F-
Droid, Futur Console, …)
D’un point de vue général, l’étudiant devra être en mesure également de :
• Développer de bout en bout une application mobile iOS, de la spécification
des besoins au déploiement, dans une boutique d’applications et au
monitoring de l’application en exécution.
• De faire les bons choix d’architectures, d’organisation des dossiers, de plugins
lors de l’implémentation des fonctionnalités.
• D’automatiser les processus de build, de test, de release et de monitoring de
ses applications.
Prérequis :
Pour être en mesure de suivre et comprendre aisément le contenu du cours, il est
recommandé que les étudiants aient des notions de bases dans les thématiques
suivantes :
o Système d’exploitation Ordinateur et Mobile ;
o Installation et Configuration d’environnements de développements ;
o Langage de programmation, et programmation orienté objet.
o Fonctionnement des APIs REST, GraphQL ;
o Bases de données ;
o Développement Web, et stylisation d’une page avec CSS.
Pour être en mesure de mettre en pratique les concepts appris, il est recommandé
que les étudiants aient :
• Un MAC
o A partir de macOS 10.15 (Catalina)
o Minimum 8Go de RAM
o 500 Go d’espace de stockage
o Puissance CPU minimale équivalente à celle d’un Core Intel i5, ou d’un
M1 ;
• Un câble USB de débogage ;
• Un smartphone sous iOS (Optionnel).
Programme du cours :
1. Notions de bases du développement d’applications mobiles pour
l’écosystème :
a. Naissance et évolution de l’écosystème iOS.
b. Présentations des outils de développement pour l’écosystème iOS et
de leur fonctionnement.
2. Introduction à Flutter.
a. Genèse et Historique
b. Installation et configuration des outils de développement.
c. Commandes de bases de Flutter (CLI)
d. Création de la première application et explication de l’architecture des
dossiers.
e. Ressources complémentaires
f. TP : Utilisation de Git et initialisation du répertoire de travail.
3. Notions de bases du développement d’application pour Android avec Flutter
a. Notions de bases de Dart
b. Introduction aux Widgets et au declarative UI
c. Différents types de Widgets et leurs rôles
d. Configuration des Widgets
4. Widgets
a. Stateless & Stateful Widgets
b. Cycle de vie d’un stateful widget
c. Gestion d’état dans un stateful Widget
d. Styled Widgets
e. Material Widgets
f. Création et Navigation entre différentes pages.
g. TP : Réplication des interfaces des applications les plus populaires.
5. Intégration des ressources
a. Intégration de package externe.
b. Ajout et manipulations de ressources fichiers (images, vidéos, json,
textes, icônes, audios, PDF, …).
c. Intégration et configuration d’une police externe
d. Permissions et utilisations des capteurs du téléphone (Bluetooth, GPS,
Camera, ...) ;
e. TP : Gestion automatisée des ressources avec Assets Generator.
6. Création d’interfaces uniformes
a. Principes de Design
b. Configuration et utilisation du thème de l’application
c. TP : Création d’une application avec une interface uniforme et une
gestion du mode nuit.
7. Stockage local dans une application
a. Shared Preferences
b. SQLite
c. TP : Création d’une application, avec persistance des données
8. Gestion d’état
a. ValueNotifier et ListenableBuilder
b. Inherited Widget
c. Provider
d. Riverpod et Bloc/Cubit
e. TP : Dynamiser le fonctionnement d’une application avec un système
de gestion d’état.
9. Intégration des APIs externes
a. Notions avancées de la programmation avec Dart
b. API Rest
c. Firebase
d. Services tierces
10. Notions avancées
a. Structuration d’un projet Flutter
b. Cycle de vie d’une application
c. Construire et dessiner ses propres composants
d. Animations
e. Fonctionnement en arrière-plan, et en background
f. Notifications Push
11. Test et publication de son application
a. Tests unitaires
b. Widgets testing
c. Integration testing
d. Build, Déploiement et Distribution de son application
12. Aller plus loin
a. Injection de dépendance
b. Principes SOLID
c. Design Patterns
d. Publier son package
e. TDD, BDD, Clean architecture
f. Monitoring de son application
Evaluation :
• Contrôle(s) continu(s) (TD ou TP) - 50% de la note finale.
• Examen final ou Projet Final – 50% de la note finale.
L’étudiant est encouragé à :
• Participer activement au cours ;
• Prendre des initiatives, poser des questions pour approfondir les explications ;
• Continuer l’apprentissage en dehors des heures de cours et continuer les
travaux pratiques initiés en classe.
Documentation :
• Beginning Flutter - A hands on guide to app development.
• Dart apprentice
• Flutter Complete Reference
• Flutter Cookbook
Toute la documentation est accessible sur ce lien.
INTRODUCTION
La révélation sur scène du premier écran tactile et de ses premiers usages par Steve
Jobs en 2007 a été un marqueur décisif dans l’histoire de la technologie mobile.
Avec le lancement de l'iPhone, Apple a non seulement introduit un appareil
révolutionnaire, mais a également posé les bases d'un écosystème robuste,
sécurisé, et performant. Ce système d'exploitation, initialement connu sous le nom
d'iPhone OS et rebaptisé plus tard iOS, s'est rapidement imposé comme une
référence incontournable. Bien plus tard plusieurs autres déclinaisons ont vu le jour,
pour étendre les fonctionnalités du système à d’autres types d’appareils (iPads,
Apple Watches, et Apple TVs).
Aujourd'hui, environ 30% des smartphones dans le monde utilisent iOS, avec une
prédominance notable en Amérique du Nord, en Europe, et dans d'autres régions à
fort pouvoir d'achat. L'écosystème iOS est réputé pour sa stabilité, la cohérence de
ses applications, et la qualité des expériences utilisateur qu'il propose. Il propose
également une interconnectivité entre ses différents appareils et cloisonne ses
utilisateurs dans une ensemble fermé qui leur limite l’extensibilité, mais garantit une
sécurité. L’App Store, lancé en 2008, a joué un rôle crucial en démocratisant l'accès
aux applications mobiles, en facilitant la distribution et la monétisation pour les
développeurs.
Avec l'essor des applications mobiles, de nombreux outils et frameworks de
développement ont vu le jour. D’abord uniquement fournit par Apple, leur objectif est
de simplifier la création d'applications de haute qualité. D’Objective-C, à SwiftUI (la
dernière évolution proposée par Apple), en passant par Interface Builder, ces
frameworks ont longtemps été les seules options crédibles, offertes aux
développeurs pour développer des applications natives pour les iPhones. Mais en
2015, avec React Native, ensuite avec Flutter en 2017, d’autres outils et frameworks
se sont distingués, en offrant une expérience de développement d’applications
plaisante pour iOS ; avec la particularité qu’ils permettaient à partir de la même base
de code, de cibler d’autres plateformes dont Android.
Flutter permet aux développeurs de concevoir des interfaces utilisateur riches et
performantes pour iOS et Android, tout en maintenant une grande cohérence et une
optimisation maximale.
Dans ce cours, nous allons explorer l'écosystème iOS et comprendre les différentes
options pour développer des applications sur cette plateforme. Nous nous
concentrerons ensuite sur Flutter, l'outil cross-plateforme innovant de Google, pour
voir comment il peut être utilisé pour développer des applications modernes,
visuellement attrayantes, et performantes, tout en respectant les standards les plus
récents en matière de design, d'utilisabilité et de robustesse.
Chapitre 1
Développement d’applications
mobiles pour l’écosystème iOS.
De MacOS, au noyau XNU, puis à iOS en passant par les améliorations
d’iOS et des outils de développement.
A) Naissance et évolution de l’écosystème
iPhone OS devenu iOS, est basé sur le noyau XNU (X is NOT UNIX), le même
noyau sur lequel est basé MacOS, le système d’exploitation des ordinateurs MAC.
En 2005, lorsque Apple se lance dans le développement d’un système d’exploitation
pour appareils mobiles, ses ingénieurs avaient le choix entre partir de MAC, et
adapter son utilisation par un appareil plus petit, ou partir de l’iPod et adapter son
utilisation par un appareil plus grand. Deux équipes vont travailler en parallèle sur les
deux solutions, et au final la première solution (partir de MAC) sera jugée comme
plus pertinente. Cette solution avait également l’avantage de permettre aux
développeurs habitués déjà à la plateforme macOS, de pouvoir se servir de cette
base pour concevoir des applications pour le nouveau système sans devoir
réapprendre un nouveau SDK de zéro.
En 2007, l’iPhone OS et son appareil l’iPhone sont dévoilés. Dans la vision d’Apple
l’iPhone, est un appareil mobile exécutant des applications de bureau. Même si au
départ, le développement d’applications tiers n’est pas supporté (Apple
recommandant de développer des applications Web à la place), très vite l’entreprise
comprend que c’est une nécessité et annonce le développement actif d’un Kit de
développement à disposition des développeurs souhaitant développer des
applications natives pour la plateforme.
Ce Kit sera lancé au début de l’année 2008, et quelques mois après on comptait déjà
plus de 500 applications, sur l’App Store, l’application permettant aux utilisateurs
d’avoir accès à toutes les applications. Entre 2008 et 2013, les applications se
multiplient pour atteindre le million, et on estime aujourd’hui que la boutique contient
plus de 5 millions d’applications.
Le système d’exploitation iOS est basé sur l'architecture ARM ; d’abord uniquement
les versions 32 bits, puis en 2013 à partir d’iOS 7 un support 64 bits complet. Depuis
son lancement en 2007, de multiples versions chacune apportant son lot de
nouveautés se sont succédées. La dernière version d’iOS à ce jour est la version 17.
Apple est aujourd’hui dans une mise à jour incrémentale toute l’année du système
d’exploitation avec une nouvelle version majeure par an.
B) Outils de développement
Pour développer une application sur iOS, 3 approches s’offrent au développeur :
• Développement natif : utiliser Objective-C ou Swift, avec XCode et le SDK
iOS.
• Développement cross-platform : React Native (pour les familiers du Web et de
React JS) ou Flutter (familiers de Java, Javascript, et Web), permettant autant
de développer pour Android, qu’iOS, le Web ou le Desktop.
• Développement hybride : Utiliser les technologies du Web, HTML, CSS et JS
puis les empaqueter dans un navigateur léger qui va exécuter l’application
Web comme une application mobile.
Chacune des options présente des avantages et inconvénients. Aujourd’hui le
développement hybride est quasiment à l’abandon et grâce à des outils comme
Flutter, la différence de performance entre une application écrite avec un framework
cross-platform et un langage natif s’amenuit.
Depuis 2019, Apple recommande pour le développement pour la plateforme iOS,
l’utilisation de Swift et SwiftUI, au détriment d’Objective-C et d’autres outils de
développement (UIKit/Cocoa Touch, AppKit).
Chapitre 2
Introduction à Flutter
Du début de son développement en 2015, à son lancement en 2017 et à ses
différentes évolutions, introduction à Flutter et détails sur les particularités de son
fonctionnement sur iOS.
A) Genèse
De ses débuts en 2015, à son annonce en 2017 puis a ses évolutions permanentes,
Flutter s’est imposé aujourd’hui comme le framework de développement natif le plus
populaire et le plus utilisé.
A l’origine le but était d’offrir un outil permettant de développer des applications
mobiles (Android, iOS) performantes, qui peuvent s’exécuter jusqu’à 120 FPS, et
offrir des composants préconçus (Widgets) pour le prototypage des interfaces.
Il offre aujourd’hui une alternative crédible et de choix en termes de performance,
d’aisance de développement et d’écosystèmes aux outils de développement mobiles
natives (JetPack Compose, Swift UI) et cross-platform (React Native) ; tout en étant
un acteur de choix dans le développement d’applications PC.
En 2023, on estime qu’un million d’applications mobiles publiées dans les boutiques
d’applications ont utilisé Flutter.
Chronologie :
1. En 2015, Google a annoncé officiellement travailler sur un nouveau SDK,
basé sur le langage Dart (nom initial : Sky Engine).
2. 2017 : première version alpha (0.0.6) avec pour démonstration l’application
Hamilton.
3. 2018, année charnière qui a vu la première version bêta et le premier release
(1.0).
4. 2021 : Flutter 2.0 est annoncé, avec le début du support de la compilation vers
les systèmes d’exploitation pour ordinateurs (Windows).
5. 2022, année de maturité pour le support de Windows, MacOs et Linux.
B) Particularités de Flutter avec iOS
L’équipe de Flutter a fait le choix de Dart comme langage de base du framework.
Dart peut être compilé vers du Javascript, du code machine (Android, iOS, le Web,
macOS, Linux et Windows), ou le Web Assembly.
Une application native iOS est composé de deux parties :
• La partie graphique composé des vues (interfaces visuelles), qui fait appel aux
graphiques et au GPU pour s’exécuter. Les moteurs de rendu sont les
modules logiciels permettant de transformer les interfaces (fichiers de code)
en pixels affichées sur l’écran de l’utilisateur (un peu comme les moteurs de
rendu des navigateurs – blink, gecko - transforme le code CSS et HTML en
interface visuelle sur le Web).
• Et une partie de code logicielle (les actions performées derrière la vue) qui
s’exécute sur le CPU, transformant les instructions en code machine.
Généralement les frameworks cross-platforms fournissent uniquement une
abstraction permettant de faire appel aux graphiques de la plateforme cible. Flutter a
fait le choix de disposer de son propre moteur de rendu pour les interfaces
graphiques créées grâces aux composants fournis avec le SDK. Ce choix a plusieurs
conséquences :
• Flutter contrôle chaque pixel qui est dessiné dans une application créée avec
le Framework ; et comme son moteur est performant, il offre des
performances de rendu inégalées.
• Le choix est laissé au développeur de respecter les design guidelines de la
plateforme cible. Une application développée avec les UI guidelines les
composants et le look & feel d’iOS (Cupertino) conservera cet affichage peu
importe la plateforme cible de compilation ; et vice-versa.
Au contraire de React Native qui appelle et communique avec le composant natif de
chaque plateforme, Flutter utilise Skia, ou Impeller (deux moteurs de rendu) pour
créer le rendu et communiquer avec le système d’exploitation hôte. Pour la
conversion du code, CocoaPods, la librairie de gestion des dépendances pour
Objective-C et Swift est utilisée pour faire la conversion entre le code Dart, et leur
équivalent native sous le système iOS.
Flutter crée un dossier ios chargé de faire la conversion entre le code Dart, et une
application native iOS. Cette conversion se fait sans l’intervention du développeur ;
du code natif écrit en Swift (ou Objective-C) est chargé de faire cette conversion.
Flutter crée un bundle de tout le code Dart (UI & Code) et l’intègre dans
l’[Link] généré avant l’empaquetage en tant qu’application iOS. Flutter
s’intègre avec l’outil XCode pour fournir la compilation en fichier ipa, installable. Lors
du débogage le développeur a besoin d’observer rapidement les changements qu’il
opère dans le code. Deux modes de compilation sont possibles :
• Rechargement à chaud (Hot Reload) : génère automatiquement dans le
dossier cible (target) le code exécutable permettant d’observer les
modifications effectuées directement sur l’interface actuelle, sans devoir
relancer l’application.
• Relancement à chaud (Hot Restart) : génère le code exécutable, tout en
relançant l’application (redémarrage de l’application depuis la première
interface).
Cette vidéo fournit tous les détails de comment Flutter s’intègre dans l’écosystème
des applications iOS pour fournir le meilleur compromis entre une application
nativement compilé, des performances élevées et une compatibilité avec les
applications développées en utilisant le SDK d’iOS.
L’architecture complète permettant cette prouesse est expliquée par l’équipe Flutter
dans ce document.
C) Installation de Flutter
Pour exécuter sa première application Flutter pour iOS différents outils doivent être
configurés suivant votre machine : En résume :
• Git : le logiciel de gestion de code source.
• XCode (macOS) avec les simulateurs iOS.
• VS Code, ou Android Studio/IntelliJ Idea.
• La librairie de gestion de dépendances CocoaPods.
• Le SDK de Flutter.
Toutes les étapes sont résumées dans cette documentation en ligne. Vous pouvez
utiliser un téléphone réel iOS pour tester les applications en temps réel ou le
simulateur iOS, permettant de tester l’application sur différentes versions de l’OS.
L’installation de Flutter fournit tous les outils nécessaires pour développer des
applications avec le langage Dart.
Pour créer sa première application Flutter, plusieurs options :
• Choisir Nouveau Projet Flutter dans son éditeur de code préféré (VS Code,
Android Studio) ;
• Utiliser la CLI de Flutter : flutter create [nom_application].
D) TP : Utilisation de Git et initialisation du répertoire du cours.
Pour apprendre efficacement et de manière pratique comment développer de A à Z,
une application mobile iOS performante et scalable nous allons prendre un exemple
d’applications utilisées tous les jours et au fil des séances ajouter les briques de
manière successive pour aboutir au résultat final, que nous déploierons dans une
boutique d’applications.
Les exemples d’applications typiques sont :
• Une application de mobilité, like GoZem : la super-app de l’Afrique, Uber, ou
Yango.
• Une application e-commerce.
• Une application de livraison de repas, Kaba, Uber Eats.
• Un réseau social, Telegram, Instagram.
• Une application de messagerie : Messenger, WhatsApp.
Un répertoire contiendra toutes les modifications effectuées au fur et à mesure.
Chaque étudiant devra disposer de sa branche dans le dépôt du répertoire ; des
travaux pratiques pouvant servir de notes de classe seront fournis à la fin de chaque
cours.
Chaque étudiant devra sans excuse être en mesure de reprendre le code à l’état
actuel et continuer le développement.
Chapitre 3
Développement d’applications iOS
avec Flutter.
De Dart, au tout est un composant en Flutter, aux notions de bases d’un
composant UI réutilisable, aux différents formes, variétés et utilisations
des composants
A) Dart, le langage : notions de bases
Dart est le langage principal, autour duquel s’architecture le développement des
applications avec Flutter.
Dans la majorité des cas, la maitrise seule de Dart permet de développer des
applications pouvant s’exécuter sur les deux plateformes mobiles principales (iOS,
Android). Néanmoins, il faut également comprendre les configurations, et les
différents fichiers indispensables dans le processus de transformation du code
Dart/natif vers un exécutable suivant la plateforme cible. Ainsi, pour construire des
applications iOS, il est nécessaire de comprendre quelques outils et fichiers, comme
le fichier [Link], Xcode and CocoaPods. Dans certains cas spécifiques, il peut être
nécessaire d’écrire du code natif à une plateforme, dans le langage par défaut de
cette plateforme cible (Swift, Objective-C pour Android).
Dart est un langage moderne, et autonome qui peut être utilisé pour écrire des
applications console, mobiles, web et desktop (avec Flutter) ou serveur. Sa syntaxe
est proche de celui du C et de Java & Javascript. Le code Dart est convertible vers
ce dernier grâce au compilateur dart2js. Créé à l’origine à 2011, comme un
remplaçant plus robuste et typé à Javascript, il était d’abord orienté vers le
développement Web ; ensuite depuis sa version 2.0, la sortie de Flutter il est sorti
connu pour son utilisation dans cet écosystème ; aujourd’hui son utilisation pour
développer des applications serveurs a pour but de faciliter le partage de code entre
une application mobile et une application backend. Dart offre le choix au développeur
de choisir son paradigme de développement : fonctionnel ou orienté objet, typé
statiquement ou dynamiquement… Il est flexible, et offre des performances élevées
dans tous les environnements (mobile, PC, embarqué).
Dart est testable directement dans le navigateur grâce au Dart pad. Pour développer
localement sur sa machine avec Dart, il peut être installé individuellement (il est
embarqué par défaut avec Flutter) ; ensuite un éditeur de code comme VS Code
(avec l’extension officiel de Dart) peut être utilisé, pour développer des applications
console, web, serveur, etc.
1. Les opérateurs.
Dans Dart, les opérateurs ne sont rien de plus que des méthodes définies dans des
classes avec une syntaxe spéciale. Ainsi, lorsque vous utilisez des opérateurs tels
que x == y, c'est comme si vous invoquiez la méthode x.==(y) pour comparer
l'égalité. Comme vous l'avez peut-être remarqué, nous invoquons une méthode sur
x, ce qui signifie que x est une instance d'une classe qui a des méthodes. Dans Dart,
tout est un objet. Ce concept signifie que les opérateurs peuvent être remplacés afin
que vous puissiez écrire votre propre logique pour eux
Dart a les types d’opérateurs suivants :
• Arithmétique
• Incrémentation et décrémentation
• Égalité et relationnel
• Vérification de type et Casting
• Opérateurs logiques
• Manipulation de bits
• Null-safe et null-aware (les langages de programmation modernes fournissent
cet opérateur pour faciliter la gestion des valeurs nulles)
a) Opérateurs Arithmétiques
Dart est livré avec de nombreux opérateurs typiques qui fonctionnent comme de
nombreux langages de programmation :
• + : C'est pour l'addition de nombres.
• - : C'est pour la soustraction.
• * : C'est pour la multiplication.
• / : C'est pour la division.
• ~/ : c'est pour la division entière. Dans Dart, toute division simple avec / donne
une valeur décimale. Pour obtenir uniquement la partie entière, vous auriez
besoin de faire une sorte de transformation (c'est-à-dire de transtypage) dans
d'autres langages de programmation ; cependant, ici, l'opérateur de division
entière fait cette tâche.
• % : C'est pour les opérations modulo (le reste de la division entière). q-
expression : C'est pour la négation (qui inverse le signe de
l'expression).Certains opérateurs ont un comportement différent selon le type
d'opérande gauche ; par exemple, l'opérateur + peut être utilisé pour
additionner des variables de type num, mais aussi pour concaténer des
chaînes.
Dart fournit également des opérateurs de raccourci pour combiner une affectation à
un variable après une autre opération. Le raccourci arithmétique ou d'affectation les
opérateurs sont +=, -=, *=, /= et ~/=.
b) Opérateurs d’incrémentations et de décrémentations
Les opérateurs d'incrémentation et de décrémentation sont également des
opérateurs courants et sont implémentés en type numérique, comme suit :
• ++var ou var++ pour incrémenter 1 dans var
• --var ou var-- pour décrémenter 1 de var
Les opérateurs d'incrémentation et de décrémentation de Dart n'ont rien de différent
de la norme dans les autres langages. Une bonne application des opérateurs
d'incrémentation et de décrémentation est pour l’opération d’itération dans les
boucles.
c) Égalité et opérateurs relationnels
Les opérateurs Dart d'égalité sont les suivants :
• == : pour vérifier si les opérandes sont égaux
• != : pour vérifier si les opérandes sont différents
Pour les tests relationnels, les opérateurs sont les suivants :
• > : Pour vérifier si l'opérande de gauche est supérieur à celui de droite
• < : pour vérifier si l'opérande de gauche est inférieur ou égal à celui de droite
• >= : pour vérifier si l'opérande de gauche est supérieur ou égal à celui de
droite
• <= : pour vérifier si l'opérande de gauche est inférieur ou égal à celui de droite
d) Opérateurs de typage et de casting
Dart a un type facultatif, comme vous le savez déjà, donc les opérateurs de
vérification de type peuvent être utiles pour vérifier les types à l'exécution :
• is : pour vérifier si l'opérande a le type testé
• is! : pour vérifier si l'opérande n'a pas le type testé.
La sortie de ce code sera différente selon le contexte de l'exécution. Dans DartPad,
la sortie est vraie pour le contrôle de type double ; c'est dû à la manière dont
JavaScript traite les nombres et, comme vous le savez déjà, Dart pour le Web est
précompilé en JavaScript pour l'exécution sur les navigateurs Web. Il y a aussi le mot
clé as, qui est utilisé pour le transtypage d'un super type à un sous-type, comme
convertir num en int.
e) Opérateurs logiques
Les opérateurs logiques dans Dart sont les opérateurs communs appliqués aux
opérandes booléens ; ils peuvent être variables, expressions ou conditions. De plus,
ils peuvent être combinés avec des expressions en combinant les résultats des
expressions. Les opérateurs logiques fournis sont comme suit :
• ! expression : pour annuler le résultat d'une expression, c'est-à-dire vrai à
faux et faux à vrai
• || : Pour appliquer un OU logique entre deux expressions
• && : pour appliquer un ET logique entre deux expressions
f) Manipulation de bits
Dart fournit des opérateurs bit à bit et de décalage pour manipuler des bits
individuels de nombres, généralement avec le type numérique. Ils sont les suivants :
• & : pour appliquer le ET logique aux opérandes, en vérifiant si les bits
correspondants sont les deux 1
• | : Pour appliquer le OU logique aux opérandes, en vérifiant si au moins l'un
des bits correspondants sont 1
• ^ : pour appliquer le XOR logique aux opérandes, en vérifiant si un seul mais
pas les deux des bits correspondants est 1
• ~ opérande : pour inverser les bits de l'opérande, par exemple les 1
deviennent des 0 et des 0 devenir 1
• << : Pour décaler l'opérande gauche de x bits vers la gauche (cela décale 0
de la droite)
• >> : Pour décaler l'opérande gauche de x bits vers la droite (en supprimant les
bits de la gauche). Comme les opérateurs arithmétiques, ceux au niveau du
bit ont également des opérateurs d'affectation de raccourci, et ils fonctionnent
exactement de la même manière que ceux présentés précédemment ; ce sont
<<=, >>=, &=, ^= et |=.
g) Null-safe et null-aware
Suivant la tendance des langages POO modernes, Dart fournit une syntaxe null-safe
qui évalue et renvoie une expression en fonction de sa valeur nulle/non nulle.
L'évaluation fonctionne de la manière suivante : si expression1 n'est pas nulle, elle
renvoie sa valeur ; sinon, il évalue et renvoie la valeur de expression2 : expression1
??expression2. En plus de l'opérateur d'affectation commun, =, et de ceux
répertoriés dans les opérateurs, Dart fournit également une combinaison entre
l'affectation et la valeur nulle expression ; c'est-à dire l'opérateur ??=, qui affecte une
valeur à une variable uniquement si sa valeur actuelle est nulle.
Dart fournit également un opérateur d'accès sensible aux valeurs nulles, ?., qui
empêche l'accès aux propriétés d’un objet null.
2. Types et variables
Vous savez probablement déjà comment déclarer une variable simple, c'est-à-dire en
utilisant le mot-clé var suivi du nom. Une chose à noter est que lorsque nous n'avons
pas précisé la valeur initiale de la variable, elle prend la valeur null quel que soit son
type.
• final et const
Lorsque vous utilisez les mots clés final et const pour déclarer variable, sa variable
ne pourra plus être modifiée : : final children = 1 ;; .
La valeur de la variable children ne peut pas être modifiée une fois qu'elle est
initialisée. const children = 1;
Tout comme le mot-clé final, avec le mot clé const la valeur de children ne peut pas
être modifiée une fois qu'elle est initialisée, et son initialisation doit être
accompagnée d'une déclaration. En plus de cela, le mot-clé const définit une
constante de compilation. En temps de compilation constante, les valeurs const sont
connues au moment de la compilation. Ils peuvent également être utilisés pour faire
instances d'objet ou Listes immuables, comme suit :
const list = const [1, 2, 3]
// ou
const point = const Point(1,2)
Cela définira la valeur des deux variables pendant la compilation, les transformant en
complètement variables immuables.
a) Les types intégrés
Dart est un langage de programmation à type sûr, donc les types sont obligatoires
pour les variables. Bien que les types soient obligatoires, les annotations de type
sont optionnelles, ce qui signifie que vous n'avez pas besoin de spécifier le type
d'une variable lorsque vous la déclarez.
Dart effectue une inférence de type et nous examinerons davantage cela dans la
section Inférence de type - apportant du dynamisme. Voici les types de données
intégrés dans Dart :
• Nombres (tels que num, int et double)
• Booléens (tels que bool)
• Collections (tels que les listes, tableaux et cartes)
• Chaînes
• Nombres
Dart représente les nombres de deux manières :
• int : des valeurs entières non fractionnaires signées de 64 bits telles que -263
à 263-1.
• double : Dart représente les valeurs numériques fractionnaires avec un
nombre à virgule flottante à double précision de 64 bits.
Les deux héritent du type num. De plus, nous avons de nombreuses fonctions
pratiques dans la bibliothèque dart:math pour aider aux calculs.
• BigInt
Dart a également le type BigInt pour représenter des entiers à précision arbitraire, ce
qui signifie que la limite de taille est la mémoire vive de l'ordinateur en cours
d'exécution. Ce type peut être très utile en fonction du contexte ; cependant, il n'a
pas les mêmes performances que les types num et vous devriez en tenir compte
lorsque vous décidez de l'utiliser.
• Booléens
Dart fournit les deux valeurs littérales bien connues pour le type bool: true et false.
Les types booléens sont des valeurs de vérité simples qui peuvent être utiles pour
toute logique. Une chose que vous avez peut être remarquée, mais que je veux
renforcer, est à propos des expressions. Nous savons déjà que les opérateurs, tels
que > ou ==, par exemple, ne sont rien de plus que des méthodes avec une syntaxe
spéciale définies dans des classes, et, bien sûr, ils ont une valeur de retour qui peut
être évaluée dans des conditions. Donc, le type de retour de toutes ces expressions
est bool et, comme vous le savez déjà, les expressions booléennes sont importantes
dans n'importe quel langage de programmation.
• Collections
En Dart, les listes fonctionnent exactement comme les tableaux dans d'autres
langages de programmation avec quelques méthodes pratiques pour manipuler les
éléments. Les listes ont l'opérateur [index] pour accéder aux éléments à l'index
donné et, en outre, l'opérateur + peut être utilisé pour concaténer deux listes en
renvoyant une nouvelle liste avec l'opérande de gauche suivi de celui de droite.
Une autre chose importante à propos des listes Dart est la contrainte de longueur.
Cela se fait lorsque nous définissons les listes précédentes, en les faisant grandir au
besoin en utilisant la méthode add pour ajouter l'élément.
Une autre façon de définir la liste est en définissant sa longueur lors de sa création.
Les listes de taille fixe ne peuvent pas être étendues, il est donc de la responsabilité
du développeur de savoir où et quand utiliser les listes de taille fixe, car cela peut
lancer des exceptions si vous essayez d'ajouter ou d'accéder à des éléments non
valides.
Les Maps Dart sont des collections dynamiques pour stocker des valeurs sur une
base de clé, où la récupération et la modification d'une valeur sont toujours
effectuées en utilisant sa clé associée. Les clés et les valeurs peuvent avoir
n'importe quel type ; si nous ne spécifions pas les types clé-valeur, ils seront inférés
par Dart en tant que Map<dynamic,dynamic>, avec ses clés et valeurs de type
dynamique.
• Les chaînes
En Dart, les chaînes sont une séquence de caractères (code UTF-16) qui sont
principalement utilisées pour représenter le texte. Les chaînes Dart peuvent être sur
une seule ligne ou sur plusieurs lignes. Vous pouvez utiliser des guillemets simples
ou doubles (généralement pour les lignes simples) et les chaînes multi-lignes en
utilisant des guillemets triples. Nous pouvons utiliser l'opérateur + pour concaténer
des chaînes. Le type de chaîne implémente des opérateurs utiles autres que le plus
(+). Il implémente l'opérateur de multiplication (*) où la chaîne est répétée un nombre
spécifié de fois, et l'opérateur [index] récupère le caractère à la position d'index
spécifiée.
• L’interpolation des chaînes
L'interpolation de chaîne est une façon d'inclure des expressions à l'intérieur des
littéraux de chaîne. Il vous permet d'intégrer des expressions dans une chaîne en
utilisant la syntaxe ${expression}, où expression est une expression valide de Dart.
var x = 5 ;
var y = 7 ;
print(‘La somme de $x et $y est ${x + y}.’) ; // La somme de 5 et 7 est 12.
L'interpolation de chaîne est un moyen plus lisible et pratique pour inclure des
valeurs dynamiques dans une chaîne, par rapport à la concaténation manuelle de
chaînes.
3. Fonctions d’entrée et sortie
Dart propose plusieurs façons d'effectuer des opérations d'entrée et de sortie dans la
console.
• print() : Elle est utilisée pour afficher une chaîne ou toute autre valeur sur la
console. La fonction println() est similaire à print() mais elle ajoute un
caractère de nouvelle ligne à la fin, ce qui est utile lors de l’affichage de
plusieurs lignes de texte.
• Méthodes [Link]() et [Link]() : les objets stdout et stderr sont
des instances de la classe IOSink, qui fournissent des méthodes pour écrire
des données dans les flux de sortie standard et d'erreur standard. La méthode
write() est utilisée pour écrire une chaîne ou toute autre valeur dans la
console.
• Méthode [Link]() : L'objet stdin est une instance de la classe
Stdin, qui fournit la méthode readLineSync() pour lire une ligne de texte à
partir du flux d'entrée standard. Cette méthode bloque l'exécution du
programme jusqu'à ce que l'utilisateur entre une ligne de texte et appuie sur la
touche Entrée.
4. Flux de contrôles et boucles
Nous avons examiné comment utiliser les variables et les opérateurs de Dart pour
créer des expressions. Pour travailler avec des variables et des opérateurs, nous
avons généralement besoin d'implémenter un certain flux de contrôle pour que notre
code Dart prenne la direction appropriée dans notre logique.
Dart fournit une syntaxe de flux de contrôle très similaire à celle des autres langages
de programmation. Nous avons les mêmes implémentations que les instructions
comme :
• if-else
• switch/case
• Boucles avec for, while et do-while
• break et continue
• Exceptions avec try/catch et throw
5. Fonctions & Paramètres
Dart est un véritable langage orienté objet, donc même les fonctions sont des objets
et ont un type, Function. Cela signifie que les fonctions peuvent être affectées à des
variables ou passées en tant qu’arguments à d’autres fonctions. Vous pouvez
également appeler une instance d’une classe Dart comme s’il s’agissait d’une
fonction. Pour plus d’informations, consultez Objets appelables.
Les fonctions en Dart sont définies en utilisant le mot-clé void si elles ne retournent
rien, ou le type de retour si elles renvoient une valeur. Les fonctions peuvent
également prendre des paramètres.
// Fonction qui retourne la somme de deux entiers
int add(int a, int b) {
return a + b;
}
// Fonction qui affiche un message
void greet(String name) {
print('Hello, $name!');
}
void main() {
var result = add(5, 3);
print('Sum: $result');
greet('Amah Kwatchah');
}
Boucles
Dart prend en charge différentes structures de boucle, telles que for, while et do-
while.
void main() {
// Boucle for
for (int i = 0; i < 5; i++) {
print('i: $i');
}
// Boucle while
int j = 0;
while (j < 5) {
print('j: $j');
j++;
}
// Boucle do-while
int k = 0;
do {
print('k: $k');
k++;
} while (k < 5);
}
6. Programmation orienté objet
La programmation orientée objet (POO) est un paradigme de programmation qui
utilise des objets et des classes pour organiser le code de manière plus modulable et
réutilisable. Dart est un langage entièrement orienté objet, ce qui signifie que chaque
valeur est un objet, même les types de base comme les nombres et les chaînes de
caractères.
a. Classe
Une classe est un modèle pour créer des objets. Elle définit des propriétés
(variables) et des méthodes (fonctions) qui décrivent le comportement des objets
créés à partir de cette classe.
class Personne {
// Propriétés
String name;
int age;
// Constructeur
Personne([Link], [Link]);
// Méthode
void hello() {
print('Hello, je me nomme $name et j’ai $age an(s).');
}
}
void main() {
// Instanciation d'un objet Person
var afi = Personne('Afi', 30);
[Link](); // Appelle la méthode salut de l'objet Personne afi
}
b. Interface
En Dart, il n'y a pas de mot-clé spécifique pour définir une interface comme dans
certains autres langages de programmation (par exemple, interface en Java). Au
lieu de cela, toute classe peut servir d'interface en définissant des méthodes et des
propriétés que d'autres classes peuvent implémenter. Dans ce cas pour indiquer
qu’une classe comporte des méthodes que les classes filles doivent implémenter, sa
déclaration est précédée du mot clé abstract. Une classe qui implémente une
interface doit fournir des implémentations pour toutes les méthodes et propriétés de
cette interface.
Définir une interface
Pour définir une interface, il suffit de créer une classe avec des méthodes et des
propriétés. Voici un exemple simple :
abstract class Animal {
void emettreUnSon();
}
Ici, Animal est une interface qui définit une méthode emettreUnSon. Toute classe
qui implémente cette interface doit fournir une implémentation de emettreUnSon.
Implémenter une interface
Pour implémenter une interface, une classe doit utiliser le mot-clé implements et
fournir des implémentations pour toutes les méthodes et propriétés définies dans
l'interface.
Classe Dog :
class Chien implements Animal {
@override
void emettreUnSon() {
print(‘Aboiement’);
}
}
Classe Chat :
class Chat implements Animal {
@override
void emettreUnSon() {
print(‘Miauler’);
}
}
Exécution
void main() {
var bergerAllemand = Chien();
var chat = Chat();
[Link](); // Sortie: Aboiement
[Link](); // Sortie: Miauler
}
Une classe abstraite (dont la déclaration est précédée du mot clé abstract) peut
avoir une ou plusieurs méthodes ou propriétés abstraites (getter).
c. Classe énumérée
Les énumérations (enums) permettent de définir un type avec un ensemble de
valeurs constantes et prédéfinies. Elles sont particulièrement utiles pour représenter
des collections d'éléments liés, tels que des jours de la semaine, des directions, des
états, etc. Les énumérations en Dart sont définies en utilisant le mot-clé enum.
Définir une énumération
Voici comment définir une énumération simple :
enum Direction {
nord,
sud,
est,
ouest,
}
Utiliser une énumération
Une fois l'énumération définie, vous pouvez l'utiliser dans votre code comme suit :
void main() {
var direction = [Link];
switch (direction) {
case [Link]:
print('En direction vers le nord');
break;
case [Link]:
print(‘En direction vers le sud’);
break;
case [Link]:
print(“En direction vers l’est”);
break;
case [Link]:
print(“En direction vers l’ouest”);
break;
}
}
Vous pouvez accéder à toutes les valeurs d'une énumération en utilisant la propriété
statique values :
void main() {
for (var direction in [Link]) {
print(‘$direction, ’); //Sortie : [Link], [Link], [Link],
//[Link]
}
}
Les énumérations peuvent être étendues en y ajoutant des méthodes et des
attributs.
enum Direction {
nord('N'),
sud('S'),
est('E'),
ouest(‘O’);
final String shortName;
const Direction([Link]);
void describe() {
print('Direction: $this, short name: $shortName');
}
}
void main() {
Direction direction = [Link];
[Link](); // Output: Direction: [Link], short name: E
}
d. Mixin
Les mixins sont des classes permettant d’étendre d’autres classes, de faciliter la
réutilisabilité du code sans utiliser le principe de l’héritage. Pour déclarer un mixin on
utilise le mot clé mixin. Dans la classe, on ajoute les propriétés, les méthodes et
attributs qui seront inclus dans les autres classes intégrant ce mixin.
Mixin permettant d’afficher une information en console :
mixin Logger {
void log() {
print([Link]()) ;
}
}
class Personne with Logger {
String name ;
Personne([Link]);
@override
String toString() {
return 'Nom : $name' ;
}
}
void main() {
Personne afi = Personne(‘Afi’) ;
[Link]() ; //Sortie : Nom : Afi
}
7. Bibliothèques et Packages
En plus du SDK et des méthodes et classes qu’il fournit, le développeur Dart a accès
au travers du gestionnaire de packages ([Link]) à plus de 8000 autres librairies de
codes qu’il peut intégrer dans son application. Les bibliothèques (librairies) sont des
collections de code regroupées pour un usage spécifique, tandis que les packages
sont des unités de code partageables qui peuvent contenir des bibliothèques, des
ressources, et d'autres fichiers.
Bibliothèques en Dart
Les bibliothèques en Dart permettent de regrouper du code pour une réutilisation
facile. Vous pouvez créer une bibliothèque en utilisant le mot-clé library et importer
d'autres bibliothèques avec import.
Définir une bibliothèque
Pour définir une bibliothèque, utilisez le mot-clé library au début de votre fichier :
// math_library.dart
library math_library;
int add(int a, int b) => a + b;
int subtract(int a, int b) => a - b;
Utiliser une bibliothèque
Pour utiliser une bibliothèque, vous devez l'importer avec le mot-clé import :
import 'math_library.dart';
void main() {
print(add(2, 3)); // Sortie: 5
print(subtract(5, 2)); // Sortie: 3
}
Intégration d’un package
L’intégration d’un package dans une application Dart est fonction de son
emplacement/hébergement. Il existe 3 cas d’usages courants :
• Package dans le même système de fichiers que l’application : pour
l’intégration le chemin relatif depuis l’application vers le dossier du package
doit être connu.
• Package hébergé sur un dépôt Git hébergé en ligne : dans ce cas l’utilisateur
doit avoir accès au repos et connaître le lien direct vers la dépendance.
• Package partagé sur un gestionnaire de dépendances en ligne : pour
l’intégration le gestionnaire de dépendances et le nom de ce package doivent
être connus.
Création d’un package
Pour créer un package Dart il faut exécuter la commande :
dart create -t package <NOM_PACKAGE>
Après la création du package, on obtient un dossier lib qui doit contenir le code des
librairies de ce package, et un fichier [Link] qui contient les références
(nom, version, description, …) du package, ainsi que les autres packages dont il
dépend.
B) Structuration d’une application Flutter
Une application Flutter est un package/application Dart, étendue du SDK de Flutter
qui permet de créer des applications visuellement enrichies pouvant s’exécuter sur
plusieurs plateformes : Android, iOS, Web, Linux, MacOS, Windows.
Pour créer une application Flutter, il faut exécuter la commande :
flutter create nom_application
Pour connaître tous les arguments de cette commande et des autres commandes de
la ligne de commande flutter, vous pouvez vous documenter sur le site officiel de
Flutter ([Link] ou ce site de références.
Lorsqu'un projet Flutter est créé, une structure de dossiers par défaut est générée.
Voici une vue d'ensemble de la structure générale et le rôle de chaque dossier :
nom_application/
├── android/
├── build/
├── ios/
├── lib/
│ └── [Link]
├── test/
├── web/
├── windows/
├── macos/
├── linux/
├── [Link]
├── [Link]
├── .gitignore
└── analysis_options.yaml
Cette architecture peut différer légèrement suivant les arguments passés à la
commande et la plateforme d’exécution.
Fonction des fichiers et dossiers
• android : Contient le code et les configurations spécifiques à la plateforme
Android. Ce dossier est utilisé par Flutter pour générer une application
Android. Vous pouvez y ajouter des configurations spécifiques, des
dépendances natives ou des permissions.
• build : Contient les fichiers générés automatiquement lors de la compilation de
votre application. Ce dossier est généralement ignoré par l’outil de contrôle de
version (un fichier .gitignore l’excluant est généré par défaut).
• ios : Contient le code et les configurations spécifiques à la plateforme iOS. Ce
dossier est utilisé par Flutter pour générer une application iOS. Vous pouvez y
ajouter des configurations spécifiques, des dépendances natives ou des
permissions.
• lib : Contient le code source principal de votre application Flutter. Par
convention, le fichier [Link] est le point d'entrée de l'application. C'est ici
que vous structurez et organisez le code de votre application.
• test : Contient les tests unitaires et d'intégration pour l’application. Les tests
sont importants pour s'assurer que votre application fonctionne comme prévu.
• web : Contient les fichiers spécifiques à la version web de votre application
Flutter. Les configurations et ressources spécifiques à l’application Web
doivent y être ajoutées.
• [Link] : C’est le fichier de configuration principale d’une application
Flutter. Il contient des informations sur les dépendances, les ressources de
votre projet, les assets, les fonts, les configurations, etc.
• analysis_options.yaml : Permet de configurer les règles d'analyse statique du
code et des dépendances de notre projet. Il permet de définir des règles de
style de code et des règles de formatage du code pour maintenir la qualité du
code dans votre projet.
Un dossier Windows, Linux, MacOS peuvent également être créé. Ils jouent le même
rôle que les dossiers Android et iOS pour les plateformes spécifiques.
C) Rôles et fonctions des fichiers du dossier ios
Le dossier ios dans une application Flutter contient toutes les configurations et les
fichiers nécessaires pour construire, configurer, et exécuter la version iOS de
l'application. Il contient entre autres, la configuration du projet XCode, les
dépendances gérées par CocoaPods, les ressources de l'application et les scripts
de configuration. Chaque fichier et dossier joue un rôle spécifique ; et le tout s’intègre
pour assurer que l'application fonctionne correctement sur les appareils iOS,
s’intègre à l’écosystème existant et offre le moins de frictions possibles aux
développeurs.
Voici les principaux fichiers et dossiers présents dans le dossier ios ainsi que leurs
fonctions :
• [Link] : dossier contenant toutes les configurations du projet
XCode pour l’application Flutter. Il gère les paramètres du projet, y compris les
dépendances, les configurations de build, et d'autres réglages nécessaires
pour compiler l'application iOS.
• [Link] : dossier constituant le point d’entrée du projet dans
XCode. C’est un espace de travail XCode qui inclut le projet et les
dépendances utilisées. Il fait le lien entre les bibliothèques externes et les
équivalents CocoaPods.
• Podfile : fichier de référence des dépendances pour le projet iOS.
• [Link] : Fichier généré par CocoaPods lors de l’installation des
dépendances pour spécifier les versions installées. Il permet de s’assurer que
toutes les personnes travaillant sur le projet utilisent les mêmes versions des
dépendances.
• Runner : c’est le dossier principal contenant les fichiers spécifiques à
l'application. Il contient les ressources, les configurations, et les fichiers
sources pour l'application iOS.
o [Link] ou AppDelegate.m : Point d'entrée principal de
l'application iOS, gère le cycle de vie de l'application.
o [Link] : dossier contenant les ressources telles que les
images, les icônes de l'application, et les logos.
o [Link] : fichier de configuration qui contient les paramètres de
l'application, et permet de configurer ses permissions (localisation,
camera, contacts, galleries, bluetooth, …), les icônes, les modes de
lancement, et d'autres métadonnées (versions cibles d’iOS, …).
o [Link] : fichier d’interface graphique utilisée lors du
lancement de l'application avant que l’application Flutter ne soit chargé.
Voici une liste non exhaustive du contenu du dossier ios. Suivant l’application, les
ressources qu’il requiert et ses dépendances, le développeur peut avoir besoin de
modifier plusieurs l’un ou plusieurs de ces fichiers.
D) Configuration de son éditeur de code
Pour écrire des applications Flutter en bénéficiant d’une expérience développeur
améliorée, il est essentiel de configurer son éditeur de code pour prendre en charge
Flutter et Dart.
Pour écrire des applications Flutter il est recommandé d’utiliser VS Code, Android
Studio ou IntelliJ IDEA. Les deux derniers étant payant et des logiciels commerciales,
le plus simple pour démarrer c’est de télécharger ou d’utiliser une version en ligne de
Visual Studio Code ([Link]
Configuration de VS Code pour le développement avec Flutter
1. Dans l’onglet Extensions de VS Code, rechercher et ajouter l’extension Flutter
fournit par l’équipe de développement de Flutter. Cette action installera
également l’extension pour la prise en compte du Langage Dart. *
2. Dans les paramètres de votre éditeur VS Code, ajouter ces configurations :
{
"[Link]": "chemin/absolu/vers/votre/sdk/flutter",
"[Link]": true,
"[Link]": {
"[Link]": true
}
}
Cela permet d’indiquer à l’éditeur l’emplacement du SDK de Flutter installé sur
votre machine. Les autres actions, permettent d’auto-formatter votre code
Flutter à l’enregistrement.
Cet article revient en détail sur les différentes configurations possibles.
E) Introductions aux composants de bases d’une application Flutter
Chaque application Flutter commence également par la méthode main. Au
lancement (exécution) d’une application (commande : flutter run), le programme
s’attend à trouver dans le dossier lib, un fichier [Link] contenant une méthode
main. Le nom du fichier peut être indiqué en supplément lors de l’exécution de la
commande.
Dans le cas de Flutter, le lancement de Flutter implique l’affichage à l’écran d’une
interface, suivant la plateforme cible.
Dans une application Flutter il faut distinguer :
• L’interface visuelle est constituée d’une imbrication de composants appelés
Widgets. Un Widget est une classe héritant de la classe Widget. Il représente,
toute l’application, une page, une portion d’une page, un champ de saisie, etc
…
• Et le code qui est exécuté avant, pendant, après l’affichage des composants
ou qui s’exécute lorsque l’utilisateur interagit avec une partie de l’interface
visuelle de l’application.
F) Tout est un Widget en Flutter
Dans Flutter tous les éléments permettant de définir l’interface visuelle d’une
application héritent de la classe Widget et sont donc des composants.
Pour illustrer cette notion, pour définir une marge sur un composant, ce dernier doit
être incorporé dans un autre composant nommé Padding, permettant de définir la
marge autour de son composant enfant (child). Il devient donc le parent du
composant auquel il applique une marge.
G) Différents types et styles de Composants et utilisations
Tous les composants prédéfinis dans le catalogue du kit de développement de
Flutter sont référencés sur cette page et classés suivant leurs utilisations. Pour les
consulter dans un ordre alphabétique, référez-vous à cette page.
Voici les principales catégories de composants et leurs rôles dans Flutter :
• Basiques : composants de base, qui forment l’architecture de base d’une
application et d’une page en Flutter.
o Container : Un widget polyvalent pour le dimensionnement, le
positionnement, le stylisme et le contrôle de la disposition des enfants.
o Column : Un widget qui affiche ses enfants en une colonne verticale.
o Row : Un widget qui affiche ses enfants en une rangée horizontale.
o Stack : Un widget qui permet de superposer ses enfants les uns sur les
autres.
o Scaffold : Le widget de base pour une structure visuelle d'application. Il
offre un API standard pour les applications ayant une barre
d'application, un tiroir, une navigation entre plusieurs interfaces en bas
de page, ...
o AppBar : Une barre d'application en haut de la page qui peut contenir
un titre, des actions et des onglets.
o Text : Un widget pour afficher une ligne de texte avec un seul style.
• Images, ressources et icônes : permettent d’afficher une image, ou une icône
sur une page.
o Image : Un widget pour afficher une image. Peut charger des images
depuis différentes sources (réseau, fichier local, assets).
o Icon : Un widget pour afficher une icône de la bibliothèque de Material
Icons ou une icône personnalisée.
• Composant d’entrées : permettent de recueillir de l’information auprès de
l’utilisateur, au travers des formulaires de saisies.
o TextField : Un champ de saisie de texte.
o Checkbox : Un widget permettant de sélectionner ou désélectionner
une option.
o Radio : Un bouton radio pour sélectionner une seule option dans un
groupe.
o Switch : Un widget pour basculer entre deux états (marche/arrêt).
o Slider : Un widget pour sélectionner une valeur dans une plage
continue de valeurs.
o DropdownButton : Un menu déroulant pour sélectionner une seule
option parmi plusieurs.
• Boutons : Ces composants représentent des boutons permettant d'initier des
actions utilisateurs.
o ElevatedButton : Un bouton avec une élévation matérielle.
o TextButton : Un bouton plat sans élévation.
o OutlinedButton : Un bouton avec une bordure.
o IconButton : Un bouton contenant une icône.
o FloatingActionButton : Un bouton flottant circulaire.
• Mise en Page : Ils aident à organiser et à structurer les widgets dans une
interface utilisateur.
o Padding : Un widget qui ajoute des marges autour de son enfant.
o Align : Un widget qui aligne son enfant selon une position.
o Center : Un widget qui centre son enfant.
o Expanded : Un widget qui prend tout l'espace disponible le long de
l'axe principal.
o Flexible : Un widget qui prend l'espace disponible selon une proportion
spécifiée.
o Spacer : Un widget pour créer de l'espace vide dans une direction
donnée.
• Navigation et Routage : sont utiles pour la navigation entre différentes pages
et écrans.
o Navigator : Un widget pour gérer l'historique des routes et la
navigation.
o MaterialPageRoute : Une route qui utilise une transition de style
Material Design.
o Drawer : Un tiroir latéral qui peut contenir des liens de navigation.
En dehors des composants par défaut fournies avec le SDK, il en existe plusieurs
autres fournies par l’équipe de Flutter sous forme et de packages et une multitude
d’autres fournies par la communauté de développeurs.
Chapitre 4
Introduction aux Widgets
(composants)
Chapitre 5
Intégration de ressources externes
Chapitre 6
Création d’interfaces utilisateurs
uniformes et attrayantes
Chapitre 7
Stockage local des données d’une
application.
Chapitre 8
Gestion de l’état d’une application
Flutter.
Chapitre 9
Intégration d’APIs et de services
tierces.
Chapitre 10
Notions avancées de développement
d’applications avec Flutter.
Chapitre 11
Test, finalisation et publication de son
application Android.
Chapitre 12
Aller plus loin dans le développement
d’applications mobiles avec Flutter.
CONCLUSION
L'évolution d'Android, de ses modestes débuts en tant que système d'exploitation
pour caméras numériques à sa position dominante actuelle dans l'écosystème des
smartphones et autres appareils connectés, témoigne de la vision et de l'innovation
de ses créateurs. L'acquisition par Google en 2005 a été un tournant décisif,
propulsant Android vers une adoption massive avec plus de 70% des smartphones
dans le monde et 85% en Afrique utilisant ce système d'exploitation.
En parallèle, l'essor des applications mobiles a transformé notre manière d'interagir
avec nos appareils, rendant les smartphones indispensables dans notre quotidien.
La démocratisation des outils et des frameworks de développement a abaissé les
barrières techniques, permettant à un plus grand nombre de développeurs de créer
des applications innovantes et performantes.
Dans ce cours, nous avons exploré les fondements de l'écosystème Android et les
diverses options de développement disponibles. En nous concentrant sur Flutter,
l'outil cross-plateforme de Google, nous avons vu comment il est possible de
développer des applications modernes, riches visuellement, et performantes, tout en
respectant les standards les plus récents d'utilisabilité et de robustesse.
En somme, maîtriser Flutter offre aux développeurs une opportunité unique de créer
des applications de haute qualité pour une multitude de plateformes, tout en
s'intégrant pleinement dans l'écosystème Android en constante évolution.