Cours Programmation Mobile - Module 4: Flutter

Développement Mobile avec Flutter

Master 2 Réseaux Informatiques et Multimédia
Enseignant: [Link] KABORE
profil github: [Link]

2025 Master 2 Réseaux Informatiques et Multimédia 1

Cours Programmation Mobile - Module 4: Flutter

Objectifs du Module
Comprendre les fondements du framework Flutter
Maîtriser l'installation et la configuration de l'environnement
Apprendre les concepts de base de Dart et Flutter
Développer des applications mobiles multiplateformes avec Flutter

2025 Master 2 Réseaux Informatiques et Multimédia 2

Cours Programmation Mobile - Module 4: Flutter

Plan du module
1. Introduction à Flutter
2. Installation et configuration
3. Concepts de base du langage Dart
4. Création d'un premier projet Flutter
5. Les widgets et leur composition
6. Stateless vs Stateful widgets
7. Navigation entre écrans
8. Gestion des images et assets
9. Formulaires et validation

2025 Master 2 Réseaux Informatiques et Multimédia 3

Cours Programmation Mobile - Module 4: Flutter

1. Introduction à Flutter

2025 Master 2 Réseaux Informatiques et Multimédia 4

Cours Programmation Mobile - Module 4: Flutter

Qu'est-ce que Flutter ?

Flutter est un framework d'interface utilisateur open source développé par Google pour
créer des applications nativement compilées pour :

Mobile (iOS, Android)

Web
Desktop (Windows, macOS, Linux)
Embedded devices

à partir d'une base de code unique.

2025 Master 2 Réseaux Informatiques et Multimédia 5

Cours Programmation Mobile - Module 4: Flutter

Caractéristiques clés de Flutter

Développement rapide : Hot Reload pour voir les changements instantanément
UI expressive et flexible : Riche bibliothèque de widgets personnalisables
Performance native : Compilation en code natif, pas d'interprétation à l'exécution
Design réactif : Inspiré par React, basé sur la composition de widgets
Une seule base de code : Déploiement multiplateforme

2025 Master 2 Réseaux Informatiques et Multimédia 6

Cours Programmation Mobile - Module 4: Flutter

Architecture de Flutter
Couches principales

Framework Flutter (Dart)

Moteur Flutter (C/C++)
Embedder spécifique à la plateforme

2025 Master 2 Réseaux Informatiques et Multimédia 7

Cours Programmation Mobile - Module 4: Flutter

Flutter vs autres frameworks

Caractéristique Flutter React Native Xamarin Native

Langage Dart JavaScript C# Swift/Kotlin
Performance Excellente Bonne Bonne Excellente
Widgets Composants Composants
UI Natif
propres natifs natifs
Hot Reload Oui Oui Limité Non
Courbe
Moyenne Moyenne Élevée Élevée
d'apprentissage

2025 Master 2 Réseaux Informatiques et Multimédia 8

Cours Programmation Mobile - Module 4: Flutter

2. Installation et configuration

2025 Master 2 Réseaux Informatiques et Multimédia 9

Cours Programmation Mobile - Module 4: Flutter

Prérequis
Windows, macOS ou Linux
Git pour le contrôle de version
Éditeur de code (VS Code, Android Studio, IntelliJ)
Pour le développement iOS : Mac avec Xcode
Pour le développement Android : Android Studio et SDK

2025 Master 2 Réseaux Informatiques et Multimédia 10

Cours Programmation Mobile - Module 4: Flutter

Installation du SDK Flutter

1. Télécharger le SDK Flutter depuis [Link]
2. Extraire l'archive dans un dossier (éviter les chemins avec espaces)
3. Ajouter le dossier flutter/bin aux variables d'environnement PATH

# Vérifier l'installation
flutter doctor

2025 Master 2 Réseaux Informatiques et Multimédia 11

Cours Programmation Mobile - Module 4: Flutter

Configuration de l'éditeur
VS Code

Installer l'extension "Flutter" et "Dart"

Activer Flutter: New Project command

Android Studio / IntelliJ

Installer les plugins "Flutter" et "Dart"

Redémarrer l'IDE

2025 Master 2 Réseaux Informatiques et Multimédia 12

