INTRODUCTION
LES FONDAMENTAUX
HIERACHIE
CONCLUSION
Flutter est un framework développé par Google qui
permet de créer des applications mobiles (Android et
iOS), web, et même desktop, avec un seul code source.
Il utilise le langage Dart, qui est simple à comprendre
pour les débutants, avec une syntaxe proche de
JavaScript ou Java.
➢ Développement rapide : Hot Reload (modifications
visibles instantanément).
➢ Interface utilisateur (UI) riche : widgets flexibles et
puissants.
➢ Multi-plateforme : un seul code pour Android, iOS, web,
et desktop.
➢ Open-source : soutenu par une grande communauté.
1️⃣ Le concept de Widget
✓ Tout dans Flutter est un Widget : bouton, texte, image,
etc.
✓ Les widgets décrivent comment l’interface doit
apparaître.
✓ On a deux grandes familles de widgets :
➢ StatelessWidget : ne change jamais (statique).
➢ StatefulWidget : peut changer (par exemple après
un clic).
1️⃣ Le concept de Widget
✓ Tout dans Flutter est un Widget : bouton, texte, image,
etc.
✓ Les widgets décrivent comment l’interface doit
apparaître.
✓ On a deux grandes familles de widgets :
➢ StatelessWidget : ne change jamais (statique).
➢ StatefulWidget : peut changer (par exemple après
un clic).
Exemple :
// Un StatelessWidget simple
class MonTexte extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Text('Bonjour Flutter!');
}
}
2️⃣ La structure de base d’une application Flutter
Une app Flutter est composée d’un main() et d’un
MaterialApp qui gère l’apparence générale.
void main() {
runApp(MonApp());
}
class MonApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('Mon Application')),
body: Center(
child: Text('Hello Flutter!'),
),
),
);
}
}
2️⃣ La structure de base d’une application Flutter
•runApp() : point d’entrée de l’application.
•MaterialApp : définit le style général de l’application
(couleurs, routes).
•Scaffold : structure de l’écran (appbar, body, etc.).
•AppBar : barre en haut de l’écran.
•body : le contenu principal de l’écran.
3️⃣ Hiérarchie et arbre des widgets
Flutter construit un arbre de widgets (Widget Tree).
Chaque widget peut contenir d’autres widgets,
MaterialApp
└── Scaffold
├── AppBar
└── Body (Center)
└── Text
4️⃣ Principes de base du langage Dart
Variables : int, String, bool, double
❖ Fonctions
int addition(int a, int b) {
return a + b;
}
4️⃣ Principes de base du langage Dart
❖ Classes et objets :
class Personne {
String nom;
int age;
Personne(this.nom, this.age);
void afficher() {
print('$nom a $age ans');
}
}
var p = Personne(Ali', 25);
p.afficher(); // Ali a 25 ans
5️⃣ Les concepts importants de Flutter
✅ Hot Reload : mettez à jour votre code et voyez le
résultat sans redémarrer l’application.
✅ Navigation : pour changer d’écran (Page1 vers Page2)
avec Navigator.
✅ Gestion d’état : suivre les changements dans l’app (ex :
compteur). On peut utiliser setState, puis plus tard
Provider, Bloc, etc.
✅ Responsive Design : s’adapte aux différentes tailles
d’écrans.
5️⃣ Les concepts importants de Flutter
Tout est Widget : concentrez-vous sur leur rôle et leur
composition.
Structure de base : main(), MaterialApp, Scaffold,
Widget Tree.
Stateless et StatefulWidget : différence entre statique
et dynamique.
Langage Dart : simple, facile à apprendre, logique.
Hot Reload : idéal pour expérimenter et progresser.
5️⃣ Les concepts importants de Flutter
✅ Comprendre les widgets de base : Text, Column, Row,
Container, Image.
✅ Apprendre à personnaliser le style : couleurs,
marges, bordures.
✅ Jouer avec des petits projets : bouton compteur,
calculatrice simple, todo app.
✅ Ensuite apprendre navigation et gestion d’état.
