FORMATION COMPLETE SUR` FLUTTER

ENOK-Dev

6 aout 2023ˆ
Table des matieres`
1 Introduction a Flutter`..................................................................................................................... 1
1.1 Qu’est-ce que Flutter?.................................................................................................................. 1
1.2 Avantages de Flutter.................................................................................................................... 1
2 Installation et configuration........................................................................................................... 1
2.1 Installation de Flutter................................................................................................................... 1
2.2 Configuration de l’environnement............................................................................................. 2
2.2.1 Configuration pour Android..................................................................................................... 2
2.2.2 Configuration pour iOS............................................................................................................. 2
2.2.3 Configuration pour le Web....................................................................................................... 2
3 Creation d’un projet Flutter´.......................................................................................................... 3
3.1 Utilisation de la commande flutter create................................................................................. 3
3.2 Structure du projet Flutter.......................................................................................................... 3
4 Concepts fondamentaux................................................................................................................. 3
4.1 Widgets.......................................................................................................................................... 3
4.2 Hot Reload..................................................................................................................................... 4

4.3 Comprendre la fonction main() . . . . . . . . . . . . . . . . . . . . . . . . . 1

4.4 Creation d’un widget de base . . . . . . . . . . . . . . . . . . . . . . . . . . .´ 1
5 Exploration des widgets de base 2
5.1 MaterialApp et Scaffold . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
5.2 AppBar et FloatingActionButton . . . . . . . . . . . . . . . . . . . . . . . . . 2
5.3 Text et TextStyle ................................. 3
5.4 Image . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
6 Gestion des mises en page (Layout) 5
6.1 Introduction aux mises en page en Flutter .................... 5
6.2 Container .....................................5
6.3 Row et Column . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
6.4 ListView . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
7 Gestion des etats (State Management)´ 7
7.1 Introduction a la gestion des` etats en Flutter . . . . . . . . . . . . . . . . . . .´ 7
page 1
Cours Complet Sur Flutter
7.2 setState() et Stateful Widgets . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
7.3 Provider Package . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
7.4 Navigation entre les ecrans (Routes) . . . . . . . . . . . . . . . . . . . . . . .´ 1
7.5 Envoi de donnees´ a une nouvelle page . . . . . . . . . . . . . . . . . . . . . .` 2
7.6 Retour de donnees de la page pr´ ec´ edente . . . . . . . . . . . . . . . . . . . . .´ 3
8 Interaction avec les utilisateurs 5
8.1 Gestion des gestes (taps, swipes, etc.) . . . . . . . . . . . . . . . . . . . . . . 5
8.2 Dialogs et Snackbars . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .6
8.3 BottomSheet ................................... 7
Cours Complet Sur Flutter

9 Appel d’API et gestion des donnees´ 8

9.1 Utilisation de packages pour les appels d’API . . . . . . . . . . . . . . . . . . 8
9.2 Traitement des donnees JSON´. . . . . . . . . . . . . . . . . . . . . . . . . . 9
9.3 Affichage des donnees dans des widgets . . . . . . . . . . . . . . . . . . . . .´ 11
10 Themes et personnalisation` 12
10.1 Utilisation de themes pour personnaliser l’apparence` .............. 12
10.2 Creation de th´ emes personnalis` es . . . . . . . . . . . . . . . . . . . . . . . . .´ 13
11 Animation et transitions 14
11.1 Introduction aux animations en Flutter . . . . . . . . . . . . . . . . . . . . . . 14
11.2 Utilisation de l’API d’animation Flutter . . . . . . . . . . . . . . . . . . . . . 16
12 Gestion des formulaires 17
12.1 Creation de formulaires . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .´17
12.2 Validation des champs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
13 Gestion des etats´22
13.1 Gestion des etats avec StatefulWidget´ ...................... 22
13.2 Gestion des etats avec Provider . . . . . . . . . . . . . . . . . . . . . . . . . .´ 24
14 14. Gestion des formulaires 25
14.1 Creation de formulaires . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .´25
14.2 Validation des champs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
Formateur : ENOK-DEV INGENIEUR´ SYSTEME D` ’INFORMATION page 2
[email protected]
15 15. Publication de l’application 30
15.1 Compilation de l’application pour Android et iOS . . . . . . . . . . . . . . . . 30
15.2 Publication sur les app stores . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
16 16. Flutter pour le Web 31
16.1 Aperc¸u de la prise en charge du Web avec Flutter ................ 31
16.2 Differences par rapport au d´ eveloppement pour mobile . . . . . . . . . . . . .´ 31
17 Configuration de l’environnement 33
18 Creation du projet´ 33
19 Ajout des dependances´ 33
20 Configuration des iconesˆ 33
21 Creation des mod´ eles` 34
22 Creation du contr´ oleur (Controller)ˆ 34
23 Creation de l’interface utilisateur (UI)´ 34
24 Introduction 36
25 Configuration du projet 37

Formateur : ENOK-DEV INGENIEUR´ SYSTEME D` ’INFORMATION

[email protected]
26 Installation des dependances´ 37

27 Modele de donn` ees Task´ 37

27.1 Etats (task´ state.dart) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38

28 Bloc de gestion des tachesˆ 39

29 Ecran principal (HomeScreen)´ 40

30 Point d’entree de l’application (main.dart)´ 42

31 Conclusion 42

page 3
LES BASES FLUTTER

Enok-Dev
Cours Complet Sur Flutter

6 aout 2023ˆ

1 Introduction a Flutter`
1.1 Qu’est-ce que Flutter?
Flutter est un framework open-source developp´ e par Google pour cr´ eer des
applications´ multiplateformes de haute qualite. Il permet de d´ evelopper des applications
mobiles pour An-´ droid, iOS et meme le Webˆ a partir d’une seule base de code. Flutter
utilise le langage de` programmation Dart, qui est egalement d´ evelopp´ e par Google.´

1.2 Avantages de Flutter

Flutter offre plusieurs avantages significatifs pour le developpement d’applications mo-´ biles
:
— Performances elev´ ees : gr´ aceˆ a son moteur de rendu graphique personnalis` e, Flutter
offre´ des performances rapides et fluides.
— Hot Reload : cette fonctionnalite permet aux d´ eveloppeurs de voir instantan´ ement
les´ changements apportes au code sans red´ emarrer l’application, acc´ el´ erant ainsi
le proces-´ sus de developpement.´
— Interface utilisateur declarative : Flutter utilise une approche d´ eclarative pour la construc-
´ tion de l’interface utilisateur, ce qui facilite la comprehension et la maintenance du code.
´
— Widgets riches : Flutter propose une vaste bibliotheque de widgets personnalisables pour`
creer des interfaces utilisateur attrayantes.´
— Developpement multiplateforme : en´ ecrivant une seule base de code, les d´ eveloppeurs´
peuvent deployer leurs applications sur Android, iOS et le Web.´
— Communaute active : Flutter b´ en´ eficie d’une communaut´ e de d´ eveloppeurs
active, ce´ qui signifie qu’il existe de nombreux packages et ressources disponibles
pour faciliter le developpement.´