Cours Programmation Mobile - Module 4: Flutter

Flutter Doctor
Outil de diagnostic pour vérifier la configuration :

flutter doctor

Résout les problèmes éventuels :

Installation des SDK manquants

Configuration des licences
Installation des outils de build

2025 Master 2 Réseaux Informatiques et Multimédia 13

Cours Programmation Mobile - Module 4: Flutter

3. Concepts de base du langage Dart

2025 Master 2 Réseaux Informatiques et Multimédia 14

Cours Programmation Mobile - Module 4: Flutter

Introduction à Dart
Dart est un langage de programmation développé par Google :

Orienté objet et typé statiquement

Optimisé pour l'UI
Facilite le développement client
Supporte la compilation JIT (développement) et AOT (production)

2025 Master 2 Réseaux Informatiques et Multimédia 15

Cours Programmation Mobile - Module 4: Flutter

Types de données en Dart

// Types numériques // Type dynamique
int age = 30;
double prix = 9.99;
dynamic valeur = 'peut changer de type';
valeur = 42; // valide
// Chaînes de caractères
String nom = 'Flutter'; // Type nullable (Dart 2.12+)
// Booléens String? texteOptional; // Peut être null
bool estActif = true;
// Type late (Dart 2.12+)
// Collections
List<String> fruits = ['pomme', 'banane', 'orange']; late String valeurInitialiseeApres;
Map<String, int> scores = {'Alice': 90, 'Bob': 85}; // Sera initialisée avant utilisation
Set<int> nombres = {1, 2, 3, 4, 5};
// Records (Dart 3.0+)
var personne = ('John', 25);
print(personne.$1); // John

2025 Master 2 Réseaux Informatiques et Multimédia 16

Cours Programmation Mobile - Module 4: Flutter

Variables et constantes
// Variables // Constantes
const double PI = 3.14159;
var nom = 'Flutter'; // Type inféré final String aujourd'hui = [Link]().toIso8601String();
String prenom = 'Dart'; // Type explicite
// Différence entre const et final
// const : constante à la compilation
// Variables nullables (Dart 2.12+) const List<int> constList = [1, 2, 3];
// final : constante à l'exécution
String? texteOptional; // Peut être null final List<int> finalList = [[Link]().day];

// Variables late
late String description;

2025 Master 2 Réseaux Informatiques et Multimédia 17

Cours Programmation Mobile - Module 4: Flutter

Opérateurs en Dart
// Arithmétiques // Comparaison
int somme = 5 + 3; bool égal = 5 == 3; // false
int différence = 5 - 3; bool différent = 5 != 3; // true
int produit = 5 * 3; bool supérieur = 5 > 3; // true
double quotient = 5 / 3; bool inférieur = 5 < 3; // false
int modulo = 5 % 3;
// Logiques
// Incrémentation bool et = true && false; // false
int a = 5; bool ou = true || false; // true
a++; // a = 6 bool non = !true; // false
a--; // a = 5

2025 Master 2 Réseaux Informatiques et Multimédia 18

Cours Programmation Mobile - Module 4: Flutter

Structures conditionnelles
// If-else // Switch-case
if (age >= 18) { switch (fruit) {
print('Majeur'); case 'pomme':
} else { print('Rouge ou verte');
break;
print('Mineur');
case 'banane':
} print('Jaune');
break;
// Opérateur ternaire default:
String statut = age >= 18 ? 'Majeur' : 'Mineur'; print('Autre fruit');
}

// Null-aware operators
String? nom;
print(nom ?? 'Inconnu'); // 'Inconnu' si nom est null

2025 Master 2 Réseaux Informatiques et Multimédia 19

Cours Programmation Mobile - Module 4: Flutter

Structures itératives
// Boucle for // Boucle while
for (int i = 0; i < 5; i++) { int compteur = 0;
print('Itération $i'); while (compteur < 5) {
}
print('Compteur: $compteur');
// Boucle for-in (sur collections) compteur++;
List fruits = ['pomme', 'banane', 'orange']; }
for (String fruit in fruits) {
print(fruit); // Boucle do-while
} int nombre = 0;
do {
print('Nombre: $nombre');
nombre++;
} while (nombre < 3);

