I Flutter Essentials Summary

Dr. Mohammed BOUSMAH - Teacher’s Notes Integration

Ç Définitions Fondamentales
Flutter : Architecture & But

— Flutter : Google SDK for building cross-platform apps (Android, iOS, Windows, MacOS, Linux . . .) based
on DART and Widgets.
— Est un SDK développé par Google pour développer des applications multi-plateformes.
— Basé en langage DART et Widgets.

Widget : Le Composant de Base

— Widget : DART class which returns a graphical element (GUI).

— Est une classe DART qui retourne un élément graphique (GUI).
— Se compose de : Σ clé et Σ valeurs.
— Qui peuvent être : Simple ou Widget (un widget dans un widget).

ó Structure d’une Application Flutter

La Formule Globale
Flutter App = Σ Widgets + Σ Resources + Σ Config files

Structure des Widgets (Key :Value)

// Schema de principe
Widget (
key1 : value1 ,
key2 : value2 ,
...
)

Détails de la Structure
— Σ Widgets : Ensemble de widgets.
— Stateless Widget : Statique.
— Stateful Widget : Dynamique.
— Σ Resources : Ensemble de ressources (se trouvent dans le dossier Assets).
— Σ Config files : Ensemble de fichiers de configuration (comme [Link]).

Documentation & Packages

— [Link] : The official package repository for DART and Flutter.

— C’est le package repository officiel pour DART et Flutter.

1
Ç Étapes de lancement de Flutter

1 Flutter doctor
Allez au Terminal → cd .../.../...<path vers dossier contenant projets> →

flutter doctor

2 Command "code ."

Tapez: code . → Lancer Visual Studio Code

3 Flutter create (nouveau lib)

Allez au Terminal de l’IDE

↓
flutter create <nom_projet> –org com....<votre_nom>

4 Flutter run (exécution)

cd .../.../...<path vers dossier contenant projets>/ <nom_projet> –org com....<votre_nom>

↓
flutter run

StatelessWidget vs StatefulWidget
□ 1. StatelessWidget (Statique)
Définition & Usage

— Immuable : Son apparence ne change jamais une fois construit.

— Performance : Très léger car il ne gère pas d’état interne.
— Usage : Idéal pour les icônes, les labels de texte ou les boutons simples.

2
 Exemple complet : MyApp (Stateless)

import ’ package : flutter / material . dart ’;

// Point d ’ entree : execute l ’ application

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

class MySimpleApp extends StatelessWidget {

@override
Widget build ( BuildContext context ) {
return MaterialApp (
debugShowCheckedModeBanner : false ,
home : Scaffold (
appBar : AppBar ( title : Text ( ’ App Statique ’) ) ,
body : Center ( child : Text ( ’ Salam Flutter ! ’) ) ,
),
);
}
}

Analyse Détaillée : StatelessWidget

— runApp() : La fonction qui "gonfle" le widget racine et l’affiche à l’écran.

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

— MaterialApp : Le widget coeur qui configure le design "Material", incluant

debugShowCheckedModeBanner pour cacher la bannière "Debug".

return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(...)
);

— home : L’attribut qui définit la page principale (écran par défaut) de l’application.
— Scaffold : Fournit la structure visuelle standard.
— appBar : Définit une barre de titre en haut via le widget AppBar.
— body : Contient le contenu principal de l’écran (ici un Center avec du Text).

home: Scaffold(
appBar: AppBar(title: Text(’App Statique’)),
body: Center(child: Text(’Salam Flutter!’)),
)

3
L 2. StatefulWidget (Dynamique)
Définition & État
— Mutable : Peut se redessiner plusieurs fois durant son cycle de vie.
— State : Gère des données qui changent (ex : un compteur, une saisie utilisateur).
— Usage : Formulaires, listes dynamiques, boutons d’action.

Exemple complet : Compteur (Stateful)

import ’ package : flutter / material . dart ’;

