Table de Matières:

• Structure d’un Projet Flutter

• Installation de l’émulateur
• Le concept de Widget
• Material App
• Widget Scaffold
• Stateful et stateless widget
• Widget Text, Theme
• Widget Mise en page (Container , Row , Column, Stack….)
• Widget Container
• Widget Row Column
• Desingn Responsive MediaQuery
• Les champs de saisies + checkbox….
• Les Bouttons
• Les Formulaires
• Listes et grille
• Navigation
• Pop up / Scnack Bar
Réaliser par : Mme Benayache S
Structure d’un projet
Flutter

Réaliser par : Mme Benayache S

 Structure d’un Projet Flutter
android – dans ce dossier, nous avons tous les fichiers de projet pour l’application
Android. Vous pouvez apporter des modifications, ajouter les autorisations requises et
le code Android natif.
Le dossier ios – il contient tous les fichiers de projet pour l’application iOS. Vous
pouvez ajouter les autorisations requises et ajouter du code iOS natif.
Le dossier lib – c’est le dossier où toute la magie opère. Vous avez un fichier
[Link] . Tout votre
code Dart est dans ce répertoire. En fait, il sera compilé en code natif (android et iOS).
test – dans ce dossier, vous pouvez écrire des tests pour votre application Flutter .
.gitignore –Il contient tous les noms de fichiers et de dossiers qui n’ont pas besoin
d’être ajoutés à GIT .

[Link] et [Link] – ces fichiers contiennent tous les noms de

packages requis, leurs versions, les dépendances, le nom de votre application, la

version de l’application, les dépendances de votre application, etc.

README – Il s’agit d’un fichier qui contient toutes les informations de base et la
description de l’application.

Réaliser par : Mme Benayache S

Installation de l’émulateur

Réaliser par : Mme Benayache S

 Installation de l’émulateur
