Introduction au

Framework
Flutter
WORKSHOP SOKODE
 Omar Farouk KOUGBADA
Ingénieur Logiciel Senior Full Stack

@omarfarouk228
PROGRAMME
01 02 03
Présentation Ecosystème Avantages
Aperçu du Framework Tour d’horizon de l’ Avantages de Flutter pour
Flutter écosystème Flutter le développement mobile

04 05 06
Création d’un projet Structure d’un projet Intro aux Widgets
Comment démarrer un Organisation des fichiers Concepts fondamentaux
projet Flutter? d’un projet Flutter des widgets
PRESENTATION
● Flutter est un framework open source développé par Google pour la création d'applications
mobiles.
● Il permet de développer des applications multiplateformes avec une seule base de code, ce
qui signifie que vous pouvez créer des applications pour Android et iOS simultanément.
● Flutter utilise le langage de programmation Dart, qui est également développé par Google et
offre une syntaxe simple et concise.
● Il a connu sa première version stable en fin 2018.
ECOSYSTEME
● Flutter est livré avec un écosystème robuste comprenant des widgets, des outils et des
packages prêts à l'emploi.
● Les widgets sont les éléments de construction de l'interface utilisateur dans Flutter. Ils sont
hautement personnalisables et permettent de créer des interfaces attrayantes.
● Flutter dispose également d'une large gamme de packages qui étendent les fonctionnalités
de base, tels que l'intégration de services tiers, la gestion des états et bien plus encore.
● L'écosystème de Flutter est en constante évolution grâce à une communauté active qui
contribue régulièrement avec de nouveaux widgets et packages.
 Avantages
Un développement rapide
Grâce à sa hot-reload, Flutter permet de
voir les modifications apportées à
l'interface utilisateur en temps réel,
accélérant ainsi le processus de
développement.
Une seule base de code
Avec Flutter, vous n'avez pas besoin de
développer séparément pour Android et
iOS. Vous pouvez partager le même code
source entre les deux plateformes, ce qui
réduit les efforts et les coûts de
développement.
Performances élevées
Flutter utilise le rendu personnalisé et
direct, ce qui permet d'obtenir des
performances fluides et réactives.
Interface utilisateur attrayante
Les widgets de Flutter permettent de
créer des interfaces utilisateur
attrayantes et personnalisées, offrant
ainsi une expérience utilisateur de
qualité.
Documentation et support solides
Google fournit une documentation
complète et régulièrement mise à jour.
ENVIRONNEMENT FLUTTER
Votre meilleur guide pour la configuration de votre environnement
Flutter est la documentation officielle :
https://docs.flutter.dev/get-started/install
Création d’un projet
Pour démarrer un nouveau projet flutter
voici la ligne de commande à exécuter:
flutter create
output_directory>
<

Ici, output_directory sera également le

nom du projet Flutter si vous ne le
spécifiez pas en tant qu'argument.
Structure du projet
✔ android/ios/linux/macos/windows : Il contient les codes
spécifiques à chaque plateforme.
✔ koffavor.iml : Il s'agit d'un fichier de projet IntelliJ typique, qui
contient les informations JAVA_MODULE utilisées par l'IDE.
✔ répertoire lib : Il s'agit du dossier principal d'une application
Flutter ; le projet généré doit contenir au moins un fichier main.dart
pour commencer à travailler.
✔ pubspec.yaml et pubspec.lock : Ce fichier pubspec.yaml est ce
qui définit un package Dart. C'est l'un des principaux fichiers du
projet, dans lequel vous lister les dépendances de l'application et
dans le cas de Flutter plus que cela.
✔ README.md : Ce fichier contient généralement une description
du projet, et il est très courant dans les projets open source.
✔ Répertoire de test : Il contient tous les fichiers relatifs aux tests
du projet. Ici, nous pouvons ajouter des tests unitaires, et aussi des
tests de widgets en utilisant des paquets spécifiques à Flutter.
INTRODUCTION AUX WIDGETS
● Dans Flutter, les Widgets sont les éléments de construction de l'interface utilisateur.
● Les Widgets peuvent être de deux types : Stateful et Stateless.
● Comprendre la différence entre ces deux types de Widgets est essentiel pour bien gérer
l'état de votre application Flutter.
 Stateless Stateful
Un Stateless Widget est un widget immuable Un Stateful Widget est un widget mutable
dont l'état ne change pas après sa création. dont l'état peut changer au fil du temps.

Il est généralement utilisé pour représenter Il est utilisé lorsque vous avez besoin de
des parties de l'interface utilisateur qui n'ont gérer un état qui peut être modifié en
pas besoin de réagir aux changements d'état. réponse à des interactions utilisateur ou à
d'autres événements.

Les Stateless Widgets sont légers et Les Stateful Widgets sont plus complexes
efficaces en termes de performances. que les Stateless Widgets, car ils nécessitent
une classe d'état séparée pour gérer les
changements d'état.
CYCLE DE VIE D’UN STATEFUL WIDGET
Les Stateful Widgets passent par un cycle de vie qui comprend plusieurs méthodes
importantes :
● createState() : Cette méthode est appelée lors de la création initiale du widget et renvoie
une instance de la classe d'état associée.
● initState() : Cette méthode est appelée une seule fois après la création du widget et est
utilisée pour initialiser l'état.
● build() : Cette méthode est appelée à chaque fois que l'état du widget doit être reconstruit,
généralement en réponse à des changements d'état.
● dispose() : Cette méthode est appelée lorsque le widget est supprimé de l'arborescence
des widgets et permet de libérer des ressources.
UTILISATION DE STATEFUL/STATELESS WIDGET
• Les Stateless Widgets sont utilisés lorsque vous n'avez pas besoin de gérer l'état dans votre
interface utilisateur.
• Les Stateful Widgets sont utilisés lorsque vous devez gérer un état mutable dans votre
application.
• Vous pouvez combiner les deux types de Widgets pour créer des interfaces utilisateur
dynamiques et réactives.
Merci
Des questions?
Komarf28@gmail.com
@omarfarouk228
https://ofaroukk.com