2025 Master 2 Réseaux Informatiques et Multimédia 20

Cours Programmation Mobile - Module 4: Flutter

Fonctions
// Fonction basique // Paramètres optionnels positionnels
String formater(String texte, [bool majuscules = false]) {
void saluer(String nom) { return majuscules ? [Link]() : texte;
print('Bonjour $nom !'); }

} // Fonctions fléchées
int multiplier(int a, int b) => a * b;
// Fonction avec retour // Fonctions comme paramètres
int additionner(int a, int b) { void executerOperation(int a, int b, int Function(int, int) operation) {
print('Résultat: ${operation(a, b)}');
return a + b; }
}

// Paramètres optionnels nommés

void afficherInfos({String? nom, int age = 30}) {
print('Nom: ${nom ?? "Inconnu"}, Age: $age');
}

2025 Master 2 Réseaux Informatiques et Multimédia 21

Cours Programmation Mobile - Module 4: Flutter

4. Création d'un premier projet Flutter

2025 Master 2 Réseaux Informatiques et Multimédia 22

Cours Programmation Mobile - Module 4: Flutter

Créer un nouveau projet Flutter

# Dans le terminal
flutter create mon_application

# Avec un nom d'organisation (pour les bundles)

flutter create --org [Link] mon_application

# Spécifier les plateformes

flutter create --platforms=android,ios mon_application

# Avec une interface spécifique (Material ou Cupertino)

flutter create --template=app --platforms=ios,android mon_application

2025 Master 2 Réseaux Informatiques et Multimédia 23

Cours Programmation Mobile - Module 4: Flutter

Structure d'un projet Flutter

mon_application/
├── android/ # Code spécifique à Android
├── ios/ # Code spécifique à iOS
├── lib/ # Code source Dart
│ └── [Link] # Point d'entrée de l'application
├── test/ # Tests unitaires et d'intégration
├── web/ # (Si activé) Code spécifique au web
├── [Link] # Configuration du projet et dépendances
└── [Link] # Documentation

2025 Master 2 Réseaux Informatiques et Multimédia 24

Cours Programmation Mobile - Module 4: Flutter

Le fichier [Link]
import 'package:flutter/[Link]';

void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Ma première application',
theme: ThemeData(
primarySwatch: [Link],
),
home: MyHomePage(title: 'Page d\'accueil'),
);
}
}
2025 Master 2 Réseaux Informatiques et Multimédia 25
Cours Programmation Mobile - Module 4: Flutter

Exécuter l'application
# Dans le répertoire du projet
flutter run

# Pour un appareil spécifique (si plusieurs connectés)

flutter run -d <ID_APPAREIL>

# Lister les appareils disponibles

flutter devices

# Mode release (optimisé)

flutter run --release

2025 Master 2 Réseaux Informatiques et Multimédia 26

Cours Programmation Mobile - Module 4: Flutter

5. Les widgets et leur composition

2025 Master 2 Réseaux Informatiques et Multimédia 27

Cours Programmation Mobile - Module 4: Flutter

Comprendre les widgets

Dans Flutter, tout est widget :

Éléments d'interface utilisateur

Layouts
Interactions
Animations
Thèmes

Les widgets sont composés en arbre pour créer l'interface.

2025 Master 2 Réseaux Informatiques et Multimédia 28

Cours Programmation Mobile - Module 4: Flutter

Types de widgets fondamentaux

Widgets de base Widgets de layout

Text : Affiche du texte Container : Box model avec

Image : Affiche une image décoration

Icon : Affiche une icône Row / Column : Disposition linéaire

Button : Différents types de boutons Stack : Superposition de widgets

TextField : Entrée de texte ListView : Liste défilante

GridView : Grille défilante

2025 Master 2 Réseaux Informatiques et Multimédia 29

Cours Programmation Mobile - Module 4: Flutter

Exemple d'interface simple

// Widget simple avec Material Design // Card avec contenu structuré
Scaffold( Card(
elevation: 4.0,
appBar: AppBar( child: Padding(
title: Text('Mon Application'), padding: [Link](16.0),
), child: Column(
body: Center( children: [
Text('Titre', style: TextStyle(fontSize: 18.0)),
child: Text('Bonjour Flutter !'), SizedBox(height: 8.0),
), Text('Description du contenu'),
floatingActionButton: FloatingActionButton( SizedBox(height: 16.0),
child: Icon([Link]), ElevatedButton(
onPressed: () {},
onPressed: () {}, child: Text('Action'),
), ),
) ],
),
),
)