class MyApp2 extends StatefulWidget {

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

class _MyApp2State extends State < MyApp2 > {

int _i = 0; // Donnee qui va changer ( Etat )

@override
Widget build ( BuildContext context ) {
return MaterialApp (
debugShowCheckedModeBanner : false ,
home : Scaffold (
appBar : AppBar ( title : Text ( ’ TP Compteur ’) ) ,
body : Center (
child : Text ( ’ Valeur : $_i ’ , style : TextStyle ( fontSize :
33) ) ,
),
floatingActionButton : FloatingActionButton (
child : Icon ( Icons . add ) ,
onPressed : () {
setState (() { _i ++; }) ; // Dit a Flutter de
redessiner l ’ UI
},
),
),
);
}
}

4
Analyse Détaillée : StatefulWidget

— Etat (_i) : Une variable privée qui stocke la donnée dynamique.

— setState() : LA MÉTHODE LA PLUS IMPORTANTE. Elle notifie Flutter que l’état a changé, ce
qui force le widget à ré-exécuter sa méthode build().

onPressed: () {
setState(() { _i++; });
}

— Scaffold Components :
— appBar : Utilise AppBar(title: ...) pour l’entête.
— body : Utilise Center pour aligner le texte au milieu.
— floatingActionButton : Spécifie un bouton flottant circulaire (‘FloatingActionButton‘).

home: Scaffold(
appBar: AppBar(title: Text(’TP Compteur’)),
body: Center(child: Text(’Valeur : $_i’, ...)),
floatingActionButton: FloatingActionButton(...)
)

5
ß Focus : Le Widget Scaffold
Focus : Scaffold (Définition)

— Scaffold : Squelette de page (Layout) respectant le Material Design.

— Rôle : Fournit l’API pour organiser les zones (appBar, body, fab, drawer, etc.).
— Structure : Gère automatiquement le positionnement des widgets majeurs.

SCAFFOLD (Skeleton)

Usage : Barre d’outils en haut de l’écran.

Attributs clés :
— title : Texte ou widget principal de la barre.
appBar
— centerTitle : Booléen pour centrer le titre.
— elevation : Intensité de l’ombre sous la barre.
— actions : Liste de widgets (icônes cliquables).

Usage : Support du contenu principal.

Attributs clés :
body — child : Le widget unique à afficher (ex : Center,
Column).
— Note : Occupe tout l’espace entre l’AppBar et le bas.

Usage : Menu latéral coulissant (gauche).

Attributs clés :
drawer — child : Contenu du menu (souvent une ListView).
— elevation : Ombre du panneau de menu.

Usage : Bouton d’action flottant (primaire).

Attributs clés :
floatingAction — onPressed : Fonction déclenchée au clic.
Button — tooltip : Texte affiché au survol/appui long.
— backgroundColor : Couleur de fond du bouton.

6
 Implémentation de Référence : Scaffold & Attributs

import ’ package : flutter / material . dart ’;

class DetailedScaffoldExample extends StatelessWidget {

@override
Widget build ( BuildContext context ) {
return Scaffold (
// 1. Barre de titre ( AppBar )
appBar : AppBar (
title : Text ( ’ Ma Super App ’) , // Titre affiche ( title )
centerTitle : true , // Centre le titre (
centerTitle )
elevation : 10.0 , // Intensite de l ’ ombre (
elevation )
actions : [ // Liste d ’ actions ( actions )
IconButton ( icon : Icon ( Icons . search ) , onPressed : () {}) ,
],
),

// 2. Menu lateral ( Drawer )

drawer : Drawer ( // Menu escamotable ( drawer )
elevation : 16.0 , // Ombre du menu ( elevation )
child : ListView ( // Liste d ’ elements ( child )
children : [ Text ( ’ Parametres ’) ] ,
),
),

// 3. Contenu principal ( Body )

body : Center ( // Centre le contenu ( child )
child : Text ( ’ Zone de contenu body ’) ,
),

// 4. Bouton flottant ( FAB )

floatingActionButton : FloatingActionButton (
backgroundColor : Colors . blue , // Couleur de fond (
backgroundColor )
onPressed : () {} , // Action au clic ( onPressed
)
tooltip : ’ Ajouter ’ , // Aide textuelle ( tooltip )
child : Icon ( Icons . add ) , // Icone centrale ( child )
),