2 Installation et configuration
2.1 Installation de Flutter
Avant de commencer le developpement avec Flutter, vous devez installer Flutter sur votre´
systeme. Voici les` etapes pour l’installation :´
1. Rendez-vous sur le site officiel de Flutter : https://flutter.dev
2. Tel´ echargez la derni´ ere version de Flutter pour votre syst` eme d’exploitation
(Windows,` macOS ou Linux).
3. Extrayez l’archive tel´ echarg´ ee dans un r´ epertoire de votre choix.´

Formateur : ENOK-DEV INGENIEUR´ SYSTEME D` ’INFORMATION page 1

[email protected]
Cours Complet Sur Flutter

4. Ajoutez le chemin d’installation de Flutter a votre variable d’environnement PATH

pour` pouvoir y acceder depuis n’importe quel r´ epertoire dans votre terminal.´
5. Verifiez l’installation en ex´ ecutant la commande suivante dans votre terminal :´

flutter doctor

Cette commande verifie si tout est configur´ e correctement et vous indique si des d´
ependances´ supplementaires doivent´ etre installˆ ees.´
2.2 Configuration de l’environnement
Une fois Flutter installe, vous devez configurer votre environnement de d´
eveloppement pour´ cibler les plates-formes souhaitees (Android, iOS, Web). Voici les´
etapes de configuration pour´ chaque plate-forme :

2.2.1 Configuration pour Android

Pour developper des applications Android avec Flutter, vous devez installer Android Studio´
et configurer le SDK Android :
1. Tel´ echargez et installez Android Studio´ a partir du site officiel :`
https://developer. android.com/studio
2. Ouvrez Android Studio et accedez aux ”Pr´ ef´ erences” (ou ”Param´ etres” sur
Windows).`
3. Dans le menu ”SDK Manager”, installez les versions Android souhaitees (par exemple´
Android 10, Android 11, etc.).
4. Ajoutez le chemin du SDK Android a votre variable d’environnement ANDROID` HOME
pour que Flutter puisse le trouver.

2.2.2 Configuration pour iOS

Pour developper des applications iOS avec Flutter, vous devez configurer Xcode :´
1. Installez Xcode a partir de l’App Store sur votre Mac.`
2. Ouvrez Xcode et acceptez les conditions d’utilisation.
3. Installez les simulateurs iOS souhaites´ a partir de Xcode ¿ Pr` ef´ erences
¿ Composants.´
4. Verifiez que vous avez accept´ e la licence Xcode en ex´ ecutant la commande
suivante dans´ votre terminal :

sudo xcodebuild -license

2.2.3 Configuration pour le Web

Pour developper des applications Flutter pour le Web, vous devez activer la prise en charge´
du Web dans votre projet :

Formateur : ENOK-DEV INGENIEUR´ SYSTEME D` ’INFORMATION page 2

[email protected]
Cours Complet Sur Flutter

1. Executez la commande suivante dans votre terminal pour activer la prise en charge du´
Web :

flutter channel beta flutter

upgrade flutter config --enable-
web

2. Vous pouvez desormais cr´ eer des applications Flutter pour le Web en utilisant les m´
emesˆ commandes que pour Android et iOS.
3 Creation d’un projet Flutter´
3.1 Utilisation de la commande flutter create
Une fois que Flutter est installe et configur´ e sur votre syst´ eme, vous pouvez cr` eer un
nou-´ veau projet Flutter en utilisant la commande flutter create :
flutter create mon_projet_flutter

Cette commande creera un nouveau projet Flutter nomm´ e ”mon´ projet flutter” avec une
structure de fichiers de base.

3.2 Structure du projet Flutter

La structure de base d’un projet Flutter cre´e avec la commande´ flutter create est la
suivante :
— android/ : Ce repertoire contient le code sp´ ecifique´ a Android, y compris le fichier`
AndroidManifest.xml et les ressources.
— ios/ : Ce repertoire contient le code sp´ ecifique´ a iOS, y compris le fichier` Info.plist et
les ressources.
— lib/ : Ce repertoire contient le code Dart principal de votre application. Le fichier´ main.dart
est l’entree de l’application.´
— web/ : Ce repertoire contient le code sp´ ecifique au Web lorsque la prise en charge du´
Web est activee.´
— test/ : Ce repertoire contient les fichiers de test pour votre application.´
Vous pouvez commencer a d` evelopper votre application en modifiant le fichier´
lib/main.dart qui contient la fonction main() a partir de laquelle l’application est lanc` ee.´

4 Concepts fondamentaux
4.1 Widgets
Dans Flutter, tout est un widget. Un widget est un el´ ement de l’interface utilisateur, tel´
qu’un bouton, un champ de texte, une image, une mise en page, etc. Les widgets definissent

Formateur : ENOK-DEV INGENIEUR´ SYSTEME D` ’INFORMATION page 3

[email protected]
Cours Complet Sur Flutter

´ la structure et l’apparence de votre application. Il existe deux types de widgets : les widgets
Stateless et les widgets Stateful.
Les widgets Stateless sont des widgets dont l’etat ne change pas, ce qui signifie qu’ils
sont´ immuables. Ils sont utilises pour afficher des informations statiques dans votre
application.´ Voici un exemple de widget Stateless affichant un texte : import
’package:flutter/material.dart’;

class MyTextWidget extends StatelessWidget {

@override
Widget build(BuildContext context) { return
Text(’Hello, World!’);
}
}
Les widgets Stateful, en revanche, peuvent changer d’etat au fil du temps, ce qui signifie´
qu’ils sont mutables. Ils sont utilises pour afficher des informations qui peuvent´ etre modifiˆ
ees.´ Voici un exemple de widget Stateful affichant un compteur : import
’package:flutter/material.dart’;

class MyCounterWidget extends StatefulWidget {

@override
_MyCounterWidgetState createState() => _MyCounterWidgetState();
}

class _MyCounterWidgetState extends State<MyCounterWidget> { int _counter

= 0;

void _incrementCounter() { setState(() {

_counter++;
});
}

@override
Widget build(BuildContext context) { return
Column( children: [
Text(’Counter: $_counter’),
ElevatedButton( onPressed:
_incrementCounter, child:
Text(’Increment’),
),
],
);
}
}

Formateur : ENOK-DEV INGENIEUR´ SYSTEME D` ’INFORMATION page 4

[email protected]
Cours Complet Sur Flutter

Dans cet exemple, nous utilisons un widget Stateful pour afficher un compteur qui
s’incremente´ a chaque fois que le bouton est press` e.´

4.2 Hot Reload

L’une des fonctionnalites les plus puissantes de Flutter est le Hot Reload. Cette fonc-´
tionnalite vous permet de voir instantan´ ement les changements que vous apportez au code
´ sans redemarrer l’application. Cela acc´ el´ ere consid` erablement le processus de d´
eveloppement,´ car vous pouvez experimenter rapidement diff´ erentes modifications et
visualiser les r´ esultats´ immediatement.´
Pour utiliser Hot Reload, il vous suffit de modifier le code de votre application, puis
d’appuyer sur le bouton ”Hot Reload” dans votre IDE ou d’executer la commande ”flutter hot
´ reload” dans votre terminal.

Formateur : ENOK-DEV INGENIEUR´ SYSTEME D` ’INFORMATION page 5

[email protected]
EXPLORATION DES WIDGETS DE BASE

Enok-Dev
Cours Complet Sur Flutter

6 aout 2023ˆ

4.3 Comprendre la fonction main()

Dans une application Flutter, la fonction main() est le point d’entree de l’application. C’est
´ le premier code qui est execut´ e lorsque l’application est lanc´ ee. La fonction´ main()
appelle la fonction runApp() pour executer le widget racine de l’application.´ Voici un
exemple de la fonction main() :

import ’package:flutter/material.dart’;

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

Dans cet exemple, la fonction main() appelle la fonction runApp() en lui passant une instance de
MyApp(), qui est le widget racine de l’application.

4.4 Creation d’un widget de base´

Pour creer une application Flutter, vous devez cr´ eer un widget qui sera le point de d´ epart de´
votre interface utilisateur. Ce widget est gen´ eralement de type´ StatelessWidget ou StatefulWidget.
Voici un exemple d’un widget de base MyApp() qui affiche simplement un texte a l’` ecran :´ import
’package:flutter/material.dart’;

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

class MyApp extends StatelessWidget {

@override
Widget build(BuildContext context) { return
MaterialApp( home: Scaffold( appBar:
AppBar(
title: Text(’Mon Application Flutter’),
), body: Center( child: Text(’Bienvenue sur Flutter
!’),
),
),
);
}
}

Dans cet exemple, nous avons cre´e un widget´ MyApp qui est de type StatelessWidget.
Le widget retourne un MaterialApp comme widget racine, qui fournit une structure de base
pour notre application. Le MaterialApp contient un Scaffold qui fournit un appbar et un
corps pour afficher le texte ”Bienvenue sur Flutter!”.
Formateur : ENOK-DEV INGENIEUR´ SYSTEME D` ’INFORMATION page 1
[email protected]
Cours Complet Sur Flutter

5 Exploration des widgets de base

5.1 MaterialApp et Scaffold
MaterialApp est un widget qui implemente les sp´ ecifications de conception Material
De-´ sign de Google et fournit un point d’entree pour votre application Flutter. Il doit´ etre
utilisˆ e´ comme le widget racine de votre application. Scaffold est un widget qui implemente
la struc-´ ture de base d’une application mobile, comprenant une app bar pour les titres, un
corps pour afficher le contenu principal et bien plus encore.
Voici un exemple d’utilisation de MaterialApp et Scaffold :

import ’package:flutter/material.dart’;

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

class MyApp extends StatelessWidget {

@override
Widget build(BuildContext context) { return
MaterialApp( home: Scaffold( appBar:
AppBar( title: Text(’Mon Application Flutter’),
), body: Center( child: Text(’Bienvenue sur Flutter
!’),
),
),
);
}
}

Dans cet exemple, nous avons utilise´ MaterialApp comme le widget racine de
l’application et Scaffold pour definir la structure de base de la page, y compris l’app bar avec
le titre ”Mon´ Application Flutter” et le corps affichant le texte ”Bienvenue sur Flutter!”.

5.2 AppBar et FloatingActionButton

AppBar est un widget qui affiche une barre d’applications en haut de l’ecran. Elle est´ gen
´ eralement utilis´ ee pour afficher le titre de l’application et des actions telles que des
boutons´ de navigation. FloatingActionButton est un widget qui affiche un bouton flottant
circulaire gen´ eralement utilis´ e pour d´ eclencher une action principale dans l’application.´
Voici un exemple d’utilisation de AppBar et FloatingActionButton :

import ’package:flutter/material.dart’;

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

class MyApp extends StatelessWidget {

Formateur : ENOK-DEV INGENIEUR´ SYSTEME D` ’INFORMATION page 2
[email protected]
Cours Complet Sur Flutter

@override
Widget build(BuildContext context) { return
MaterialApp( home: Scaffold( appBar:
AppBar( title: Text(’Mon Application Flutter’),
), body: Center( child: Text(’Bienvenue sur Flutter
!’),
), floatingActionButton:
FloatingActionButton( onPressed: () {
// Action a` exe´cuter lorsque le bouton est presse´
}, child: Icon(Icons.add),
),
),
);
}
}

Dans cet exemple, nous avons ajoute une´ FloatingActionButton qui affiche une iconeˆ
d’ajout (Icon(Icons.add)). Lorsque le bouton est presse, une action sp´ ecifique peut´ etreˆ
execut´ ee en ajoutant une fonction´ a l’attribut` onPressed du FloatingActionButton.

5.3 Text et TextStyle

Le widget Text est utilise pour afficher du texte´ a l’` ecran. Vous pouvez personnaliser l’ap-´
parence du texte en utilisant le widget TextStyle.
Voici un exemple d’utilisation de Text et TextStyle :

import ’package:flutter/material.dart’;

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