2025 Master 2 Réseaux Informatiques et Multimédia 30

Cours Programmation Mobile - Module 4: Flutter

Layouts en Flutter
// Row (disposition horizontale) // Stack (superposition)
Row( Stack(
mainAxisAlignment: [Link], children: [
children: [ [Link]('assets/[Link]'),
Icon([Link]), Positioned(
Icon([Link]), bottom: 16.0,
Icon([Link]), right: 16.0,
], child: ElevatedButton(
) onPressed: () {},
child: Text('Action'),
// Column (disposition verticale) ),
Column( ),
crossAxisAlignment: [Link], ],
children: [ )
Text('Titre'), // Wrap (disposition avec retour à la ligne)
Text('Sous-titre'), Wrap(
Text('Description'), spacing: 8.0,
], runSpacing: 8.0,
) children: [
Chip(label: Text('Flutter')),
Chip(label: Text('Dart')),
Chip(label: Text('Mobile')),
Chip(label: Text('App')),
],
2025 Master 2 Réseaux Informatiques et Multimédia ) 31
Cours Programmation Mobile - Module 4: Flutter

Listes et grilles
ListView : Liste défilante

[Link](
itemCount: [Link],
itemBuilder: (context, index) {
return ListTile(
title: Text(items[index].title),
subtitle: Text(items[index].description),
);
},
)

2025 Master 2 Réseaux Informatiques et Multimédia 32

Cours Programmation Mobile - Module 4: Flutter

Listes et grilles (suite)

GridView : Grille défilante

[Link](
crossAxisCount: 2,
children: [Link](6, (index) {
return Card(
child: Center(
child: Text('Item $index'),
),
);
}),
)

2025 Master 2 Réseaux Informatiques et Multimédia 33

Cours Programmation Mobile - Module 4: Flutter

6. Stateless vs Stateful widgets

2025 Master 2 Réseaux Informatiques et Multimédia 34

Cours Programmation Mobile - Module 4: Flutter

StatelessWidget
Immuable : propriétés ne changent pas après initialisation
Sans état interne : le widget ne se "souvient" de rien
Rebuild complet : reconstruit entièrement lors des changements
Performance : généralement plus performant car plus simple

2025 Master 2 Réseaux Informatiques et Multimédia 35

Cours Programmation Mobile - Module 4: Flutter

StatelessWidget (suite)
class MonBouton extends StatelessWidget {
final String texte; // Utilisation du widget stateless
final VoidCallback onPressed;
@override
const MonBouton({Key? key, required [Link], required [Link]})
: super(key: key); Widget build(BuildContext context) {
@override return Scaffold(
Widget build(BuildContext context) {
return ElevatedButton( appBar: AppBar(
onPressed: onPressed,
child: Text(texte), title: Text('Exemple'),
}
);
),
}
body: Center(
child: MonBouton(
texte: 'Cliquez-moi',
onPressed: () {
print('Bouton cliqué');
},
),
),
);
}
2025 Master 2 Réseaux Informatiques et Multimédia 36
Cours Programmation Mobile - Module 4: Flutter

StatefulWidget
Mutable : peut changer d'état interne
Gère un état : stocke des données qui peuvent changer
Rebuild partiel : peut mettre à jour seulement les parties nécessaires
Cycle de vie : dispose de méthodes comme initState, dispose

2025 Master 2 Réseaux Informatiques et Multimédia 37

Cours Programmation Mobile - Module 4: Flutter

StatefulWidget (suite)
class Compteur extends StatefulWidget { // Exemple de gestion d'état avec StatefulWidget
@override class ToggleWidget extends StatefulWidget {
@override
_CompteurState createState() => _CompteurState();
_ToggleWidgetState createState() => _ToggleWidgetState();
} }
class _CompteurState extends State { class _ToggleWidgetState extends State {
int _valeur = 0; bool _isOn = false;
@override
void _incrementer() { Widget build(BuildContext context) {
setState(() { return Column(
children: [
_valeur++; Text(_isOn ? 'ON' : 'OFF'),
}); Switch(
} value: _isOn,
@override onChanged: (newValue) {
Widget build(BuildContext context) { setState(() {
return Column( _isOn = newValue;
});
children: [
},
Text('Valeur: $_valeur'), ),
ElevatedButton( ],
onPressed: _incrementer, );
child: Text('Incrémenter'), }
), }
],
);}}
2025 Master 2 Réseaux Informatiques et Multimédia 38
Cours Programmation Mobile - Module 4: Flutter

Quand utiliser l'un ou l'autre ?

StatelessWidget

Affichage statique
Dépend uniquement de ses propriétés
Ex: boutons, icônes, textes, cartes informatives

StatefulWidget

Interface interactive
Changement d'état interne
Ex: formulaires, animations, chargement de données

2025 Master 2 Réseaux Informatiques et Multimédia 39

Cours Programmation Mobile - Module 4: Flutter

Cycle de vie d'un StatefulWidget

1. createState() - Crée l'objet d'état
2. initState() - Initialisation, appelé une seule fois
3. didChangeDependencies() - Appelé quand les dépendances changent
4. build() - Construction du widget
5. didUpdateWidget() - Quand le widget parent est reconstruit
6. setState() - Déclenche une reconstruction
7. dispose() - Nettoyage, libération des ressources

2025 Master 2 Réseaux Informatiques et Multimédia 40

Cours Programmation Mobile - Module 4: Flutter

7. Navigation entre écrans

2025 Master 2 Réseaux Informatiques et Multimédia 41

Cours Programmation Mobile - Module 4: Flutter

Navigation avec Navigator

Le système de navigation de Flutter utilise une pile de routes :

push : ajouter une route (aller à une nouvelle page)

pop : retirer une route (revenir en arrière)

// Navigation vers une nouvelle page

[Link](
context,
MaterialPageRoute(builder: (context) => DetailPage()),
);

// Retour à la page précédente

[Link](context);

2025 Master 2 Réseaux Informatiques et Multimédia 42

Cours Programmation Mobile - Module 4: Flutter

Routes nommées
Définir les routes au niveau de l'application :

MaterialApp( // Navigation avec routes nommées

// Routes disponibles dans l'application [Link](context, '/details');
routes: { // Avec arguments
'/': (context) => HomePage(), [Link](
'/details': (context) => DetailPage(), context,
'/details',
'/settings': (context) => SettingsPage(), arguments: {'id': 123, 'title': 'Mon produit'},
}, );
initialRoute: '/', // Route initiale
)

2025 Master 2 Réseaux Informatiques et Multimédia 43

Cours Programmation Mobile - Module 4: Flutter

Récupérer les arguments

// Dans la page de destination
class DetailPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
// Récupérer les arguments
final args = [Link](context)!.[Link] as Map<String, dynamic>;

return Scaffold(
appBar: AppBar(title: Text(args['title'])),
body: Center(
child: Text('ID du produit: ${args['id']}'),
),
);
}
}