•Sur l'écran d'accueil d'Android Studio, sélectionnez More
Actions > Virtual Device Manager (Autres actions >
Gestionnaire d'appareils virtuels).

•Après avoir ouvert un projet, sélectionnez View > Tool

Windows > Device Manager (Afficher > Outils Windows >
Gestionnaire d'appareils) dans la barre de menu principale,
puis cliquez sur Create device (Créer un appareil).

Réaliser par : Mme Benayache S

 Installation de l’émulateur
Un AVD contient un profil matériel, une image système, un espace de stockage, une apparence et d'autres propriétés.

Le profil matériel définit les caractéristiques d'un appareil tel qu'il est expédié de l'usine. Certains profils matériels, tels que
les appareils Pixel, sont préchargés dans le Gestionnaire d'appareils. Vous pouvez définir ou personnaliser ces profils
matériels selon vos besoins.

Sélectionnez un profil matériel,

puis cliquez sur Next (Suivant).

Réaliser par : Mme Benayache S

 Installation de l’émulateur
La fenêtre System Image (Image système) s'affiche.

1.Sélectionnez l'image système pour un niveau d'API particulier, puis cliquez sur Next (Suivant).

Réaliser par : Mme Benayache S

 Installation de l’émulateur
La fenêtre Verify Configuration (Vérifier la configuration) s'affiche.

Modifiez les propriétés de l'AVD si nécessaire, puis cliquez sur Finish (Terminer).

Réaliser par : Mme Benayache S

Le concept de Widget

Réaliser par : Mme Benayache S

 Le concept de Widget
Les widgets Flutter sont les principaux composants d’une application. Ils donnent l’apparence en fonction de
leur configuration et de leur état.
Dans Flutter, tout ce qui apparaît dans l’interface utilisateur s’appelle widget et ils héritent tous de la
classe Widget .

Réaliser par : Mme Benayache S

 Le concept de Widget
Les Widgets sont plus que des éléments structurels tels que des boutons, du texte, des images, des listes
ou des curseurs. Un widget peut afficher quelque chose, aider à définir la conception, aider à la mise en
page, gérer l’interaction avec l’utilisateur, etc.

Réaliser par : Mme Benayache S

 Le concept de Widget
1- Types de widgets :
Les widgets Flutter sont divisés en deux catégories :
- Visible (Sortie et Entrée)
- Invisible (disposition et contrôle)

Réaliser par : Mme Benayache S

 Le concept de Widget
2- Les notions d’arborescence et de context de Widgets dans Flutter
• Les Widgets sont organisés sous forme d’a
rborescence (= tree) .
• Un widget qui contient d’autres widgets est
appelé Widget parent (ou conteneur de
Widgets). Les widgets contenus dans un Widget
parent sont appelés Widgets enfants.
• Si nous considérons l’application de base qui est
automatiquement générée par Flutter, nous
obtenons la
structure arborescente de Widgets suivante (limitée
à la liste des Widgets présents dans le code):

Réaliser par : Mme Benayache S

Material App

Réaliser par : Mme Benayache S

 Le widget MaterialApp

MaterialApp est un widget qui encapsule plusieurs widgets

nécessaires pour la conception d’applications material design .
En fait, le mot material ou matériel, veut dire qu’il s’inspire
d’objets réels.
Material Design est un langage de conception développé par
Google. Ce nouveau concept de conception
a été créée en 2014 et est aujourd’hui l’une des plus grandes
tendances du design.
Réaliser par : Mme Benayache S
 Le widget MaterialApp

Le widget Texte, le widget Bouton déroulant , le widget AppBar , le

widget Scaffold , le widgetListView, le widget StatelessWidget ,le widget
IconButton , le widget TextField , le widget Padding ,le widget
ThemeData , etc. sont les widgets accessibles à l’aide de la classe
MaterialApp .

Réaliser par : Mme Benayache S

 Le widget MaterialApp

Pour utiliser MaterialApp nous devons créer une nouvelle instance dans la méthode runnApp qui est
le root ou la racine de notre application.

Exemple:

import 'package:flutter/[Link]';
void main(){
runApp(
MaterialApp(
title: "Le nom de l'application",
home: Material(color: [Link])
)
);
}

Nous allons créer une page d’accueil et lui donner une couleur.

Réaliser par : Mme Benayache S

 Le widget MaterialApp

Quelques attributs ou propriétés de MaterialApp

title : le nom de l’application qui s’affiche dans la fenêtre d’administration de l’application.
theme : le thème, qui définit la couleur de l’interface utilisateur de l’application.
color : la couleur du thème de l’application, qui est également la couleur de la fenêtre d’administration
de l’application.
home : la page d’accueil est le premier widget à afficher lorsque l’application démarre normalement,
routes : la table de navigation supérieur de l’application, qui permet de naviguer entre les pages.

Remrque:
MaterialApp doit avoir au moins l’une des propriétés home, routes, onGenerateRouteou buildernon nulles.

Sans cela, vous obtiendrez une erreur.

Réaliser par : Mme Benayache S

 Le widget MaterialApp

Avant de créer MaterialApp , nous devons importer le package de matériel

fourni par Flutter SDK.

import 'package:flutter/[Link]';

Ce package nous fournit tous les widgets que nous pouvons utiliser dans notre

application. Par exemple: AppBar , Scaffold , BottomNavigationBar ,

Card , Chip , BottomSheet , etc.

Réaliser par : Mme Benayache S

 Le widget MaterialApp
Comment supprimer la bannière DEBUG ?
Tout ce que vous avez à faire et de définir la propriété debugShowCheckedModeBanner sur false dans le
widget MaterialApp de votre application.

Exemple :

Réaliser par : Mme Benayache S

 Le widget MaterialApp
Quelle est la différence entre Scaffold et MaterialApp dans Flutter ?

MaterialApp Widget est le point de départ de votre application, il indique à Flutter

que vous allez utiliser les composants Material et suivre la conception matérielle

dans votre application.

Widget Scaffold est utilisé sous MaterialApp, il vous offre de nombreuses

fonctionnalités de base, comme AppBar, BottomNavigationBar, Drawer,

FloatingActionButton, etc.

Réaliser par : Mme Benayache S

Le Widget Scaffold

Réaliser par : Mme Benayache S

 Le Widget Scaffold

Scaffold est une classe Flutter très importante qui implémente la structure

de mise en page visuelle material design . Ce widget encapsule de

nombreux widgets comme AppBar , Drawer , BottomNavigationBar ,

FloatingActionButton , SnackBar , etc.

C’est un conteneur de niveau supérieur pour MaterialApp .

Scaffold s’étend pour remplir l’espace disponible, ce qui signifie qu’il

occupe tout l’écran.

Réaliser par : Mme Benayache S

 Le Widget Scaffold

Les attributs du widget Scaffold

Le wigdet de Scaffold : appBar

appBar : Définit la barre d’application située en haut de l’écran.
Le widget AppBar de Flutter offre plusieurs attributs pour personnaliser l’apparence et le
comportement de la barre d’application dans une interface utilisateur.

Réaliser par : Mme Benayache S

 Le Widget Scaffold

Les attributs du widget Scaffold

Le wigdet de Scaffold : appBar
AppBar(
title : Définit le titre de l’AppBar. title: Text('Mon Application'),
)
actions : Permet d’ajouter des widgets d’action à droite de l’AppBar, tels que des icônes ou des boutons.
AppBar(
title: Text('Mon Application'),
actions: [
IconButton(
icon: Icon([Link]),
onPressed: () {
// Action à effectuer lorsque l'icône est
pressée.
},
),
// Ajoutez d'autres actions...
],
) Réaliser par : Mme Benayache S
 Le Widget Scaffold

Les attributs du widget Scaffold

AppBar(
Le wigdet de Scaffold : appBar title: Text('Mon Application’),

centerTitle : Permet de centrer le titre de l’AppBar. backgroundColor: [Link],

elevation: 4.0,
backgroundColor : Définit la couleur de fond de l’AppBar. centerTitle: true,
shape: RoundedRectangleBorder(
borderRadius: [Link](10.0),
elevation : Contrôle la hauteur de l’ombre sous l’AppBar. ),

shape : Définit la forme de l’AppBar, par exemple, un contour leading: IconButton(

arrondi. icon: Icon(Icons.arrow_back),
onPressed: () {
// Action à effectuer lorsque le bouton est
leading : Ajoute un widget à gauche de l’AppBar, généralement pressé.
utilisé pour ajouter un bouton de retour. },
),
) Réaliser par : Mme Benayache S
 Le Widget Scaffold

Les attributs du widget Scaffold

Le wigdet de Scaffold : body
Le widget body permet d’ afficher les principaux composants de l’écran.

Réaliser par : Mme Benayache S

 Le Widget Scaffold
Les attributs du widget Scaffold
Le wigdet de Scaffold : FloatingActionButton()
Le bouton d’action flottant est une icône circulaire qui s’affiche en permanence et on l’utilise généralement
pour une action principale.

Réaliser par : Mme Benayache S

 Le Widget Scaffold
Les attributs du widget Scaffold
Le wigdet de Scaffold : Drawer
Drawer est un panneau latéral qui se positionne sur le côté de l’écran. En fait, nous pouvons afficher les éléments du menu dans
le widget Drawer . Une icône appropriée pour Drawer est définie automatiquement dans AppBar .

Réaliser par : Mme Benayache S

 Le Widget Scaffold
Les attributs du widget Scaffold
Le wigdet de Scaffold : Bottom Navigation Bar

C’est une bande horizontale en bas de l’écran. Elle peut contenir plusieurs
éléments et utiliser du texte, des icônes ou une combinaison des deux.

Réaliser par : Mme Benayache S

Stateful et stateless widget

Réaliser par : Mme Benayache S

 Stateful et stateless widget
Stateless widget :
Les widgets sans état sont des widgets qui ne stockent aucun état. Autrement dit, ils ne stockent pas les valeurs susceptibles
de changer.

Étapes pour implémenter le widget sans état ?

Nous créons un widget sans état en étendant notre classe à partir de StatelessWidgetet
Exemple
1- Créez une classe qui étend ‘ StatelessWidget ‘.
2- Créez une méthode ‘ build() ‘ pour les widgets qui ne changent jamais leurs valeurs pendant l’exécution.
3- La méthode ‘ build() ‘ renvoie le widget. C’est l’endroit où vous construisez votre widget (et potentiellement n’importe
quel sous-arbre de Widgets).

Réaliser par : Mme Benayache S

 Stateful et stateless widget
Stateful widget :
Le deuxième type de widget est appelé un widget avec état. Cela signifie qu’il peut suivre les modifications et mettre à jour
l’interface utilisateur en fonction de ces modifications.
Étapes pour implémenter le widget avec état ?

1- Créez une classe qui étend ‘ StatefulWidget ‘, qui renvoie l’état

dans ‘ createState() ‘

2- Créez une classe ‘ State ‘ pour les widgets qui peuvent changer

leurs valeurs pendant l’exécution.

3- Dans la classe ‘ State ‘, implémentez la méthode ‘ build() ‘.

4- Appelez la fonction ‘ setState() ‘. La fonction ‘ setState() ‘

redessine en fait les widgets.

Réaliser par : Mme Benayache S

Stateful et stateless widget

Réaliser par : Mme Benayache S

 Stateful et stateless widget
Stateful widget :
Exemple :

Réaliser par : Mme Benayache S

Widget Text, Theme

Réaliser par : Mme Benayache S

 Widget Text, Theme
La structure du widget Text
Le widget Text est divisé en deux propriétés, à savoir : String qui est une donnée et sera ensuite affiché à

l’écran, puis la deuxième propriété est un argument sous forme d’objet qui sert à manipuler l’apparence
Text(
comme la couleur, la taille, la position, etc.
String data,
{
Key key,
TextStyle style,
StrutStyle strutStyle,
TextAlign textAlign,
TextDirection textDirection,
Locale locale,
bool softWrap,
TextOverflow overflow,
double textScaleFactor,
int maxLines,
String semanticsLabel,
TextWidthBasis textWidthBasis,
TextHeightBehavior textHeightBehavior
}
);
Réaliser par : Mme Benayache S
 Widget Text, Theme
Le widget Text – TextStyle

Le widget TextStyle sert à manipuler le type de police, la taille, la couleur et autres. Voici comment utiliser
TextStyle. import 'package:flutter/[Link]';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
centerTitle: true,
title: Text('Le widget Text'),
),
body: Center(
child: Text("Un texte centré et en gras",
style:TextStyle(fontWeight: [Link])),
)));
}
}
Réaliser par : Mme Benayache S
 Widget Text, Theme