class MyApp extends StatelessWidget {

@override
Widget build(BuildContext context) { return
MaterialApp( home: Scaffold( appBar:
AppBar( title: Text(’Mon Application Flutter’),
), body:
Center( child:
Text(
’Bienvenue sur Flutter !’, style:
TextStyle( fontSize: 24, fontWeight:
FontWeight.bold, color:
Colors.blue,
),
),
),
Formateur : ENOK-DEV INGENIEUR´ SYSTEME D` ’INFORMATION page 3
[email protected]
Cours Complet Sur Flutter

),
);
}
}

Dans cet exemple, nous avons utilise le widget´ Text pour afficher le texte ”Bienvenue sur
Flutter!” au centre de l’ecran. Nous avons´ egalement appliqu´ e un style personnalis´ e au
texte´ en utilisant le widget TextStyle, definissant la taille de la police, le poids de la police et
la´ couleur du texte.

5.4 Image
Le widget Image est utilise pour afficher des images dans votre application Flutter. Vous´
pouvez charger des images a partir de diff` erentes sources telles que le r´ eseau, le disque
local´ ou les ressources de l’application.
Voici un exemple d’utilisation du widget Image pour afficher une image a partir d’une URL`
reseau :´

import ’package:flutter/material.dart’;

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

class MyApp extends StatelessWidget {

@override
Widget build(BuildContext context) { return
MaterialApp( home: Scaffold( appBar:
AppBar( title: Text(’Mon Application Flutter’),
), body: Center( child:
Image.network(
’https://example.com/mon_image.jpg’,
width: 200, height: 200,
),
),
),
);
}
}

Dans cet exemple, nous avons utilise le widget´ Image.network pour afficher une image
a` partir de l’URL ”https ://example.com/mon image.jpg”. Nous avons egalement d´ efini la
largeur´ et la hauteur de l’image pour la redimensionner.

6 Gestion des mises en page (Layout)

Formateur : ENOK-DEV INGENIEUR´ SYSTEME D` ’INFORMATION page 4
[email protected]
Cours Complet Sur Flutter

6.1 Introduction aux mises en page en Flutter

Les mises en page en Flutter sont construites a l’aide de widgets qui d` efinissent
comment´ les el´ ements de l’interface utilisateur sont dispos´ es les uns par rapport aux
autres. Flutter offre´ une grande variet´ e de widgets de mise en page pour vous aider´ a cr`
eer des interfaces utilisateur´ dynamiques et reactives.´

6.2 Container
Le widget Container est un conteneur rectangulaire qui peut etre utilisˆ e pour d´ ecorer
ou´ aligner son enfant. Il peut egalement´ etre utilisˆ e pour ajouter un remplissage, des
marges et des´ bordures autour de son enfant.
Voici un exemple d’utilisation du widget Container :

import ’package:flutter/material.dart’;

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

class MyApp extends StatelessWidget {

@override
Widget build(BuildContext context) { return
MaterialApp( home: Scaffold( appBar:
AppBar(
title: Text(’Mon Application Flutter’),
), body: Center( child:
Container( width: 200, height: 200,
color: Colors.blue, child: Text(’Mon
Conteneur’),
),
),
),
);
}
}
Dans cet exemple, nous avons utilise le widget´ Container pour creer un conteneur rectan-´
gulaire de taille 200x200 avec un fond bleu et affichant le texte ”Mon Conteneur”.

6.3 Row et Column

Les widgets Row et Column sont utilises pour organiser leurs enfants en ligne (dans le cas
´ de Row) ou en colonne (dans le cas de Column). Ils sont tres utiles pour cr` eer des mises en
page´ horizontales ou verticales.

Formateur : ENOK-DEV INGENIEUR´ SYSTEME D` ’INFORMATION page 5

[email protected]
Cours Complet Sur Flutter

Voici un exemple d’utilisation de Row et Column :

import ’package:flutter/material.dart’;

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

class MyApp extends StatelessWidget {

@override
Widget build(BuildContext context) { return
MaterialApp( home: Scaffold( appBar:
AppBar( title: Text(’Mon Application Flutter’),
), body: Center( child: Column( mainAxisAlignment:
MainAxisAlignment.center, children: [ Text(’Ligne 1’),
Text(’Ligne 2’),
Text(’Ligne 3’),
],
),
),
),
);
}
}
Dans cet exemple, nous avons utilise le widget´ Column pour organiser trois widgets Text en
colonne, avec un espacement egal entre chaque´ el´ ement.´

6.4 ListView
Le widget ListView est utilise pour afficher une liste de widgets, g´ en´ eralement pour
affi-´ cher des donnees qui d´ epassent la taille de l’´ ecran.´ Voici un exemple d’utilisation de
ListView :
import ’package:flutter/material.dart’;

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

class MyApp extends StatelessWidget {

@override
Widget build(BuildContext context) { return
MaterialApp( home: Scaffold( appBar:
AppBar( title: Text(’Mon Application Flutter’),
), body:
ListView( children:
[
ListTile(title: Text(’´Ele´ment 1’)),

Formateur : ENOK-DEV INGENIEUR´ SYSTEME D` ’INFORMATION page 6

[email protected]
Cours Complet Sur Flutter

ListTile(title: Text(’´Ele´ment 2’)),

ListTile(title: Text(’´Ele´ment 3’)),
ListTile(title: Text(’´Ele´ment 4’)),
],
),
),
);
}
}

Dans cet exemple, nous avons utilise le widget´ ListView pour afficher une liste de quatre el
´ ements´ a l’aide de` ListTile.

7 Gestion des etats (State Management)´

7.1 Introduction a la gestion des` etats en Flutter´
La gestion des etats en Flutter est un aspect essentiel du d´ eveloppement d’applications,
car´ les etats d´ eterminent comment l’interface utilisateur r´ eagit aux interactions de
l’utilisateur et´ aux modifications des donnees.´
Flutter propose plusieurs methodes pour g´ erer les´ etats, notamment l’utilisation de´ setState()
avec des widgets Stateful et l’utilisation de packages de gestion d’etats tels que´ Provider.

7.2 setState() et Stateful Widgets

Le widget Stateful est utilise lorsque vous avez besoin de g´ erer un´ etat mutable dans votre´
application. Lorsqu’un etat change, vous pouvez utiliser la m´ ethode´ setState() pour notifier
Flutter que l’etat a´ et´ e modifi´ e et que l’interface utilisateur doit´ etre miseˆ a jour en cons`
equence.´ Voici un exemple d’utilisation de setState() avec un widget Stateful :

import ’package:flutter/material.dart’;
void main()
{ runApp(MyApp()); }

class MyApp extends StatelessWidget {

@override
Widget build(BuildContext context) { return
MaterialApp( home: MyStatefulWidget(),
);
}}

class MyStatefulWidget extends StatefulWidget {

@override
_MyStatefulWidgetState createState() => _MyStatefulWidgetState();

Formateur : ENOK-DEV INGENIEUR´ SYSTEME D` ’INFORMATION page 7

[email protected]
Cours Complet Sur Flutter

class _MyStatefulWidgetState extends State<MyStatefulWidget> { int _counter =

0;

void _incrementCounter() { setState(() {

_counter++;
});
}

@override
Widget build(BuildContext context) { return
Scaffold( appBar: AppBar(
title: Text(’Mon Application Flutter’),
), body:
Center( child:
Column(
mainAxisAlignment: MainAxisAlignment.center, children: [
Text(’Nombre de clics : $_counter’),
ElevatedButton( onPressed:
_incrementCounter, child: Text(’Cliquez ici’),
),
],
),
),
);
}
}

Dans cet exemple, nous avons cre´e un widget´ StatefulWidget appele´ MyStatefulWidget
qui maintient un etat´ counter qui est mis a jour chaque fois que le bouton est cliqu` e. La´
methode´ incrementCounter() utilise setState() pour mettre a jour l’` etat´ counter et
demander a Flutter de reconstruire l’interface utilisateur avec la nouvelle valeur.`

7.3 Provider Package

Le package Provider est un moyen puissant de gerer les´ etats dans une application
Flutter.´ Il permet de fournir et d’acceder facilement´ a des` etats´ a travers l’ensemble de
l’arborescence` de widgets sans avoir besoin de reconstruire les widgets en utilisant
setState().
Voici un exemple d’utilisation du package Provider :

import ’package:flutter/material.dart’; import

’package:provider/provider.dart’;

Formateur : ENOK-DEV INGENIEUR´ SYSTEME D` ’INFORMATION page 8

[email protected]
Cours Complet Sur Flutter

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

class MyApp extends StatelessWidget {

@override
Widget build(BuildContext context) { return
ChangeNotifierProvider( create: (context) =>
CounterModel(), child: MaterialApp( home:
MyConsumerWidget(),
),
);
}}

class CounterModel extends ChangeNotifier { int

_counter = 0; int get counter => _counter;

void incrementCounter() {
_counter++;
notifyListeners(); } }

class MyConsumerWidget extends StatelessWidget {

@override
Widget build(BuildContext context) { final counterModel =
Provider.of<CounterModel>(context); return Scaffold( appBar: AppBar(
title: Text(’Mon Application Flutter’),
), body: Center( child: Column( mainAxisAlignment:
MainAxisAlignment.center, children: [
Text(’Nombre de clics : ${counterModel.counter}’),
ElevatedButton( onPressed: () =>
counterModel.incrementCounter(), child: Text(’Cliquez ici’),
),
],
),
),
);
}
}

Dans cet exemple, nous avons utilise le package´ provider pour gerer l’´ etat´ counter a` l’aide de
ChangeNotifier. Le widget ChangeNotifierProvider fournit CounterModel a` travers l’arborescence de
widgets, et le widget MyConsumerWidget accede` a l’` etat´ counter en utilisant
Provider.of<CounterModel>(context) et met a jour l’` etat en appelant´ incrementCounter().

Formateur : ENOK-DEV INGENIEUR´ SYSTEME D` ’INFORMATION page 9

[email protected]
 NAVIGATION,INTERACTION AVEC LES
UTILISATEURS,APPEL D’API ET GESTION
DES DONNEES´ ,THEMES ET`
PERSONNALISATION,ANIMATION ET TRANSITIONS

Enok-Dev
Cours Complet Sur Flutter

6 aout 2023ˆ

7.4 Navigation entre les ecrans (Routes)´

La navigation entre les ecrans est une partie essentielle du d´eveloppement d’applications.´
Flutter propose une approche basee sur les routes pour naviguer entre les´
ecrans.´ Voici un exemple de navigation entre deux ecrans :´ import
’package:flutter/material.dart’;

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

class MyApp extends StatelessWidget {

@override
Widget build(BuildContext context) { return
MaterialApp( initialRoute: ’/’, routes: {
’/’: (context) => FirstScreen(),
’/second’: (context) => SecondScreen(),
},
);
}}

class FirstScreen extends StatelessWidget {

@override
Widget build(BuildContext context) { return
Scaffold( appBar: AppBar( title: Text(’Premier
e´cran’),
), body: Center( child:
ElevatedButton( onPressed:
() {
Navigator.pushNamed(context, ’/second’);
},
child: Text(’Aller au deuxi`eme ´ecran’),
),
),
);
}}

class SecondScreen extends StatelessWidget {

@override
Widget build(BuildContext context) { return
Scaffold( appBar: AppBar(
title: Text(’Deuxi`eme ´ecran’), ),
body: Center( child:
ElevatedButton( onPressed: () {
Formateur : ENOK-DEV INGENIEUR´ SYSTEME D` ’INFORMATION page 1
[email protected]
Cours Complet Sur Flutter

Navigator.pop(context); }, child: Text(’Retour au

premier e´cran’),
),
),
);
}
}

Dans cet exemple, nous avons defini deux´ ecrans :´ FirstScreen et SecondScreen. Nous
avons utilise la propri´ et´ e´ routes de MaterialApp pour definir les itin´ eraires (routes) entre
´ les ecrans. Le bouton dans´ FirstScreen utilise Navigator.pushNamed() pour naviguer vers
SecondScreen, et le bouton dans SecondScreen utilise Navigator.pop() pour revenir a`
l’ecran pr´ec´ edent.´

7.5 Envoi de donnees´ a une nouvelle page`

Lorsque vous naviguez vers une nouvelle page, vous pouvez egalement envoyer des donn
´ ees´ a cette page. Cela permet de transmettre des informations importantes entre les`
ecrans.´ Voici un exemple d’envoi de donnees´ a une nouvelle page :` import
’package:flutter/material.dart’;

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

class MyApp extends StatelessWidget {

@override
Widget build(BuildContext context) { return
MaterialApp( initialRoute: ’/’, routes: {
’/’: (context) => FirstScreen(),
’/second’: (context) => SecondScreen(),
},
);
}}