2025 Master 2 Réseaux Informatiques et Multimédia 44

Cours Programmation Mobile - Module 4: Flutter

Navigation avec retour de données

// Naviguer vers une page et attendre un résultat
Future<void> _naviguerVersSelection() async {
final resultat = await [Link](
context,
MaterialPageRoute(builder: (context) => PageSelection()),
);
// Utiliser le résultat
if (resultat != null) {
setState(() {
elementSelectionne = resultat;
});
}
}
// Dans la page de sélection
void _retournerResultat(String selection) {
[Link](context, selection); // Retourne la donnée
}
2025 Master 2 Réseaux Informatiques et Multimédia 45
Cours Programmation Mobile - Module 4: Flutter

8. Gestion des images et assets

2025 Master 2 Réseaux Informatiques et Multimédia 46

Cours Programmation Mobile - Module 4: Flutter

Déclarer des assets dans [Link]

flutter:
assets:
- assets/images/
- assets/icons/[Link]

L'indentation est importante dans le fichier YAML.

2025 Master 2 Réseaux Informatiques et Multimédia 47

Cours Programmation Mobile - Module 4: Flutter

Utiliser des images

// Depuis le projet (assets)
[Link]('assets/images/[Link]')

// Depuis internet
[Link]('[Link]

// Avec personnalisation
[Link](
'assets/images/[Link]',
width: 200,
height: 150,
fit: [Link], // Mode d'ajustement
)

2025 Master 2 Réseaux Informatiques et Multimédia 48

Cours Programmation Mobile - Module 4: Flutter

Optimisation des images

Utiliser des formats appropriés (PNG, JPEG, WebP)
Dimensionner correctement les images
Prévoir différentes résolutions (1x, 2x, 3x)
Structure de dossiers pour les différentes résolutions :

assets/
├── images/
│ ├── [Link] # 1x (baseline)
│ ├── 2.0x/
│ │ └── [Link] # 2x resolution
│ └── 3.0x/
│ └── [Link] # 3x resolution

2025 Master 2 Réseaux Informatiques et Multimédia 49

Cours Programmation Mobile - Module 4: Flutter

Icônes et polices
Icônes

// Icônes Material Design

Icon([Link], color: [Link], size: 24.0)

// Icônes personnalisées (avec font icon)

Icon(MyIcons.custom_icon)

2025 Master 2 Réseaux Informatiques et Multimédia 50

Cours Programmation Mobile - Module 4: Flutter

Icônes et polices (suite)

Polices personnalisées

# Dans [Link]
flutter:
fonts:
- family: Montserrat
fonts:
- asset: fonts/[Link]
- asset: fonts/[Link]
weight: 700

Text(
'Texte stylisé',
style: TextStyle(fontFamily: 'Montserrat'),
)

2025 Master 2 Réseaux Informatiques et Multimédia 51

Cours Programmation Mobile - Module 4: Flutter

9. Formulaires et validation

2025 Master 2 Réseaux Informatiques et Multimédia 52

Cours Programmation Mobile - Module 4: Flutter

Créer un formulaire
// Clé pour identifier et valider le formulaire // Suite du formulaire
final _formKey = GlobalKey<FormState>(); ElevatedButton(
onPressed: () {
// Dans le widget build if (_formKey.currentState!.validate()) {
Form( // Traitement du formulaire
key: _formKey, [Link](context).showSnackBar(
child: Column( SnackBar(content: Text('Traitement en cours')),
children: <Widget>[ );
TextFormField( }
decoration: InputDecoration(labelText: 'Nom'), },
validator: (value) { child: Text('Soumettre'),
if (value == null || [Link]) { ),
return 'Veuillez entrer un nom';
} // Récupération des valeurs
return null; // Dans l'événement onSaved:
}, String _nom;
), onSaved: (value) => _nom = value,
],
), // Sauvegarde du formulaire
) _formKey.currentState!.save();