Le widget Text – TextStyle

Pour modifier la taille du texte: child: Text(

'Un texte de 20 pixels',
style: TextStyle(fontSize: 20),
)

Pour modifier la couleur du texte:

child: Text(
'Un texte bleu',
style: TextStyle(color: [Link]),
)

Réaliser par : Mme Benayache S

 Widget Text, Theme
Le widget FontStyle

Par défaut, le type de police utilisé sur IOS est SF UI Text ou San Francisco et sur Android ,c’est Roboto .
Pour utiliser un autre type de police, nous devons d’abord l’installer. Par exemple, nous installerons la police
DancingScript :

1. Télécharger la police : [Link]

2. Extraire puis enregistrer dans le projet flutter ./assets/fonts.

3. Ouvrez le fichier [Link] et ajoutez le code du chemin de la police sous flutter :

afin qu’il devienne comme ceci :

fonts:
- family:DancingScript
fonts:
- asset: assets/fonts/[Link]

4-on lance la commande : flutter pub get Réaliser par : Mme Benayache S
 Widget Text, Theme
Le widget FontStyle

Pour utiliser la propriété fontFamily dans le widget de texte, nous n’avons qu’à
l’appeler la sur l’argument TextStyle pour ressembler à ceci :

Text(
'Changement de la police du texte',
style: TextStyle(fontSize: 40,fontFamily: 'DancingScript'),)