class FirstScreen extends StatelessWidget {

@override
Widget build(BuildContext context) { return Scaffold(
appBar: AppBar( title: Text(’Premier
e´cran’),
), body: Center( child:
ElevatedButton( onPressed:
() {
Navigator.pushNamed( context, ’/second’, arguments:
’Bonjour depuis le premier ´ecran !’,

Formateur : ENOK-DEV INGENIEUR´ SYSTEME D` ’INFORMATION page 2

[email protected]
Cours Complet Sur Flutter

); }, child: Text(’Aller au deuxi`eme ´ecran’),

),
),
);
}}

class SecondScreen extends StatelessWidget {

@override
Widget build(BuildContext context) { final message =
ModalRoute.of(context).settings.arguments as String;

return Scaffold( appBar: AppBar( title:

Text(’Deuxi`eme ´ecran’), ), body:
Center( child: Text(message),
),
);
}
}

Dans cet exemple, nous avons utilise la propri´ et´ e´ arguments de

Navigator.pushNamed() pour envoyer la chaˆıne de texte ”Bonjour depuis le premier ecran!”´
a` SecondScreen. Dans
SecondScreen, nous avons utilise´ ModalRoute.of(context).settings.arguments pour recup´
erer les donn´ ees envoy´ ees depuis l’´ ecran pr´ ec´ edent.´

7.6 Retour de donnees de la page pr´ec´ edente´

Lorsque vous revenez de la page prec´ edente, vous pouvez´ egalement renvoyer des
donn´ ees´ a cette page. Cela permet d’obtenir des r` esultats de la page de destination.
´ Voici un exemple de retour de donnees´ a la page pr` ec´ edente :´ import
’package:flutter/material.dart’; void main() {
runApp(MyApp()); }

class MyApp extends StatelessWidget {

@override
Widget build(BuildContext context) { return
MaterialApp( initialRoute: ’/’, routes: {
’/’: (context) => FirstScreen(),
’/second’: (context) => SecondScreen(),
},
);
}}

Formateur : ENOK-DEV INGENIEUR´ SYSTEME D` ’INFORMATION page 3

[email protected]
Cours Complet Sur Flutter

class FirstScreen extends StatelessWidget {

@override
Widget build(BuildContext context) { return
Scaffold( appBar: AppBar( title: Text(’Premier
e´cran’),
), body: Center( child:
ElevatedButton( onPressed:
() async {
final result = await Navigator.pushNamed(context, ’/second’);
ScaffoldMessenger.of(context).showSnackBar( SnackB
ar( content: Text(’R´esultat : $result’),
),
); }, child: Text(’Aller au deuxi`eme ´ecran’),
),
),
);
}}