2025 Master 2 Réseaux Informatiques et Multimédia 53

Cours Programmation Mobile - Module 4: Flutter

Contrôleurs de champs
class _MonFormulaireState extends State<MonFormulaire> { // Dans la méthode build
// Contrôleurs pour les champs @override
Widget build(BuildContext context) {
final _emailController = TextEditingController();
return Form(
final _passwordController = TextEditingController(); child: Column(
children: [
@override TextFormField(
void dispose() { controller: _emailController,
// Libérer les ressources decoration: InputDecoration(labelText: 'Email'),
_emailController.dispose(); ),
TextFormField(
_passwordController.dispose(); controller: _passwordController,
[Link](); decoration: InputDecoration(labelText: 'Mot de passe'),
} obscureText: true,
} ),
ElevatedButton(
onPressed: () {
print('Email: ${_emailController.text}');
},
child: Text('Connexion'),
),
],
),
);
}

2025 Master 2 Réseaux Informatiques et Multimédia 54

Cours Programmation Mobile - Module 4: Flutter

Validation avancée des formulaires

TextFormField( // Validation personnalisée de numéro de téléphone
decoration: InputDecoration( TextFormField(
labelText: 'Email', decoration: InputDecoration(
labelText: 'Téléphone',
hintText: 'exemple@[Link]', hintText: '06XXXXXXXX',
prefixIcon: Icon([Link]), prefixIcon: Icon([Link]),
border: OutlineInputBorder(),), border: OutlineInputBorder(),
keyboardType: [Link], ),
validator: (value) { keyboardType: [Link],
if (value == null || [Link]) { validator: (value) {
return 'Veuillez entrer un email'; if (value == null || [Link]) {
} return 'Veuillez entrer un numéro';
}
// Validation avec regex
bool emailValide = RegExp( // Validation téléphone français
r'^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$' bool telValide = RegExp(
).hasMatch(value); r'^(0|\+33)[1-9]([-. ]?[0-9]{2}){4}$'
).hasMatch(value);
if (!emailValide) {
return 'Veuillez entrer un email valide'; if (!telValide) {
return 'Format invalide';
} }
return null; return null;
},) },
onSaved: (value) => _telephone = value,
2025 Master 2 Réseaux Informatiques et Multimédia ) 55
Cours Programmation Mobile - Module 4: Flutter