Réaliser par : Mme Benayache S

 Widget Text, Theme
TextAlign

L’alignement du texte se fait horizontalement à l’intérieur des limites du widget parent. Dans
l’exemple ci dessous, nous utiliserons le widget Container comme parent. Si vous l’enlevez,
vous n’aurez aucun
changement. Les options de TextAlign dans la classe Text de Flutter sont les mêmes que dans
d’autres langages, à savoir :
[Link]
[Link]
[Link]
[Link]
[Link]
[Link]
Réaliser par : Mme Benayache S
 Widget Text, Theme
import 'package:flutter/[Link]';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
centerTitle: true,
title: const Text('Le widget Text'),
),
body: Container(
width: 300.0,
height: 200.0,
color: [Link],
child: Text("texte", textAlign: [Link],
style: TextStyle(fontSize: 40))
)));
}
}
Réaliser par : Mme Benayache S
 Widget Text, Theme
Le widget Theme dans Flutter

Types des widgets de thème dans Flutter

Dans Flutter, le widget Thème est utilisé pour ajouter des thèmes à une application. On peut l’utiliser soit pour

une partie particulière de l’application comme les boutons et la barre de navigation, soit la définir à la racine

de l’application pour l’utiliser dans toute l’application.

Remarque : Le widget « Theme » ne peut être utilisé qu’une seule fois dans une arborescence de widgets. Si vous