class SecondScreen extends StatelessWidget {

@override
Widget build(BuildContext context) { return
Scaffold( appBar: AppBar( title:
Text(’Deuxi`eme ´ecran’), ), body: Center(
child: ElevatedButton( onPressed: () {
Navigator.pop(context, ’Donn´ees renvoye´es au premier e´cran !’);
}, child: Text(’Retour au premier e´cran’),
),
),
);
}
}

Dans cet exemple, nous avons utilise´ Navigator.pushNamed() pour aller a` SecondScreen.
Dans SecondScreen, lorsque l’utilisateur appuie sur le bouton ”Retour au premier ecran”, nous´
utilisons Navigator.pop() pour renvoyer la chaˆıne de texte ”Donnees renvoy´ ees au premier´
ecran!”´ a` FirstScreen. Dans FirstScreen, nous utilisons await avec Navigator.pushNamed() pour
attendre le resultat renvoy´ e par´ SecondScreen. Nous affichons ensuite ce resultat dans un´
SnackBar.

8 Interaction avec les utilisateurs

8.1 Gestion des gestes (taps, swipes, etc.)

Formateur : ENOK-DEV INGENIEUR´ SYSTEME D` ’INFORMATION page 4

[email protected]
Cours Complet Sur Flutter

Flutter offre une prise en charge integr´ ee de la gestion des gestes, tels que les taps et
les´ swipes, sur les widgets interactifs.
Voici un exemple de gestion de tap sur un widget :

import ’package:flutter/material.dart’;

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

class MyApp extends StatelessWidget {

@override
Widget build(BuildContext context) { return
MaterialApp( home: Scaffold( appBar:
AppBar( title: Text(’Mon Application Flutter’),
), body: Center( child:
GestureDetector( onTap: () {
print(’Le widget a ´ete´ tape´ !’);
}, child:
Container( width:
200, height: 200,
color: Colors.blue,
child: Center( child:
Text(’Appuyez-
moi !’),
),
),
),
),
),
);
}
}

Dans cet exemple, nous avons utilise le widget´ GestureDetector pour detecter le tap sur´
le conteneur. Lorsque l’utilisateur appuie sur le conteneur, le message ”Le widget a et´ e tap´
e!”´ sera affiche dans la console.´

8.2 Dialogs et Snackbars

Les dialogs et les snackbars sont des boˆıtes de dialogue contextuelles utilisees pour
afficher´ des messages importants ou des choix a l’utilisateur.`
Voici un exemple d’utilisation de dialogs et de snackbars :

import ’package:flutter/material.dart’;

Formateur : ENOK-DEV INGENIEUR´ SYSTEME D` ’INFORMATION page 5

[email protected]
Cours Complet Sur Flutter

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

class MyApp extends StatelessWidget {

@override
Widget build(BuildContext context) { return
MaterialApp( home: Scaffold( appBar:
AppBar(
title: Text(’Mon Application Flutter’),
), body: Center( child: ElevatedButton( onPressed: ()
{ showDialog( context: context, builder: (context) { return
AlertDialog( title: Text(’Confirmation’), content: Text(’Voulez-
vous vraiment continuer ?’), actions: [ TextButton( onPressed:
() {
Navigator.pop(context);
}, child: Text(’Annuler’),
),
TextButton( onPre
ssed: () {
Navigator.pop(context);
ScaffoldMessenger.of(context).showSnackBar( SnackB
ar( content: Text(’Action confirme´e !’),
),
); }, child: Text(’Continuer’),
),
],
);
},
); }, child: Text(’Afficher la bo^ıte de dialogue’),
),
),
),
);
}
}

Dans cet exemple, nous avons utilise´ showDialog() pour afficher une boˆıte de dialogue de confirmation
Lorsque l’utilisateur appuie sur le bouton ”Continuer”, nous utilisons ScaffoldMessenger.of(c pour afficher un
SnackBar avec le message ”Action confirmee!”.´

8.3 BottomSheet

Formateur : ENOK-DEV INGENIEUR´ SYSTEME D` ’INFORMATION page 6

[email protected]
Cours Complet Sur Flutter

Le widget BottomSheet est utilise pour afficher une feuille d’action en bas de l’´
ecran,´ gen´ eralement pour afficher des options suppl´ ementaires´ a l’utilisateur.` Voici
un exemple d’utilisation de BottomSheet : import ’package:flutter/material.dart’;

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

class MyApp extends StatelessWidget {

@override
Widget build(BuildContext context) { return
MaterialApp( home: Scaffold( appBar:
AppBar(
title: Text(’Mon Application Flutter’),
), body: Center( child: ElevatedButton( onPressed: ()
{ showModalBottomSheet( context: context,
builder: (context) { return Container( height: 200,
child: Center( child: Text(’Contenu de la
BottomSheet’),
),
);
},
); }, child: Text(’Afficher la BottomSheet’),
),
),
),
);
}
}

Dans cet exemple, nous avons utilise´ showModalBottomSheet() pour afficher une BottomSheet
avec le contenu ”Contenu de la BottomSheet” au centre de l’ecran.´

9 Appel d’API et gestion des donnees´

9.1 Utilisation de packages pour les appels d’API
Flutter offre une variet´ e de packages qui facilitent les appels d’API depuis votre
application.´ Vous pouvez utiliser des packages tels que http pour effectuer des requetes
HTTP vers des APIˆ distantes.
Voici un exemple d’appel d’API avec le package http :

import ’package:flutter/material.dart’; import

’package:http/http.dart’ as http;

Formateur : ENOK-DEV INGENIEUR´ SYSTEME D` ’INFORMATION page 7

[email protected]
Cours Complet Sur Flutter

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

class MyApp extends StatefulWidget {

@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> { String _data
= ’’;

Future<void> fetchData() async { final response = await

http.get(Uri.parse(’https://api.example.com/data’)); if (response.statusCode == 200)
{ setState(() {
_data = response.body;
});
} else {
setState(() {
_data = ’Erreur lors de la r´ecup´eration des donne´es.’;
});
}
}

@override
Widget build(BuildContext context) { return
MaterialApp( home: Scaffold( appBar:
AppBar( title: Text(’Mon Application Flutter’),
), body: Center( child: ElevatedButton( onPressed: ()
{ fetchData(); }, child: Text(’R´ecupe´rer les donne´es de
l\’API’),
),
),
),
);
}
}

Dans cet exemple, nous avons utilise le package´ http pour effectuer un appel d’API a`
l’URL ”https ://api.example.com/data”. Lorsque l’utilisateur appuie sur le bouton ”Recup´
erer´ les donnees de l’API”, nous utilisons la fonction´ fetchData() pour effectuer l’appel d’API
et mettre a jour l’` etat avec les donn´ ees rec¸ues.´

9.2 Traitement des donnees JSON´

Formateur : ENOK-DEV INGENIEUR´ SYSTEME D` ’INFORMATION page 8

[email protected]
Cours Complet Sur Flutter

Souvent, les API retournent des donnees au format JSON. Pour traiter ces donn´ ees, vous
´ pouvez utiliser le package dart:convert pour convertir les donnees JSON en objets Dart.´
Voici un exemple de traitement de donnees JSON :´ import ’dart:convert’;
import ’package:flutter/material.dart’; import
’package:http/http.dart’ as http;

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

class MyApp extends StatefulWidget {

@override
_MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> { List<String> _dataList

= [];

Future<void> fetchData() async { final response = await

http.get(Uri.parse(’https://api.example.com/data’)); if (response.statusCode == 200) { final
jsonData = json.decode(response.body); setState(() {
_dataList = List<String>.from(jsonData);
});
} else {
setState(() {
_dataList = [’Erreur lors de la re´cup´eration des donne´es.’];
});
}
}

@override
Widget build(BuildContext context) { return
MaterialApp( home: Scaffold( appBar:
AppBar( title: Text(’Mon Application Flutter’),
), body: Center( child:
ElevatedButton( onPressed:
() { fetchData(); },
child: Text(’R´ecupe´rer les donne´es de l\’API’),
),
),
),
);
}
}

Formateur : ENOK-DEV INGENIEUR´ SYSTEME D` ’INFORMATION page 9

[email protected]
Cours Complet Sur Flutter

Dans cet exemple, nous avons utilise le package´ dart:convert pour decoder les donn´ ees
´ JSON retournees par l’API. Nous avons converti les donn´ ees JSON en une liste d’objets Dart
´ et mis a jour l’` etat avec ces donn´ ees.´

9.3 Affichage des donnees dans des widgets´

Une fois que vous avez recup´ er´ e et trait´ e les donn´ ees depuis une API, vous pouvez
les´ afficher dans des widgets pour les presenter´ a l’utilisateur.`
Voici un exemple d’affichage des donnees dans des widgets :´

import ’dart:convert’; import

’package:flutter/material.dart’; import
’package:http/http.dart’ as http;

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

class MyApp extends StatefulWidget {

@override
_MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> { List<String> _dataList

= [];

Future<void> fetchData() async { final response = await

http.get(Uri.parse(’https://api.example.com/data’)); if (response.statusCode == 200) { final
jsonData = json.decode(response.body); setState(() {
_dataList = List<String>.from(jsonData);
});
} else {
setState(() {
_dataList = [’Erreur lors de la re´cup´eration des donne´es.’];
});
}
}

@override
Widget build(BuildContext context) { return
MaterialApp( home: Scaffold( appBar:
AppBar( title: Text(’Mon Application Flutter’),
), body:
Center( child:
Column( mainA
xisAlignment:
MainAxisAlignm
Formateur : ENOK-DEV INGENIEUR´ SYSTEME D` ’INFORMATION page 10
[email protected]
Cours Complet Sur Flutter

ent.center,
children:
[ ElevatedButto
n( onPressed: ()
{ fetchData(); },
child: Text(’R
´ecupe´rer les
donne´es de
l\’API’),
),
SizedBox(height: 20), if
(_dataList.isNotEmpty)
Text(’Donne´es re´cupe´r´ees depuis l\’API :’), for (var data
in _dataList)
Text(data),
],
),
),
),
);
}
}

Dans cet exemple, nous avons affiche les donn´ ees r´ ecup´ er´ ees depuis l’API dans des
wid-´ gets Text. Si les donnees ont´ et´ e r´ ecup´ er´ ees avec succ´ es, nous affichons le
message ”Donn` ees´ recup´ er´ ees depuis l’API :” suivi de chaque´ el´ ement de la liste´
dataList.

10 Themes et personnalisation`
10.1 Utilisation de themes pour personnaliser l’apparence`
Flutter propose un systeme de th` emes qui permet de personnaliser l’apparence de
votre` application de maniere coh` erente.´
Voici un exemple d’utilisation de themes pour personnaliser l’apparence :`

import ’package:flutter/material.dart’;

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

class MyApp extends StatelessWidget {

@override
Widget build(BuildContext context) { return
MaterialApp( theme:
Formateur : ENOK-DEV INGENIEUR´ SYSTEME D` ’INFORMATION page 11
[email protected]
Cours Complet Sur Flutter

ThemeData( primaryColor: Colors.blue,

accentColor: Colors.yellow,
),
home: Scaffold( appBar: AppBar( title: Text(’Mon
Application Flutter’),
), body:
Center( child:
Text(
’Personnalisation avec the`mes’, style:
TextStyle(fontSize: 24),
), ), floatingActionButton:
FloatingActionButton( onPressed: () {}, child:
Icon(Icons.add),
),
),
);
}
}

Dans cet exemple, nous avons defini un th´ eme pour l’application en utilisant` ThemeData.
Nous avons personnalise les couleurs en d´ efinissant´ primaryColor a` Colors.blue et accentColor
a` Colors.yellow. Ces couleurs seront utilisees par d´ efaut dans les widgets tels que´ AppBar et
FloatingActionButton.

10.2 Creation de th´emes personnalis`es´

Vous pouvez egalement cr´ eer des th´ emes personnalis` es pour une personnalisation
plus´ avancee de votre application.´
Voici un exemple de creation de th´ emes personnalis` es :´

import ’package:flutter/material.dart’;

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

class MyApp extends StatelessWidget {

@override
Widget build(BuildContext context) { return
MaterialApp( theme: myTheme, home:
Scaffold( appBar: AppBar( title: Text(’Mon
Application Flutter’),
), body:
Center( child:
Text(
’Personnalisation avec the`mes personnalise´s’, style:
TextStyle(fontSize: 24),
Formateur : ENOK-DEV INGENIEUR´ SYSTEME D` ’INFORMATION page 12
[email protected]
Cours Complet Sur Flutter

), ), floatingActionButton:
FloatingActionButton( onPressed: () {}, child:
Icon(Icons.add),
),
),
);
}}

final myTheme = ThemeData( primaryColor: Colors.purple, accentColor:

Colors.orange, fontFamily: ’Roboto’, textTheme: TextTheme( headline1:
TextStyle(fontSize: 24, fontWeight: FontWeight.bold), bodyText1:
TextStyle(fontSize: 16),
),
);

Dans cet exemple, nous avons cre´e un th´ eme personnalis` e´ myTheme en
definissant des pro-´ priet´ es telles que les couleurs, la police et le style de texte. Nous avons
ensuite utilis´ e ce th´ eme` dans l’application en l’affectant a la propri` et´ e´ theme
de MaterialApp.

11 Animation et transitions
11.1 Introduction aux animations en Flutter
Flutter offre un puissant systeme d’animation qui vous permet d’animer les propri` et´ es
des´ widgets pour creer des exp´ eriences utilisateur fluides et interactives.´ Voici un exemple
d’utilisation de l’animation en Flutter :

import ’package:flutter/material.dart’;

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

class MyApp extends StatelessWidget {

@override
Widget build(BuildContext context) { return
MaterialApp( home: MyAnimatedWidget(),
);
}
}
class MyAnimatedWidget extends StatefulWidget {
@override
_MyAnimatedWidgetState createState() => _MyAnimatedWidgetState();
}

Formateur : ENOK-DEV INGENIEUR´ SYSTEME D` ’INFORMATION page 13

[email protected]
Cours Complet Sur Flutter

class _MyAnimatedWidgetState extends State<MyAnimatedWidget> with

SingleTickerProviderStateMixin { late AnimationController
_animationController; late Animation<double> _animation;

@override void
initState()
{ super.initState();
_animationController = AnimationController( vsync:
this, duration: Duration(seconds: 2),
);
_animation = Tween<double>(begin: 0, end: 200).animate(_animationController);
}

@override void
dispose() {
_animationController.dispose();
super.dispose(); }

@override
Widget build(BuildContext context) { return
Scaffold( appBar: AppBar( title: Text(’Mon
Application Flutter’),
), body: Center( child:
AnimatedBuilder( animation:
_animation, builder: (context,
child) { return Container( width:
_animation.value, height:
_animation.value, color:
Colors.blue,
);
},
), ),
floatingActionButton: FloatingActionButton( onPressed: () {
_animationController.forward();
},
child: Icon(Icons.play_arrow),
),
);
}
}

Dans cet exemple, nous avons utilise´ AnimationController pour controler l’animation,ˆ et
AnimatedBuilder pour animer la taille d’un conteneur. Lorsque l’utilisateur appuie sur le
bouton ”Play”, l’animation demarre et le conteneur augmente progressivement de taille.´

Formateur : ENOK-DEV INGENIEUR´ SYSTEME D` ’INFORMATION page 14

[email protected]
Cours Complet Sur Flutter

11.2 Utilisation de l’API d’animation Flutter

Flutter offre une API d’animation complete qui vous permet de contr` oler les transitionsˆ
entre les etats de vos widgets.´
Voici un exemple d’utilisation de l’API d’animation Flutter :

import ’package:flutter/material.dart’;

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

class MyApp extends StatelessWidget {

@override
Widget build(BuildContext context) { return
MaterialApp( home: MyAnimatedWidget(),
);
}}

class MyAnimatedWidget extends StatefulWidget {

@override
_MyAnimatedWidgetState createState() => _MyAnimatedWidgetState();
}

class _MyAnimatedWidgetState extends State<MyAnimatedWidget> with

SingleTickerProviderStateMixin { late AnimationController
_animationController; late Animation<double> _animation;

@override void
initState()
{ super.initState();
_animationController = AnimationController( vsync:
this, duration: Duration(seconds: 2),
);
_animation = Tween<double>(begin: 0, end: 200).animate(_animationController); }

@override void
dispose() {
_animationController.dispose();
super.dispose(); }

@override
Widget build(BuildContext context) { return
Scaffold( appBar: AppBar( title: Text(’Mon
Application Flutter’),
), body: Center( child:
AnimatedBuilder( animation:

Formateur : ENOK-DEV INGENIEUR´ SYSTEME D` ’INFORMATION page 15

[email protected]
Cours Complet Sur Flutter

_animation, builder: (context,

child) { return Container( width:
_animation.value, height:
_animation.value, color:
Colors.blue,
);
},
), ), floatingActionButton:
FloatingActionButton( onPressed: () {
_animationController.forward(); },
child: Icon(Icons.play_arrow),
),
);
}
}

Dans cet exemple, nous avons utilise´ AnimationController pour controler l’animation,ˆ et
AnimatedBuilder pour animer la taille d’un conteneur. Lorsque l’utilisateur appuie sur le
bouton ”Play”, l’animation demarre et le conteneur augmente progressivement de taille.´

12 Gestion des formulaires

12.1 Creation de formulaires´
Les formulaires sont couramment utilises pour collecter des donn´ees aupr´es des utilisateurs.`
Flutter fournit des widgets pour creer des formulaires facilement.´
Voici un exemple de creation de formulaire :´
import ’package:flutter/material.dart’;

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

class MyApp extends StatelessWidget {

@override
Widget build(BuildContext context) { return
MaterialApp( home: MyForm(),
);
}}

class MyForm extends StatefulWidget {

@override
_MyFormState createState() => _MyFormState();
}

Formateur : ENOK-DEV INGENIEUR´ SYSTEME D` ’INFORMATION page 16

[email protected]
Cours Complet Sur Flutter

class _MyFormState extends State<MyForm> { final

_formKey = GlobalKey<FormState>(); String _name =
’’; int _age = 0;

@override
Widget build(BuildContext context) { return
Scaffold( appBar: AppBar( title: Text(’Mon
Application Flutter’),
), body: Padding( padding: EdgeInsets.all(16.0), child:
Form( key: _formKey, child: Column( crossAxisAlignment:
CrossAxisAlignment.start, children: [ TextFormField(
decoration: InputDecoration(labelText: ’Nom’), validator:
(value) { if (value == null || value.isEmpty) { return
’Veuillez saisir votre nom.’;
} return null; },
onSaved: (value)
{ _name = value!;
},
), TextFormField( decoration: InputDecoration(labelText:
’^Age’), keyboardType: TextInputType.number, validator:
(value) { if (value == null || value.isEmpty) { return
’Veuillez saisir votre a^ge.’;
} final age = int.tryParse(value); if (age
== null || age <= 0) {
return ’Veuillez saisir un a^ge valide.’;
} return null; },
onSaved: (value) {
_age = int.parse(value!);
},
),
SizedBox(height: 16), ElevatedButton( onPressed: () { if
(_formKey.currentState!.validate())
{ _formKey.currentState!.save(); showDialog( context:
context, builder: (context) { return AlertDialog( title:
Text(’Confirmation’), content: Text(’Nom : $_name\
n^Age : $_age’), actions: [ TextButton( onPressed: () {
Navigator.pop(context); },
child: Text(’OK’),
),
],
);
},
);
} }, child: Text(’Valider’),
),
Formateur : ENOK-DEV INGENIEUR´ SYSTEME D` ’INFORMATION page 17
[email protected]
Cours Complet Sur Flutter

],
),
),
),
);
}
}

Dans cet exemple, nous avons utilise´ Form avec deux TextFormField pour collecter le
nom et l’age de l’utilisateur. Nous avons dˆ efini des validateurs pour s’assurer que les
champs sont´ remplis correctement. Lorsque l’utilisateur appuie sur le bouton ”Valider”,
nous verifions si le´ formulaire est valide a l’aide de` validate(). Si le formulaire est valide,
nous sauvegardons les donnees´ a l’aide de` save() et affichons une boˆıte de dialogue de
confirmation avec les informations saisies.

12.2 Validation des champs

Flutter fournit des validateurs pour verifier si les champs de formulaire sont remplis
correc-´ tement.
Voici un exemple de validation des champs : import

’package:flutter/material.dart’;

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

class MyApp extends StatelessWidget {

@override
Widget build(BuildContext context) { return
MaterialApp( home: MyForm(),
);
}}

class MyForm extends StatefulWidget {

@override
_MyFormState createState() => _MyFormState();
}

class _MyFormState extends State<MyForm> { final

_formKey = GlobalKey<FormState>(); String _name =
’’; int _age = 0;

@override
Widget build(BuildContext context) { return
Scaffold( appBar: AppBar( title: Text(’Mon
Application Flutter’),
Formateur : ENOK-DEV INGENIEUR´ SYSTEME D` ’INFORMATION page 18
[email protected]
Cours Complet Sur Flutter

),
body: Padding( padding: EdgeInsets.all(16.0), child:
Form( key: _formKey, child: Column( crossAxisAlignment:
CrossAxisAlignment.start, children:
[ TextFormField( decoration: InputDecoration(labelText:
’Nom’), validator: (value) { if (value == null ||
value.isEmpty) { return ’Veuillez saisir votre nom.’;
} return null; },
onSaved: (value) {
_name = value!;
},
), TextFormField( decoration: InputDecoration(labelText:
’^Age’), keyboardType: TextInputType.number, validator:
(value) { if (value == null || value.isEmpty) { return
’Veuillez saisir votre a^ge.’;
} final age = int.tryParse(value); if (age
== null || age <= 0) {
return ’Veuillez saisir un a^ge valide.’;
} return null; },
onSaved: (value) {
_age = int.parse(value!);
},
),
SizedBox(height: 16), ElevatedButton( onPressed: () { if
(_formKey.currentState!.validate())
{ _formKey.currentState!.save(); showDialog( context:
context, builder: (context) { return AlertDialog( title:
Text(’Confirmation’), content: Text(’Nom : $_name\
n^Age : $_age’), actions: [
TextButton( onPressed: () {
Navigator.pop(context); },
child: Text(’OK’),
),
],
);
},
);
} }, child: Text(’Valider’),
),
],
),
),
),
);
}
Formateur : ENOK-DEV INGENIEUR´ SYSTEME D` ’INFORMATION page 19
[email protected]
Cours Complet Sur Flutter

Dans cet exemple, nous avons utilise´ Form avec deux TextFormField pour collecter le
nom et l’age de l’utilisateur. Nous avons dˆ efini des validateurs pour s’assurer que les
champs sont´ remplis correctement. Lorsque l’utilisateur appuie sur le bouton ”Valider”,
nous verifions si le´ formulaire est valide a l’aide de` validate(). Si le formulaire est valide,
nous sauvegardons les donnees´ a l’aide de` save() et affichons une boˆıte de dialogue de
confirmation avec les informations saisies.

13 Gestion des etats´

13.1 Gestion des etats avec StatefulWidget´
Flutter utilise le concept de StatefulWidget pour gerer les´ etats des widgets qui peuvent´
changer au fil du temps.
Voici un exemple de gestion des etats avec´ StatefulWidget :

import ’package:flutter/material.dart’;

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

class MyApp extends StatelessWidget {

@override
Widget build(BuildContext context) { return
MaterialApp( home: MyStatefulWidget(),
);
}}

class MyStatefulWidget extends StatefulWidget {

@override
_MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> { int _counter =

0;

void _incrementCounter() { setState(() {

_counter++;
});
}

@override

Formateur : ENOK-DEV INGENIEUR´ SYSTEME D` ’INFORMATION page 20

[email protected]
Cours Complet Sur Flutter

Widget build(BuildContext context) { return

Scaffold( appBar: AppBar( title: Text(’Mon
Application Flutter’),
), body: Center( child: Column( mainAxisAlignment:
MainAxisAlignment.center, children: [
Text(
’Nombre de clics :’,
),
Text( ’$_counter’,
style: Theme.of(context).textTheme.headline4,
),
],
), ), floatingActionButton:
FloatingActionButton( onPressed: _incrementCounter,
tooltip: ’Incr´ementer’, child: Icon(Icons.add),
),
);
}
}
Dans cet exemple, nous avons utilise´ StatefulWidget pour creer un widget´ MyStatefulWidget qui
peut gerer son propre´ etat. Lorsque l’utilisateur appuie sur le bouton flottant, la fonction´
incrementCounter() est appelee pour incr´ ementer le compteur´ counter, et nous utilisons setState()
pour indiquer a Flutter que l’` etat a chang´ e. L’interface utilisateur est automati-´ quement
reconstruite pour refleter la nouvelle valeur de´ counter.

13.2 Gestion des etats avec Provider´

Le package provider est largement utilise pour g´erer les´etats globaux dans une application´
Flutter.
Voici un exemple de gestion des etats avec´ provider :

import ’package:flutter/material.dart’; import

’package:provider/provider.dart’;

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

class MyApp extends StatelessWidget {

@override
Widget build(BuildContext context) { return
ChangeNotifierProvider( create: (context) =>
CounterProvider(), child: MaterialApp( home:
MyConsumerWidget(),
),

Formateur : ENOK-DEV INGENIEUR´ SYSTEME D` ’INFORMATION page 21

[email protected]
Cours Complet Sur Flutter

);
}}

class CounterProvider with ChangeNotifier { int

_counter = 0; int get counter => _counter;

void incrementCounter() {
_counter++;
notifyListeners(); } }

class MyConsumerWidget extends StatelessWidget {

@override
Widget build(BuildContext context) { var counterProvider =
Provider.of<CounterProvider>(context);

return Scaffold( appBar: AppBar( title: Text(’Mon

Application Flutter’), ), body: Center( child:
Column( mainAxisAlignment:
MainAxisAlignment.center, children: [
Text(
’Nombre de clics :’,
),
Text( ’${counterProvider.counter}’, style:
Theme.of(context).textTheme.headline4,
),
],
), ), floatingActionButton:
FloatingActionButton( onPressed: ()
{ counterProvider.incrementCounter();
}, tooltip: ’Incr´ementer’,
child: Icon(Icons.add),
),
);
}
}

Dans cet exemple, nous avons cre´e une classe´ CounterProvider qui etend´ ChangeNotifier.
Cette classe contient le compteur counter et une methode´ incrementCounter() pour incrementer
´ le compteur. Lorsque le compteur est modifie, nous utilisons´ notifyListeners() pour informer les
consommateurs (MyConsumerWidget) que l’etat a chang´ e.´
Nous enveloppons l’application avec ChangeNotifierProvider et fournissons une instance de
CounterProvider. Dans MyConsumerWidget, nous utilisons Provider.of<CounterProvider>(co pour acceder´ a
l’instance de` CounterProvider et afficher la valeur du compteur dans l’interface utilisateur. Lorsque
l’utilisateur appuie sur le bouton flottant, nous appelons counterProvider.incremen pour incrementer le
compteur et mettre´ a jour l’interface utilisateur.`
Formateur : ENOK-DEV INGENIEUR´ SYSTEME D` ’INFORMATION page 22
[email protected]
Cours Complet Sur Flutter

14 14. Gestion des formulaires

14.1 Creation de formulaires´
Les formulaires sont couramment utilises pour collecter des donn´ ees aupr´ es des
utilisateurs.` Flutter fournit des widgets pour creer des formulaires facilement. Voici un
exemple de cr´ eation´ de formulaire :

import ’package:flutter/material.dart’;

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

class MyApp extends StatelessWidget {

@override
Widget build(BuildContext context) { return
MaterialApp( home: MyForm(),
);
}}

class MyForm extends StatefulWidget {

@override
_MyFormState createState() => _MyFormState();
}

class _MyFormState extends State<MyForm> { final

_formKey = GlobalKey<FormState>(); String _name =
’’; int _age = 0;

@override
Widget build(BuildContext context) { return
Scaffold( appBar: AppBar( title: Text(’Mon
Application Flutter’),
), body: Padding( padding:
EdgeInsets.all(16.0), child: Form( key:
_formKey, child: Column(
crossAxisAlignment: CrossAxisAlignment.start, children:
[ TextFormField( decoration: InputDecoration(labelText:
’Nom’), validator: (value) { if (value == null ||
value.isEmpty) { return ’Veuillez saisir votre nom.’;
} return null; },
onSaved: (value) {
_name = value!;
},
), TextFormField( decoration: InputDecoration(labelText:
’^Age’), keyboardType: TextInputType.number, validator:

Formateur : ENOK-DEV INGENIEUR´ SYSTEME D` ’INFORMATION page 23

[email protected]
Cours Complet Sur Flutter

(value) { if (value == null || value.isEmpty) { return

’Veuillez saisir votre a^ge.’;
} final age = int.tryParse(value); if (age
== null || age <= 0) {
return ’Veuillez saisir un a^ge valide.’;
} return null; },
onSaved: (value) {
_age = int.parse(value!);
},
),
SizedBox(height: 16), ElevatedButton( onPressed: () { if
(_formKey.currentState!.validate())
{ _formKey.currentState!.save(); showDialog( context:
context, builder: (context) { return AlertDialog( title:
Text(’Confirmation’), content: Text(’Nom : $_name\
n^Age : $_age’), actions: [ TextButton( onPressed: () {
Navigator.pop(context); },
child: Text(’OK’),
),
],
);
},
);
} }, child: Text(’Valider’),
),
],
),
),
),
);
}
}
Dans cet exemple, nous avons utilise le widget´ Form avec deux TextFormField pour
collecter le nom et l’age de l’utilisateur. Nous avons dˆ efini des validateurs pour s’assurer
que les´ champs sont remplis correctement. Lorsque l’utilisateur appuie sur le bouton
”Valider”, nous verifions si le formulaire est valide´ a l’aide de` validate(). Si le formulaire est
valide, nous sauvegardons les donnees´ a l’aide de` save() et affichons une boˆıte de dialogue
de confirmation avec les informations saisies.

14.2 Validation des champs

Flutter fournit des validateurs pour verifier si les champs de formulaire sont remplis
correc-´ tement.

Formateur : ENOK-DEV INGENIEUR´ SYSTEME D` ’INFORMATION page 24

[email protected]
Cours Complet Sur Flutter

Voici un exemple de validation des champs : import

’package:flutter/material.dart’;

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

class MyApp extends StatelessWidget {

@override
Widget build(BuildContext context) { return
MaterialApp( home: MyForm(),
);
}}

class MyForm extends StatefulWidget {

@override
_MyFormState createState() => _MyFormState();
}

class _MyFormState extends State<MyForm> { final

_formKey = GlobalKey<FormState>(); String _name =
’’; int _age = 0;

@override
Widget build(BuildContext context) { return
Scaffold( appBar: AppBar(
title: Text(’Mon Application Flutter’),
), body: Padding( padding:
EdgeInsets.all(16.0), child: Form( key:
_formKey,
child: Column( crossAxisAlignment:
CrossAxisAlignment.start, children:
[ TextFormField( decoration: InputDecoration(labelText:
’Nom’), validator: (value) { if (value == null ||
value.isEmpty) { return ’Veuillez saisir votre nom.’;
} return null; },
onSaved: (value) {
_name = value!;
},
), TextFormField( decoration: InputDecoration(labelText:
’^Age’), keyboardType: TextInputType.number, validator:
(value) { if (value == null || value.isEmpty) { return
’Veuillez saisir votre a^ge.’;
} final age = int.tryParse(value); if (age
== null || age <= 0) {
return ’Veuillez saisir un a^ge valide.’;
Formateur : ENOK-DEV INGENIEUR´ SYSTEME D` ’INFORMATION page 25
[email protected]
Cours Complet Sur Flutter

} return null; },
onSaved: (value) {
_age = int.parse(value!);
},
),
SizedBox(height: 16),
ElevatedButton( onPressed: () {
if (_formKey.currentState!.validate())
{ _formKey.currentState!.save(); showDialog( context:
context, builder: (context) { return AlertDialog( title:
Text(’Confirmation’), content: Text(’Nom : $_name\
n^Age : $_age’), actions: [ TextButton( onPressed: () {
Navigator.pop(context);
},
child: Text(’OK’),
),
],
);
},
);
} }, child: Text(’Valider’),
),
],
),
),
),
);
}
}