// Barre de navigation ( Optionnel )

bottomNavigationBar : BottomAppBar (
color : Colors . blue ,
child : Container ( height : 50.0) ,
),
);
}
}

7
L Le Cycle de Vie (Lifecycle)
I 1. Cycle de Vie de l’Application
États de l’App (Teacher Style)

— Resumed : Application visible et au premier plan (Actif).

— Inactive : Transition (ex : appel entrant, multitâche).
— Paused : En arrière-plan, non visible (Sommeil).
— Detached : L’application est détachée du moteur Flutter (Quitté).

RESUMED
(Actif )

INACTIVE
(Interruption)

PAUSED
(Arrière-plan)

DETACHED
(Terminé)

Ô 2. Cycle de Vie d’un Widget (Stateful)

Phases du Widget (Teacher Style)

— Initialisation : createState() puis initState() (une seule fois).

— Construction : build() renvoie l’UI.
— Mise à jour : setState() provoque un nouveau build().
— Destruction : dispose() libère les ressources (fin).

8
createState() Creation de l’etat

initState() Initialisations (1 fois)

build() Affichage de l’UI

setState() Rafraichissement (Boucle)

dispose() Nettoyage / Fin

9
j Layouts : Row vs Column
La Règle d’Or (Axes)

· MainAxis : L’axe principal (Horizontal pour Row, Vertical pour Column).

· CrossAxis : L’axe secondaire (Perpendiculaire au principal).

Main Axis

Contenu A Contenu B
Contenu A
Cross Axis ! ROW " COLUMN Main Axis

Contenu B

Cross Axis

Exemple : Alignement

Row(
mainAxisAlignment: [Link], // Centre horizontalement
crossAxisAlignment: [Link], // Aligne en haut
children: [ Widget1(), Widget2() ]
)

g Container & Box Model

Le Couteau Suisse

Container : Un widget qui combine le ’painting’ (couleur, bordure), positionnement et dimensionnement.

Margin (Extérieur)
Border (Bordure)
Padding (Intérieur)

CONTENT

10
Ô Configuration : [Link]
Le Cœur de la Configuration

— C’est quoi ? Le fichier central de configuration d’un projet Flutter/Dart.

— Rôle : Il définit les métadonnées, les dépendances (packages) et les ressources (assets).
— Format : YAML (Yet Another Markup Language) → Sensible à l’indentation (2 espaces).

Que mettre dedans ?

— Dépendances : Librairies externes (ex : http, google_fonts) venant de [Link].

— Assets : Images, polices de caractères, fichiers JSON.
— Métadonnées : Nom du projet, version, description, environnement SDK.

Exemple Complet : [Link]

name : my_flutter_app # Nom du projet

description : A new Flutter project .
version : 1.0.0+1 # Version du projet

environment :
sdk : " >=2.12.0 ␣ <3.0.0 " # Version de Dart requise

dependencies : # LIBRAIRIES EXTERNES

flutter :
sdk : flutter
cupertino_icons : ^1.0.2 # Icones iOS
http : ^0.13.0 # Ex : Package pour requetes HTTP

dev_dependencies : # Outils de developpement ( tests )

flutter_test :
sdk : flutter

flutter : # CONFIGURATION SPECIFIQUE FLUTTER

uses - material - design : true # Active les icones Material

# 1. Ajout d ’ Images ( Assets )

assets :
- assets / images / # Tout le dossier
- assets / logo . png # Fichier unique

# 2. Ajout de Polices ( Fonts )

fonts :
- family : Schyler
fonts :
- asset : fonts / Schyler - Regular . ttf
- asset : fonts / Schyler - Italic . ttf
style : italic

11
i Structure du Projet & Architecture
L’Arborescence Type (Best Practices)

— lib/ : Contient tout le code Dart (l’intelligence de l’app).

— assets/ : Contient les ressources statiques (images, fonts).
— [Link] : Le chef d’orchestre (configuration).