Formulaires interactifs
TextFormField( // Exemple de validation de mot de passe
TextFormField(
decoration: InputDecoration( decoration: InputDecoration(
labelText: 'Email', labelText: 'Mot de passe',
hintText: 'Votre mot de passe',
hintText: 'exemple@[Link]', prefixIcon: Icon([Link]),
prefixIcon: Icon([Link]), border: OutlineInputBorder(),
),
border: OutlineInputBorder(),), obscureText: true,
keyboardType: [Link], validator: (value) {
validator: (value) { if (value == null || [Link]) {
return 'Veuillez entrer un mot de passe';
if (value == null || [Link]) { }
return 'Veuillez entrer un email'; if ([Link] < 8) {
return 'Le mot de passe doit contenir au moins 8 caractères';
} }
// Validation avec regex return null;
bool emailValide = RegExp( },
onSaved: (value) => _password = value,
r'^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$' )
).hasMatch(value);
if (!emailValide) {
return 'Veuillez entrer un email valide';
}
return null;
},
onSaved: (value) => _email = value,)

2025 Master 2 Réseaux Informatiques et Multimédia 56

Cours Programmation Mobile - Module 4: Flutter

10. Installer et utiliser des librairies externes

2025 Master 2 Réseaux Informatiques et Multimédia 57

Cours Programmation Mobile - Module 4: Flutter

Déclarer des dépendances

# Dans [Link] # Stockage
dependencies: shared_preferences: ^2.1.0
flutter: sqflite: ^2.2.6
sdk: flutter
# UI # Réseau
flutter_slidable: ^2.0.0 http: ^0.13.5
cached_network_image: ^3.2.0 dio: ^5.1.1

# State Management # Utilitaires

provider: ^6.0.5 intl: ^0.18.0
bloc: ^8.1.1 url_launcher: ^6.1.10
flutter_bloc: ^8.1.2 flutter_local_notifications: ^13.0.0

2025 Master 2 Réseaux Informatiques et Multimédia 58

Cours Programmation Mobile - Module 4: Flutter

Installer et mettre à jour des packages

# Ajouter un package # Informations sur les dépendances
flutter pub add provider flutter pub deps
# Ajouter plusieurs packages
# Vérifier les packages obsolètes
flutter pub add http dio shared_preferences
flutter pub outdated
# Installation depuis [Link]
flutter pub get # Installer une version spécifique
flutter pub add provider:^6.0.0
# Mise à jour des packages
flutter pub upgrade # Supprimer un package
flutter pub remove provider

2025 Master 2 Réseaux Informatiques et Multimédia 59

Cours Programmation Mobile - Module 4: Flutter

Utiliser un package dans votre code