Dans cet exemple, nous avons utilise le widget´ Form avec deux TextFormField pour
collecter le nom et l’age de l’utilisateur. Nous avons dˆ efini des validateurs pour s’assurer
que les´ champs sont remplis correctement. Lorsque l’utilisateur appuie sur le bouton
”Valider”, nous verifions si le formulaire est valide´ a l’aide de` validate(). Si le formulaire est
valide, nous sauvegardons les donnees´ a l’aide de` save() et affichons une boˆıte de dialogue
de confirmation avec les informations saisies.

15 15. Publication de l’application

15.1 Compilation de l’application pour Android et iOS
Pour publier une application Flutter sur les app stores, vous devez d’abord la compiler
pour les plateformes cibles, telles qu’Android et iOS.

Formateur : ENOK-DEV INGENIEUR´ SYSTEME D` ’INFORMATION page 26

[email protected]
Cours Complet Sur Flutter

Pour compiler l’application pour Android, vous devez executer la commande suivante
dans´ le repertoire de votre projet :´

flutter build apk

Cette commande gen´ erera un fichier APK (Android Package) dans le r´ epertoire
‘build/app/outputs/apk/relea´
Ce fichier APK peut etre soumisˆa Google Play Store pour distribution.`
Pour compiler l’application pour iOS, vous devez executer la commande suivante dans le´
repertoire de votre projet :´

