Cours Flutter
Mouna Rekik
2024-2025
PLAN
Introduction à Flutter
Les bases de Dart
Introduction aux Widgets
Exemples de Widgets
Les Routes
Consommation de services Web Firebase
Cloud Firestore
Introduction
à Flutter
Qu’est-ce que Flutter ?
2024-2025
▪ Définition : Un framework d’interface utilisateur open-source par Google
INTRODUCTION À FLUTTER
▪ Caractéristique principale : Permet de créer des applications de haute
qualité à partir d’une seule base de code.
Mobile Web Bureautique Embarqué
(iOS, Android) (Windows, macOS, Linux)
▪ Langage de programmation utilisé : Dart par Google
Version Version
2015 Création 2018 bêta 2024 3.22
4
Applications développées avec Flutter
2024-2025
INTRODUCTION À FLUTTER
Google Stadia My BMW et MINI Alibaba Google Pay
Jeux vidéos Automobile Commerce Paiement electronique
Mouna Rekik
5
Avantages de Flutter
2024-2025
• Une approche cross-plateforme pour une plus grande
INTRODUCTION À FLUTTER
flexibilité et une plus grande efficacité de développement
• Un rendu graphique rapide grâce à la technologie de
widget
• Une communauté dynamique et active pour un support
et une mise à jour réguliere
• Une compilation à la volée pour des cycles de
développement plus rapides et plus efficaces
Mouna Rekik
6
2024-2025
Paradigme d’application natif
INTRODUCTION À FLUTTER
Application Plateforme
Canvas
OEM
Evénements
Code natif
GPS Bluetooth
Audio Capteur
Caméra Etc.
Mouna Rekik
7
2024-2025
Le paradigme hybride : Webview (Ionic, Cordova)
Application Plateforme
INTRODUCTION À FLUTTER
Canvas
WebView
Evénements
Technologies
Web Bluetooth
GPS
standards
Audio Capteurs
Caméra Etc.
Mouna Rekik
8
2024-2025
Le paradigme cross-platform : React Native
Application
INTRODUCTION À FLUTTER
Platform
Canvas
OEM
widgets Evénements
GPS location Bluetooth
Audio Sensor
Camera Etc.
Mouna Rekik
9
2024-2025
Le paradigme cross-plarform : Flutter
Application Platforme
INTRODUCTION À FLUTTER
Canvas
Events
DART
GPS location Bluetooth
Audio Capteurs
Camera Etc.
Mouna Rekik
10
2024-2025
Google Trends
INTRODUCTION À FLUTTER
Mouna Rekik
[Link]
11
2024-2025
INTRODUCTION À FLUTTER
Mouna Rekik
Source :[Link]
12
Environnements de développement
2024-2025
INTRODUCTION À FLUTTER
Mouna Rekik
Site officiel : [Link]
13
2024-2025
Testez vos connaissances : Quiz
Question 1:
Qu’est-ce qui rend Flutter unique par rapport aux frameworks basés sur
INTRODUCTION À FLUTTER
WebView ?
A. Il utilise des technologies Web telles que HTML et CSS.
B. Il s’appuie sur un moteur de rendu intégré.
C. Il encapsule un navigateur Web dans l’application.
D. Il ne prend pas en charge les animations.
Question 2:
Dans React Native, comment les composants de l’interface
utilisateur sont-ils rendus ?
A. Via un moteur JavaScript qui contrôle les composants natifs.
B. En rendant directement les widgets à l’écran.
C. Utilisation de HTML et d’une WebView.
Mouna Rekik
D. En convertissant le code Dart en code natif.
14
2024-2025
Question 3:
Quel est le principal langage de programmation utilisé dans Flutter ?
A. Java
INTRODUCTION À FLUTTER
B. Swift
C. Dart
D. Kotlin
Question 4:
Lequel des choix suivants décrit le mieux l’approche « WebView » ?
A. Il affiche le contenu Web à l’intérieur d’un navigateur intégré.
B. Il dessine des widgets directement sur un canevas.
C. Il utilise une architecture d’interface utilisateur réactive.
D. Il compile le code en binaires natifs de la machine.
Mouna Rekik
15
Les basesde
Dart
LANGUAGE DART
Les bases de DART
17
Mouna Rekik 2024-2025
2024-2025
La structure de DART
•Chaque programme Dart commence par la fonction
main(), qui sert de point d’entrée au programme.
LANGUAGE DART
•La fonction main() est obligatoire dans chaque
application Dart.
void main()
{ print(‘Hello, World!’);
}
Mouna Rekik
[Link] : est un éditeur en ligne interactif pour écrire, tester et exécuter du code Dart directement dans le 18
navigateur
2024-2025
Types de données et variables dans Dart
•Dart est un langage à typage statique : les types de variables sont vérifiés
au moment de la compilation.
LANGUAGE DART
•Dart permet l’inférence de type à l’aide du mot-clé var.
•Le compilateur détermine automatiquement le type de la variable en
fonction de la valeur attribuée.
void main()
{
var i=12;
print("$i");
i="Bonjour";
Mouna Rekik
}
19
2024-2025
Types de données et variables dans Dart
Type Exemple Description
int int age = 30; Pour les nombres entiers
LANGUAGE DART
double double pi = 3.14; Pour les nombres à virgule flottante
String name= “Sami"; Pour le texte ou les séquences de
String
String name2=‘Ali’ caractères
Pour les valeurs booléennes (true ou
bool bool isValid = true;
false)
dynamic x = 42; Pour les variables dont le type peut
dynamic
x=‘bonjour’; changer dynamiquement
➢ Pour afficher le contenu d’une variable, il faut précéder le nom de la variable par $
void main()
Mouna Rekik
{String name="Sami";
print("$name ");} 20
2024-2025
Les Listes
•Une liste est un ensemble ordonné d’éléments.
LANGUAGE DART
•Chaque élément de la liste est accessible par son index (commençant par 0).
Syntaxe
List<T> listName = [];
T: Le type des éléments de la liste
listName: Le nom de la liste.
Mouna Rekik
21
2024-2025
Les Listes
•
• Création d’une liste d’un • Création d’une liste d’une
type dynamique
LANGUAGE DART
void main() void main()
{
{List<int> numbers = [1, 2, 3];
List<dynamic> mixed = [1, 'two', true];
[Link](4); print("$mixed");
print("$numbers");} }
[1, 2, 3, 4] [1, two, true]
Mouna Rekik
22
Les Listes
2024-2025
List list = [Link](growable: true);
•List: Type générique utilisé pour créer une liste.
LANGUAGE DART
•[Link]() : Un constructeur statique pour créer une liste vide.
•growable : true
- Indique que la liste est extensible.
- Permet d’ajouter des éléments à la liste après sa création.
void main()
{
List l = [Link](growable: false);
[Link](“ISIMS");
print(l);
}
Mouna Rekik
23
2024-2025
Les Listes
void main()
{
LANGUAGE DART
List<int> liste1 = []; // Affiche
List<int> liste2 = [1, 2, 3];
4
List<dynamic> liste3 = [1, 'Hello', 3.3];
List liste4 = [4, "ma liste"];
1
[Link](1);
[Link](4);
print([Link]);
print(liste3[0]);
Mouna Rekik
24
2024-2025
Les Listes
void main()
{
LANGUAGE DART
List<int> liste1 = []; // Affiche
List<int> liste2 = [1, 2, 3];
4
List<dynamic> liste3 = [1, 'Hello', 3.3];
List liste4 = [4, "ma liste"];
1
[Link](1);
[Link](4);
print([Link]);
print(liste3[0]);
Mouna Rekik
25
2024-2025
Manipulation d’éléments dans les listes
•add(element) : Ajoute un élément à la fin de la liste
LANGUAGE DART
•addAll(iterable) : Ajoute tous les éléments d’un itérable (comme une
autre liste)
•insert(index, element) : Insère un élément à une position spécifique.
•insertAll(index, iterable) : Insère plusieurs éléments à un niveau
spécifique position.
•remove(element) : Supprime la première occurrence d’un élément.
•removeAt(index)
•clear() : Supprime tous les éléments de la liste
Mouna Rekik
26
2024-2025
Le type Map
•Un Map est un ensemble de paires clé-valeur.
•Les clés sont uniques et n’apparaissent qu’une seule fois.
LANGUAGE DART
•Les valeurs peuvent être dupliquées.
Syntaxe
Map<KeyType, ValueType> mapName = {};
KeyType: Le type des clés (String, int…).
ValueType: Le type des valeurs (e.g., String, int, ou objets personnalisés)
mapName: Nom de Map.
Mouna Rekik
27
2024-2025
Le type Map
LANGUAGE DART
void main(){
var myMap = {
'key1': 'value1',
'key2': 'value2',}; //{key1: value1, key2: value2}
print("$myMap");
Mouna Rekik
28
2024-2025
void main()
{
Map<String, int> map1 = Map();
Map<String, int> map2 = {'var1': 1, 'var2': 2};
print(map2['var1']); // Affiche 1
LANGUAGE DART
Map<String, dynamic> map3 = Map();
map3['toto'] = 'titi';
map3['tata'] = 3;
Map map4 = Map(); // <=> Map<dynamic, dynamic>
map4['toto'] = 'titi';
map4[4] = 8;
print(map4[4]); // Affiche 8
Mouna Rekik
29
Structure de contrôle
2024-2025
void main() {
var age=3;
if (age < 14)
print('Enfants');
LANGUAGE DART
else
if (age < 24)
print('Adolescents');
else
print('Adultes');
}
• Opérateur ternaire / opérateur conditionnel
condition ? value_if_true : value_if_false;
Mouna Rekik
age < 14)? print('Enfants'):((age < 24)?print('Adolescents'): print('Adultes'));
(
30
2024-2025
Les boucles
void main() {
LANGUAGE DART
var year=34;
List<String> students = ['s1', 's2', 's3'];
for (var student in students)
print(student);
for (var i = 0; i < [Link]; i++)
print(students[i]);
while (year < 2016)
year += 1;}
Mouna Rekik
31
2024-2025
Les fonctions
•Les fonctions sont des blocs de code réutilisable qui effectuent
une tâche spécifique.
LANGUAGE DART
•Ils peuvent prendre des entrées (paramètres) et renvoyer une
valeur.
Syntaxe
ReturnType nomDeLaFonction(ParameterType
parameterName)
{Corps de la fonction
return value;}
Mouna Rekik
32
2024-2025
Type de fonction
1. Fonctions nommées: Définie avec un nom spécifique.
LANGUAGE DART
Exemple :
void main() {
int add(int a, int b)
{ return a + b;}
int s=add(2,3);
print('$s’);//ou
print (add(4,3));
}
Mouna Rekik
33
2024-2025
Type de function
2. Fonctions anonymes(Lambdas) : Fonctions sans nom, souvent
utilisées comme arguments.
LANGUAGE DART
Example :
void main() { => : expression body
var adding=(double a, double b)=>a+b;
print(adding(5,5)); Définit une fonction qui :
int Function(int,int) multiply = (int a, int b) => a * b;
print(multiply(2,6));
1. Ne contient qu’une seule
print(multiply(8,9)); expression
} 2. Retourne une valeur
Mouna Rekik
34