souhaitez appliquer le même thème à plusieurs widgets, vous devez envelopper chaque arborescence de widgets

avec le widget Theme et transmettre la même instance ThemeData à chacun.

Réaliser par : Mme Benayache S

 Widget Text, Theme
Le widget Theme dans Flutter

Flutter est livré avec deux thèmes inspirés de Material Design.

Thème clair – Il s’agit du thème bleu clair du thème par défaut.

Thème sombre – Un thème sombre avec le bleu sarcelle comme couleur secondaire ColorScheme, pour

économiser de l’énergie pour une plus grande autonomie de la batterie et réduire la fatigue oculaire dans

les situations de faible luminosité.

Vous pouvez passer au thème sombre en définissant la propriété de thème MaterialApp sur la méthode

[Link]() . Par example,

Réaliser par : Mme Benayache S

 Widget Text, Theme
Le widget Theme dans Flutter

Création d’un thème global personnalisé avec ThemeData

La classe ThemeData contient des valeurs de couleur et de typographie pour un thème de

conception de matériau.

Ajoutez-le au widget MaterialApp, en utilisant sa propriété de thème , et configurez l’une

des propriétés suivantes pour créer votre thème personnalisé global.

Réaliser par : Mme Benayache S

 Widget Text, Theme
Le widget Theme dans Flutter
Création d’un thème global personnalisé avec ThemeData
La classe ThemeData contient des valeurs de couleur et de typographie pour un thème de conception de matériau.
Ajoutez-le au widget MaterialApp, en utilisant sa propriété de thème , et configurez l’une des propriétés suivantes pour
créer votre thème personnalisé global.
Voici un exemple de comment créer un thème dans Flutter :
final theme = ThemeData(
Une fois le thème créé, vous pouvez l’appliquer à
primaryColor: [Link],
l’ensemble de votre application en enveloppant votre
accentColor: [Link],
arborescence de widgets dans le Themewidget et en
fontFamily: 'Roboto',
transmettant votre themeobjet en tant que datapropriété.
textTheme: TextTheme(
headline: TextStyle(
MaterialApp(
fontSize: 24.0,
theme: theme,
fontWeight: [Link]
home: MyHomePage(),
),
)
body1: TextStyle(
fontSize: 16.0,
fontWeight: [Link]
),
),
Réaliser par : Mme Benayache S
 Widget Text, Theme
Le widget Theme dans Flutter

Pour utiliser un thème dans Flutter, suivez les étapes suivantes:

1- Créez un objet ThemeData avec les paramètres souhaités, définissez les données de thème dans

un objet ThemeData, qui contient les propriétés visuelles de votre thème, telles que la couleur et la

typographie.

2- Enveloppez l’arborescence de widgets avec un Themewidget, en passant l’objet ThemeData

comme data argument.

3- Accédez aux données du thème à l’aide de [Link](context).

Réaliser par : Mme Benayache S

 Widget Text, Theme
Le widget Theme dans Flutter

Exemple :

• Créez une nouvelle application Flutter avec un thème sombre en utilisant ThemeData.

• Modifiez la couleur de fond de l’application en utilisant les propriétés de couleur dans ThemeData.

• Ajoutez une police personnalisée à l’application en utilisant la propriété textTheme dans ThemeData.

• Modifiez les couleurs des boutons en utilisant les propriétés buttonTheme et buttonColor dans ThemeData.

• Créez plusieurs thèmes différents pour l’application en utilisant des instances de ThemeData distinctes et en les

switchant selon les préférences de l’utilisateur.

Réaliser par : Mme Benayache S

 Widget Text, Theme
Le widget Theme dans Flutter

class MyApp extends StatelessWidget { headline2: const TextStyle(

@override fontSize: 28.0,
Widget build(BuildContext context) { fontWeight: [Link],
return MaterialApp( color: [Link](255, 126, 26, 109),
theme: ThemeData( ),
// Définit la luminosité et les couleurs par
défaut. bodyText1: TextStyle(
brightness: [Link], fontSize: 16.0,
primaryColor: [Link], color: [Link][800],
// Définit la famille de polices par défaut. fontWeight: [Link],
fontFamily: 'Montserrat’, ),

textTheme: TextTheme( bodyText2: TextStyle(

headline1: TextStyle( fontSize: 14.0,
fontSize: 36.0, color: [Link][600],
fontWeight: [Link], fontWeight: [Link],
- color: [Link][900], ),
), ),

Réaliser par : Mme Benayache S

 Widget Text, Theme
Le widget Theme dans Flutter

buttonTheme: ButtonThemeData(
textTheme: [Link],
buttonColor: [Link][900],
shape: RoundedRectangleBorder(
borderRadius: [Link](10.0), visualDensity:
), [Link],
), ),
appBarTheme: AppBarTheme( home: HomePage(),
color: [Link][50], );
textTheme: TextTheme( }
headline6: TextStyle( }
fontSize: 20.0,
fontWeight: [Link],
color: [Link][900],
),
),
),

Réaliser par : Mme Benayache S

 Widget Text, Theme
Le widget Theme dans Flutter Padding(
padding: [Link](10),
class HomePage extends StatelessWidget {
child: Text(
@override
'Bienvenue dans mon application
Widget build(BuildContext context) {
personnalisée!',
return Scaffold(
style: [Link](context).textTheme.headline2,
appBar: AppBar(
),
title: Text('Mon thème personnalisé'),
),
),
Padding(
body: Center(
padding: [Link](10),
child: Column(
child: Text(
mainAxisAlignment: [Link],
'Bienvenue dans mon application
children: [
personnalisée!',
Padding(
style: [Link](context).textTheme.bodyText1,
padding: [Link](10),
),
child: Text(
),
'Bienvenue dans mon application personnalisée!',
Padding(
style: [Link](context).textTheme.headline1,
padding: [Link](10),
),
child: Text(
),
'Bienvenue dans mon application
personnalisée!',
style: [Link](context).textTheme.bodyText2,
Réaliser par : Mme Benayache S