flutter build ios

Cette commande gen´ erera un fichier IPA (iOS App Store Package) dans le r´ epertoire
‘build/ios/iphoneos/‘.´
Ce fichier IPA peut etre soumisˆa l’App Store d’Apple pour distribution.`
15.2 Publication sur les app stores
Avant de publier votre application sur les app stores, assurez-vous de suivre les directives
et les politiques de soumission d’applications de chaque plateforme (Google Play Store et
App Store d’Apple).
Pour publier votre application sur le Google Play Store, suivez ces etapes g´en´ erales :´
1. Creez un compte d´ eveloppeur sur Google Play Console. 2. G´ en´ erez une version sign
´ ee´ de l’APK a l’aide de la commande ‘flutter build apk‘. 3. Suivez les` etapes de
publication dans´ Google Play Console, telles que la description de l’application, les captures
d’ecran, la tarifica-´ tion, etc. 4. Soumettez l’APK pour examen et distribution.
Pour publier votre application sur l’App Store d’Apple, suivez ces etapes g´en´ erales :´
1. Creez un compte d´ eveloppeur sur l’Apple Developer Program. 2. G´ en´ erez une
version´ signee de l’IPA´ a l’aide de la commande ‘flutter build ios‘. 3. Cr` eez un nouvel
enregistrement´ d’application dans App Store Connect, fournissez les details de l’application
et t´ el´ echargez les´ captures d’ecran. 4. Cr´ eez un certificat de distribution, un profil de
provisionnement et un App´ Store Distribution Certificate. 5. Archivez l’application a l’aide de
Xcode et soumettez-la pour` examen et distribution.

16 16. Flutter pour le Web

16.1 Aperc¸u de la prise en charge du Web avec Flutter
Flutter offre une prise en charge experimentale pour le d´ eveloppement Web. Cela
signifie´ que vous pouvez creer des applications Flutter qui s’ex´ ecutent non seulement sur
les appareils´ mobiles (Android et iOS) mais aussi sur le Web.
Pour creer une application Flutter pour le Web, vous devez ex´ ecuter la
commande suivante´ dans le repertoire de votre projet :´

Formateur : ENOK-DEV INGENIEUR´ SYSTEME D` ’INFORMATION page 27

[email protected]
Cours Complet Sur Flutter

flutter create . flutter config --

enable-web

Cela mettra a jour votre projet pour activer la prise en charge du Web. Vous pouvez
ensuite` executer votre application sur le Web en utilisant la commande :´

flutter run -d chrome

Notez que la prise en charge du Web avec Flutter est encore en developpement et
certaines´ fonctionnalites peuvent ne pas´ etre complˆ etement prises en charge.`

16.2 Differences par rapport au d´ eveloppement pour mobile´

Lorsque vous developpez une application Flutter pour le Web, il y a certaines diff´
erences´ par rapport au developpement pour les appareils mobiles :´
- Widgets : Certaines widgets specifiques aux plates-formes mobiles peuvent ne pas´
etreˆ disponibles ou avoir des comportements differents sur le Web. Vous devrez
tester votre appli-´ cation pour vous assurer que tous les widgets fonctionnent
correctement.
- Navigation : Sur le Web, vous utiliserez gen´ eralement des URL pour g´ erer la
navigation´ entre les pages de votre application, tandis que sur les appareils mobiles, vous
utiliserez des routes.
- Responsive Design : Sur le Web, vous devrez prendre en compte la conception
reactive´ pour que votre application s’adapte a diff` erentes tailles d’´ ecran, tandis que sur
les appareils´ mobiles, vous pouvez vous concentrer sur des tailles d’ecran sp´ ecifiques.´
- Plugins : Certains plugins specifiques aux appareils mobiles peuvent ne pas´ etre
dispo-ˆ nibles pour le Web. Vous devrez verifier la compatibilit´ e des plugins que vous
utilisez dans´ votre application.
Malgre ces diff´ erences, le d´ eveloppement pour le Web avec Flutter offre la possibilit´
e de´ partager une grande partie du code avec la version mobile de votre application, ce qui
peut accel´ erer le d´ eveloppement et r´ eduire les efforts de maintenance.´

Formateur : ENOK-DEV INGENIEUR´ SYSTEME D` ’INFORMATION page 28

[email protected]
 Projet de Gestion des Taches avec Flutter et GetXˆ
Enok-Dev

6 aout 2023ˆ

17 Configuration de l’environnement
Assurez-vous d’avoir installe Flutter sur votre syst´ eme. Vous pouvez v` erifier
l’installation´ en executant´ flutter doctor dans le terminal.

18 Creation du projet´
Creez un nouveau projet Flutter en ex´ ecutant´ flutter create task manager dans le
terminal.

19 Ajout des dependances´

Ouvrez le fichier pubspec.yaml et ajoutez les dependances n´ ecessaires pour GetX et les´
icones de Material Design.ˆ

dependencies:
flutter: sdk:
flutter get:
^4.3.8
flutter_launcher_icons: ^0.9.2

dev_dependencies: flutter_test: sdk:

flutter flutter_lints: ^1.0.0
flutter_launcher_icons: ^0.9.2

Executez ensuite´ flutter pub get pour tel´ echarger les d´ ependances.´

20 Configuration des iconesˆ

Pour personnaliser les icones de l’application, vous pouvez ajouter vos propres icˆ ones
dansˆ le repertoire´ assets/ et mettre a jour le fichier` pubspec.yaml pour les inclure.
Exemple :

33
Cours Complet Sur Flutter

flutter_icons:
android: true ios:
true
image_path: "assets/icon/app_icon.png"

21 Creation des mod´ eles`

Creez le mod´ele de t`ache qui reprˆesentera une t´ache dans l’application.ˆ

class Task { final int id; final

String title; final bool
isCompleted;

Task({required this.id, required this.title, this.isCompleted = false}); }

22 Creation du contr´ oleur (Controller)ˆ

Creez le contr´oleur qui gˆerera l’´etat et les actions li´ees aux t´ aches.ˆ

import ’package:get/get.dart’; import

’package:task_manager/models/task_model.dart’;

class TaskController extends GetxController { var tasks =

<Task>[].obs;

void addTask(String title) { tasks.add(Task(id: tasks.length,

title: title));
}

void toggleTaskStatus(int taskId) {

tasks[taskId].isCompleted = !tasks[taskId].isCompleted;
}

void deleteTask(int taskId) {

tasks.removeWhere((task) => task.id == taskId);
}
}

23 Creation de l’interface utilisateur (UI)´

Creez l’interface utilisateur pour afficher les t´ aches et permettreˆ a l’utilisateur
d’ajouter,` supprimer et marquer les taches comme terminˆ ees.´

import ’package:flutter/material.dart’; import