// Import du package // Exemple avec provider
import 'package:provider/[Link]'; void main() {
import 'package:http/[Link]' as http;
runApp(
// Exemple avec http ChangeNotifierProvider(
Future fetchData() async { create: (context) => MonModele(),
final response = await [Link]( child: MyApp(),
[Link]('[Link] ),
headers: {'Authorization': 'Bearer token'},
); );
}
if ([Link] == 200) {
print('Données: ${[Link]}'); // Accès au modèle dans un widget
} else {
Widget build(BuildContext context) {
print('Erreur: ${[Link]}');
} final modele = [Link](context);
}
return Text(
'Valeur: ${[Link]}',
style: TextStyle(fontSize: 24),
);
2025 Master 2 Réseaux Informatiques et Multimédia } 60
Cours Programmation Mobile - Module 4: Flutter

Conclusion
Flutter offre un framework complet pour le développement mobile
multiplateforme
Le langage Dart est moderne et adapté au développement d'interfaces
L'approche basée sur les widgets permet une grande flexibilité
La documentation est riche et la communauté active
Les performances sont excellentes comparées aux autres solutions
multiplateformes

2025 Master 2 Réseaux Informatiques et Multimédia 61

Cours Programmation Mobile - Module 4: Flutter

Ressources complémentaires
Documentation officielle Flutter
Cookbook Flutter
Dart documentation
Flutter packages
Flutter Community
FlutterFire (Firebase)

2025 Master 2 Réseaux Informatiques et Multimédia 62

Cours Programmation Mobile - Module 4: Flutter

Questions ?
Merci pour votre attention !

2025 Master 2 Réseaux Informatiques et Multimédia 63

Cours Programmation Mobile - Module 4: Flutter

TP : Application de liste de tâches

Pour mettre en pratique les concepts vus dans ce module, vous développerez une
application de liste de tâches (Todo List) avec les fonctionnalités suivantes :

Affichage de la liste des tâches

Ajout d'une nouvelle tâche
Marquage d'une tâche comme terminée
Suppression d'une tâche
Navigation entre les écrans
Formulaire de création de tâche avec validation

2025 Master 2 Réseaux Informatiques et Multimédia 64

Cours Programmation Mobile - Module 4: Flutter

10. Installer et utiliser des librairies externes

2025 Master 2 Réseaux Informatiques et Multimédia 65

Cours Programmation Mobile - Module 4: Flutter

Déclarer des dépendances

# Dans [Link] # Stockage
dependencies: shared_preferences: ^2.1.0
flutter: sqflite: ^2.2.6
sdk: flutter
# UI # Réseau
flutter_slidable: ^2.0.0 http: ^0.13.5
cached_network_image: ^3.2.0 dio: ^5.1.1

# State Management # Utilitaires

provider: ^6.0.5 intl: ^0.18.0
bloc: ^8.1.1 url_launcher: ^6.1.10
flutter_bloc: ^8.1.2 flutter_local_notifications: ^13.0.0

2025 Master 2 Réseaux Informatiques et Multimédia 66

Cours Programmation Mobile - Module 4: Flutter

Installer et mettre à jour des packages

# Ajouter un package # Informations sur les dépendances
flutter pub add provider flutter pub deps
# Ajouter plusieurs packages
# Vérifier les packages obsolètes
flutter pub add http dio shared_preferences
flutter pub outdated
# Installation depuis [Link]
flutter pub get # Installer une version spécifique
flutter pub add provider:^6.0.0
# Mise à jour des packages
flutter pub upgrade # Supprimer un package
flutter pub remove provider

2025 Master 2 Réseaux Informatiques et Multimédia 67

Cours Programmation Mobile - Module 4: Flutter

Utiliser un package dans votre code

// Import du package // Exemple avec provider
import 'package:provider/[Link]'; void main() {
import 'package:http/[Link]' as http; runApp(
ChangeNotifierProvider(
// Exemple avec http create: (context) => MonModele(),
Future<void> fetchData() async { child: MyApp(),
final response = await [Link]( ),
[Link]('[Link] );
headers: {'Authorization': 'Bearer token'}, }
);
// Accès au modèle dans un widget
Widget build(BuildContext context) {
if ([Link] == 200) {
final modele = [Link]<MonModele>(context);
print('Données: ${[Link]}');
} else { return Text(
print('Erreur: ${[Link]}'); 'Valeur: ${[Link]}',
} style: TextStyle(fontSize: 24),
} );
}

2025 Master 2 Réseaux Informatiques et Multimédia 68

Cours Programmation Mobile - Module 4: Flutter

Ressources complémentaires
Documentation officielle Flutter
Cookbook Flutter
Dart documentation
Flutter packages

2025 Master 2 Réseaux Informatiques et Multimédia 69