g my_flutter_app/

g assets/

g images/

J [Link]

g lib/

D [Link] (Entrée)

g screens/

D home_screen.dart (Stateless)

D details_screen.dart (Stateful)

Ô [Link] (Config)

12
Ð Architecture Code Multi-Fichiers
1. lib/[Link] (Point d’Entrée)

import ’ package : flutter / material . dart ’; // 1. Import du SDK Flutter UI

import ’ screens / home_screen . dart ’; // 2. Import de notre ecran d ’ accueil

void main () {
runApp ( MyApp () ) ; // 3. Lancement du widget racine
}

class MyApp extends StatelessWidget {

@override
Widget build ( BuildContext context ) {
return MaterialApp ( // 4. Configuration globale de l ’ app
d e b u g S h o w C h e c k e d M o d e B a n n e r : false , // Cache le bandeau " Debug "
title : ’ Demo Architecture ’ ,
theme : ThemeData ( primarySwatch : Colors . blue ) , // Theme global
// 5. Definit quel widget afficher au demarrage
home : HomeScreen () ,
);
}
}

2. lib/screens/home_screen.dart (Stateless)

import ’ package : flutter / material . dart ’;

import ’ details_screen . dart ’; // Import de l ’ ecran cible pour la navigation

// Widget SIMPLE ( Stateless ) : Pas de variables changeantes ici

class HomeScreen extends StatelessWidget {
@override
Widget build ( BuildContext context ) {
return Scaffold (
appBar : AppBar ( title : Text ( ’ Accueil ( Menu ) ’) ) , // Barre du haut
body : Center (
child : Column (
mainAxisAlignment : MainAxisAlignment . center , // Centrage vertical
children : [
Text ( ’ Bienvenue ! ’ , style : TextStyle ( fontSize : 24) ) ,
SizedBox ( height : 20) , // Espace vide

// Bouton pour naviguer

ElevatedButton (
child : Text ( ’ Aller aux Details ’) ,
onPressed : () {
// NAVIGATION : On " mpile " la nouvelle page
Navigator . push (
context ,
// Creation de la route vers DetailsScreen
MaterialPageRoute ( builder : ( context ) = > DetailsScreen () ) ,
);
},
)
],
),
),
);
}
}

13
 3. lib/screens/details_screen.dart (Stateful)

import ’ package : flutter / material . dart ’;

// Widget DYNAMIQUE ( Stateful ) : Besoin de changer l ’ UI ( compteur )

class DetailsScreen extends StatefulWidget {
@override
_ De t a il s Sc reenState createState () = > _DetailsScreenState () ;
}

class _ De t ai lsScreenState extends State < DetailsScreen > {

int _likes = 0; // variable d ’ ETAT ( qui change )

@override
Widget build ( BuildContext context ) {
return Scaffold (
appBar : AppBar ( title : Text ( ’ Details Interactifs ’) ) ,
body : Center (
child : Column (
mainAxisAlignment : MainAxisAlignment . center ,
children : [
// Affichage d ’ une image depuis les assets
Image . asset ( ’ assets / logo . png ’ , width : 150) ,
SizedBox ( height : 20) ,

// Affichage de la variable dynamique

Text ( ’ J \ ’ aime : $_likes ’ , style : TextStyle ( fontSize : 30 , fontWeight :
FontWeight . bold ) ) ,
SizedBox ( height : 20) ,

Row (
mainAxisAlignment : MainAxisAlignment . center ,
children : [
// Bouton qui modifie l ’ etat
ElevatedButton . icon (
icon : Icon ( Icons . thumb_up ) ,
label : Text ( ’ Liker ’) ,
onPressed : () {
// setState RELANCE le build () pour mettre a jour l ’ ecran
setState (() { _likes ++; }) ;
},
),
SizedBox ( width : 10) ,

// Bouton retour
OutlinedButton (
child : Text ( ’ Retour ’) ,
onPressed : () {
Navigator . pop ( context ) ; // Depile l ’ ecran ( Retour )
},
)
],
)
],
),
),
);
}
}

14