’package:get/get.dart’;
Formateur : ENOK-DEV INGENIEUR´ SYSTEME D` ’INFORMATION page 30
[email protected]
Cours Complet Sur Flutter

import ’package:task_manager/controllers/task_controller.dart’;

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

class MyApp extends StatelessWidget { final TaskController _taskController =

Get.put(TaskController());

@override
Widget build(BuildContext context) { return
MaterialApp( title: ’Task Manager’, home:
TaskManagerScreen(),
);
}}

class TaskManagerScreen extends StatelessWidget { final TextEditingController

_taskTitleController = TextEditingController();

@override
Widget build(BuildContext context) { return
Scaffold( appBar: AppBar( title: Text(’Task
Manager’),
), body: Padding( padding:
EdgeInsets.all(16), child:
Column( children: [ Row( children: [
Expanded( child: TextField(
controller: _taskTitleController, decoration:
InputDecoration( hintText: ’Ajouter une
t^ache’,
),
),
),
ElevatedButton( onPr
essed: () {
if (_taskTitleController.text.isNotEmpty) {
Get.find<TaskController>().addTask(_taskTitleController.text);
_taskTitleController.clear();
}
},
child: Text(’Ajouter’),
),
],
),
SizedBox(height: 16),
Expanded( child: Obx(

Formateur : ENOK-DEV INGENIEUR´ SYSTEME D` ’INFORMATION page 31

[email protected]
Cours Complet Sur Flutter

() => ListView.builder( itemCount:

Get.find<TaskController>().tasks.length, itemBuilder: (context,
index) { final task = Get.find<TaskController>().tasks[index]; return
ListTile( title: Text(task.title), leading: Checkbox( value:
task.isCompleted, onChanged: (value) {
Get.find<TaskController>().toggleTaskStatus(index);
}, ), trailing: IconButton( icon:
Icon(Icons.delete), onPressed:
() {
Get.find<TaskController>().deleteTask(index);
},
),
);
},
),
),
),
],
),
),
);
}
}

Gestion des taches avec Flutter et Bloc Enok-Dev 6 aoˆut 2023ˆ

24 Introduction
Dans ce cours, nous allons apprendre a cr` eer une application de gestion des t´
aches en utili-ˆ sant le framework Flutter avec le pattern Bloc. Le pattern Bloc est un moyen
puissant de gerer´ l’etat de l’application et de s´ eparer la logique m´ etier de l’interface
utilisateur.´
25 Configuration du projet
Assurez-vous d’avoir installe Flutter sur votre syst´ eme et configur` e l’environnement de´
developpement. Vous pouvez v´ erifier cela en ex´ ecutant´ flutter doctor dans votre
terminal.
Creez un nouveau projet Flutter en utilisant la commande´ flutter create task manager.

26 Installation des dependances´

Formateur : ENOK-DEV INGENIEUR´ SYSTEME D` ’INFORMATION page 32

[email protected]
Cours Complet Sur Flutter

Pour implementer le pattern Bloc dans notre projet, nous aurons besoin des d´
ependances´ suivantes : - flutter bloc : Fournit les classes pour implementer le pattern Bloc
dans Flutter.´ - equatable : Permet de comparer les objets de maniere plus efficace.`
Pour les ajouter a notre projet, ouvrez le fichier` pubspec.yaml et ajoutez les lignes
suivantes sous la section dependencies :

dependencies: flutter:
sdk: flutter flutter_bloc: ^7.2.3
equatable: ^2.0.0

Enregistrez le fichier, puis executez´ flutter pub get dans votre terminal pour recup´ erer´
les dependances.´

27 Modele de donn`ees Task´

Creez un fichier´ task.dart dans le repertoire´ models pour definir notre mod´ ele de
donn` ees´ Task :

class Task { final int id; final

String title; final bool
isCompleted;

Task({required this.id, required this.title, this.isCompleted = false}); }

\en{verbatim}

\section{´Eve´nements et ´Etats du Bloc}

Dans le re´pertoire \texttt{bloc}, nous aurons deux fichiers pour de´finir les ´ev´enement

\subsection{´Eve´nements (task\_event.dart)}

\begin{verbatim} import
’package:equatable/equatable.dart’;

abstract class TaskEvent extends Equatable {

const TaskEvent();
@override
List<Object> get props => [];
}

class AddTask extends TaskEvent { final String

title;

AddTask(this.title);

@override
Formateur : ENOK-DEV INGENIEUR´ SYSTEME D` ’INFORMATION page 33
[email protected]
Cours Complet Sur Flutter

List<Object> get props => [title];

}

class ToggleTaskStatus extends TaskEvent { final int taskId;

ToggleTaskStatus(this.taskId);

@override
List<Object> get props => [taskId];
}

class DeleteTask extends TaskEvent { final int taskId;

DeleteTask(this.taskId);

@override
List<Object> get props => [taskId]; }

27.1 Etats (task´ state.dart)

import ’package:equatable/equatable.dart’; import
’package:task_manager/models/task.dart’;

abstract class TaskState extends Equatable { const TaskState();

@override
List<Object> get props => [];
} class TaskInitial extends TaskState {} class

TaskLoading extends TaskState {} class

TaskLoaded extends TaskState { final List<Task>

tasks;

TaskLoaded(this.tasks);

@override
List<Object> get props => [tasks];
}

class TaskError extends TaskState { final String

message;

TaskError(this.message);

Formateur : ENOK-DEV INGENIEUR´ SYSTEME D` ’INFORMATION page 34

[email protected]
Cours Complet Sur Flutter

@override
List<Object> get props => [message];
}

28 Bloc de gestion des tachesˆ

Dans le repertoire´ bloc, creez un fichier´ task bloc.dart pour implementer le Bloc de´
gestion des taches :ˆ

import ’package:flutter_bloc/flutter_bloc.dart’; import

’package:task_manager/bloc/task_event.dart’; import
’package:task_manager/bloc/task_state.dart’; import
’package:task_manager/models/task.dart’;

class TaskBloc extends Bloc<TaskEvent, TaskState> { List<Task> tasks = [];

TaskBloc() : super(TaskInitial());

@override
Stream<TaskState> mapEventToState(TaskEvent event) async* { if (event is
AddTask) { yield TaskLoading(); try { tasks.add(Task(id: tasks.length, title:
event.title)); yield TaskLoaded(tasks); } catch (e) {
yield TaskError("Erreur lors de l’ajout de la t^ache.");
}
} else if (event is ToggleTaskStatus) { yield
TaskLoading(); try {
tasks[event.taskId].isCompleted = !tasks[event.taskId].isCompleted; yield
TaskLoaded(tasks); } catch (e) { yield TaskError("Erreur lors du basculement de l’e
´tat de la ta^che.");
}
} else if (event is DeleteTask) { yield TaskLoading(); try
{ tasks.removeWhere((task) => task.id == event.taskId); yield
TaskLoaded(tasks); } catch (e) { yield TaskError("Erreur lors de la suppression
de la ta^che.");
}
}
}
}

29 Ecran principal (HomeScreen)´

Creez un fichier´ home screen.dart dans le repertoire´ screens pour definir l’´ ecran prin-´
cipal de notre application :

Formateur : ENOK-DEV INGENIEUR´ SYSTEME D` ’INFORMATION page 35

[email protected]
Cours Complet Sur Flutter

import ’package:flutter/material.dart’; import

’package:flutter_bloc/flutter_bloc.dart’; import
’package:task_manager/bloc/task_bloc.dart’; import
’package:task_manager/bloc/task_event.dart’; import
’package:task_manager/bloc/task_state.dart’; import
’package:task_manager/models/task.dart’;

class HomeScreen extends StatelessWidget { final TextEditingController _taskTitleController =

TextEditingController();

@override
Widget build(BuildContext context) {
final TaskBloc taskBloc = BlocProvider.of<TaskBloc>(context);

return Scaffold( appBar:

AppBar( title: Text(’Task Manager’),
), body: Padding( padding:
EdgeInsets.all(16), child:
Column( children: [ Row( children:
[ Expanded( child: TextField( controller:
_taskTitleController, decoration:
InputDecoration( hintText: ’Ajouter une
t^ache’,
),
),
), ElevatedButton( onPressed: () { if
(_taskTitleController.text.isNotEmpty)
{ taskBloc.add(AddTask(_taskTitleController.text));
_taskTitleController.clear();
} }, child: Text(’Ajouter’),
),
],
),
SizedBox(height: 16), BlocBuilder<TaskBloc,
TaskState>( builder: (context, state) { if (state
is TaskLoading) { return
CircularProgressIndicator(); } else if (state is
TaskLoaded) { return Expanded( child:
ListView.builder( itemCount:
state.tasks.length, itemBuilder: (context,
index) { final Task task = state.tasks[index];
return ListTile( title: Text(task.title), leading:
Checkbox( value: task.isCompleted,
onChanged: (_) {
taskBloc.add(ToggleTaskStatus(index));

Formateur : ENOK-DEV INGENIEUR´ SYSTEME D` ’INFORMATION page 36

[email protected]
Cours Complet Sur Flutter

}, ), trailing: IconButton( icon:

Icon(Icons.delete), onPressed: ()
{ taskBloc.add(DeleteTask(index));
},
),
);
},
),
);
} else if (state is TaskError) { return Text(’Erreur : $
{state.message}’);
} else {
return Text(’Aucune ta^che pour le moment.’);
}
},
),
],
),
),
);
}
}

30 Point d’entree de l’application (main.dart)´

Configurez le point d’entree de l’application en utilisant´ BlocProvider pour profiter des
fonctionnalites du Bloc :´

import ’package:flutter/material.dart’; import

’package:flutter_bloc/flutter_bloc.dart’; import
’package:task_manager/bloc/task_bloc.dart’; import
’package:task_manager/screens/home_screen.dart’;

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

class MyApp extends StatelessWidget {

@override
Widget build(BuildContext context) { return
BlocProvider( create: (context) => TaskBloc(),
child: MaterialApp( title: ’Task Manager’,
home: HomeScreen(),
),
);

Formateur : ENOK-DEV INGENIEUR´ SYSTEME D` ’INFORMATION page 37

[email protected]
Cours Complet Sur Flutter

}
}

31 Conclusion
Felicitations! Vous avez termin´ e la cr´ eation de l’application de gestion des t´ aches en
utili-ˆ sant Flutter avec le pattern Bloc. Vous avez appris a impl` ementer un Bloc de gestion
des t´ aches,ˆ a s` eparer la logique m´ etier de l’interface utilisateur et´ a afficher les t` aches
dans l’ˆ ecran prin-´ cipal. Vous pouvez maintenant executer votre application et commencer
´ a ajouter, cocher et` supprimer des taches.ˆ

Formateur : ENOK-DEV INGENIEUR´ SYSTEME D` ’INFORMATION page 38

[email protected]