Les Bases de Flutter

Prof. Chaker El Amrani

Plan
1. Premier test d’un programme Flutter
2. Environnement de test sur le téléphone mobile
3. Exemple de base
4. Architecture d’une application Flutter
5. Les catégories de Widgets en Flutter
6. Pratiques

Prof. C. El Amrani - 2024 2

Premier test d’un programme Flutter
- Premier test : Sur VS Code, aller sur : View -> Command
palette -> Flutter: Run Flutter Doctor
- Créer un projet Flutter : Sur VS Code, aller sur : View ->
Command palette -> New Project (donner son nom et l’endroit
de sauvegarde)
- Visualiser le fichier : main.dart
- Démarer un émulateur Android (ou un autre émulateur s’il
est installé auparavant) (cliquer à droite de la barre d’en-bas)
- Exécuter le projet (Run without Debugging)

Prof. C. El Amrani - 2024 3

Environnement de test sur le téléphone mobile
Installer Téléphone mobile Android et le configurer pour le développement
• Permettre les options de développement et le USB debugging du téléphone mobile (Android 9 et
plus: Settings > Developer Options > USB debugging (on)):
https://developer.android.com/studio/debug/dev-options
• Pour Windows uniquement: installer Google USB Driver:
https://developer.android.com/studio/run/win-usb
Deux méthodes pour télécharger le Driver Google USB Driver pour Windows:
- Télécharger à partir du Android SDK Manager (Tools > SDK Manager : Cliquer sur: SDK Tools :
Cocher: Google USB Driver)
- Ou: Télécharger le fichier : Google USB Driver ZIP
• Connecter le téléphone mobile au PC via un câble USB. Autoriser le PC à accéder au téléphone
mobile
• Dans PowerShell, exécuter : flutter devices (vérifier que Flutter reconnait le téléphone mobile)
Prof. C. El Amrani - 2024 4
Environnement de test sur le téléphone mobile
Utiliser le téléphone mobile pour afficher le résultat du projet Flutter vu
précédemment.

Prof. C. El Amrani - 2024 5

Exemple de base
import 'package:flutter/material.dart';
void main() {
runApp(MyApp()); }
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Mon Application Flutter'),
),
body: Center(
child: Text('Bonjour Flutter'), ),
),
);
}
}
//appbar, body, child : sont des propriétés
//Tout ce qui est en gras sont des widgets
Prof. C. El Amrani - 2024 6
Exemple de base
1. Importation des packages : Le code commence par importer le package flutter/material, qui
contient les widgets et les outils nécessaires pour créer des applications Flutter.
2. Fonction main() : La fonction main() est le point d'entrée de l'application Flutter. Elle appelle
runApp() pour démarrer l'application et passe une instance de MyApp à cette fonction.
3. Classe MyApp : MyApp est une classe qui hérite de StatelessWidget. Cette classe représente
toute l'application (root). La méthode build retourne la structure de l'interface utilisateur.
4. MaterialApp et Scaffold : MaterialApp est un widget qui encapsule toute l'application et fournit
des fonctionnalités telles que la gestion de la navigation. Scaffold est un widget qui crée une
structure de base pour les interfaces utilisateur et contient généralement un AppBar et un body
(les deux sont des propriétés de Scaffold).
5. AppBar : AppBar est une barre d'applications qui affiche le titre de l'application.
6. body : body est la zone principale du contenu de l'application. Dans cet exemple, il contient un
widget Center qui centre son enfant : un widget Text affichant le message "Bonjour Flutter".

Prof. C. El Amrani - 2024 7

Architecture d’une application Flutter
L’architecture d’une application Flutter se compose principalement de :
‒ Widgets
‒ Gestures (Gestes, mouvements)
‒ States (États)
‒ Layers (Couches)

Prof. C. El Amrani - 2024 8

Architecture d’une application Flutter
Widgets : Les widgets sont le composant principal de toute
application flutter. Toute application flutter est elle-même un widget
composé d’une combinaison de widgets.
Dans une application standard, la racine (root) définit la structure de
l’application, suivie d’un widget Material App qui maintient les
différents composants de l’application.
Material App dispose d’un widget Scaffold qui est formé de
composants visibles (widgets) de l’application.
Scaffold a deux propriétés principales: body and appbar.
Le widget Center a une propriété, child, qui fait référence au contenu
réel et qui est créé à l’aide du widget Text.

Prof. C. El Amrani - 2024 9

Architecture d’une application Flutter
Gestures : L’interaction est possible avec les widgets Flutter grâce à un widget
unique appelé GestureDetector. GestureDetector est un widget invisible qui peut
enregistrer les événements de l’utilisateur réalisés avec ses widgets enfants, tels
que les cliques les glissements.

Prof. C. El Amrani - 2024 10

 Architecture d’une application Flutter
Exemple : body: Center(
child: GestureDetector(
void main() { onTap: () {
runApp(Appli1()); print('Clique deteccté');
} },
class Appli1 extends StatelessWidget { onLongPress: () {
@override print('Long clique detecté');
Widget build(BuildContext context) { },
return MaterialApp( child: Container(
home: GestionEcran(), width: 200.0,
); height: 200.0,
} color: Colors.blue,
} child: Center(
class GestionEcran extends StatelessWidget { child: Text(
@override 'Court ou long clique ici',
Widget build(BuildContext context) { style: TextStyle(color: Colors.white),
return Scaffold( ),
appBar: AppBar( ),
title: Text('Exemple GestureDetector'), ),
), ),
),
);
}}
Prof. C. El Amrani - 2024 11
Architecture d’une application Flutter
State : C’est le comportement d’une application à un moment donné. Pour créer l’interface utilisateur (UI) dans
Flutter, on utilise deux types de widgets :
- Stateless widgets : sont des widgets statiques, une fois qu’ils sont initialisés, ils ne changent pas. Ces widgets ne
conservent aucune, n’ont pas d’état à gérer et n’interagissent pas directement avec l’application. Des exemples de ces
widgets: Icons, IconButton, Text.

Exemple :
import 'package:flutter/material.dart';
void main() => runApp(Appli2());
class Appli2 extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container();
}
}

Prof. C. El Amrani - 2024 12

Architecture d’une application Flutter
- Stateful widgets : sont dynamiques, ce qui signifie qu’ils peuvent changer en fonction de la situation. Ceux-ci
sont capables de stocker des données en temps réel, et on peut utiliser ces informations pour mettre à jour
l’interface utilisateur. Des exemples de ces widgets: TextField, Slider
Exemple:
import 'package:flutter/material.dart';
void main() => runApp(Appli3());
class Appli3 extends StatefulWidget {
@override
_Appli3State createState() => _Appli3State();
}
class _Appli3State extends State<Appli3> {
@override
Widget build(BuildContext context) {
return Container();
}
} Prof. C. El Amrani - 2024 13
Architecture d’une application Flutter
Layers : Flutter est conçu comme un système
extensible de couches (Layers). Ces couches sont
construites les unes sur les autres.

Prof. C. El Amrani - 2024 14

Les catégories de Widgets en Flutter
Il existe principalement 14 catégories de widgets flutter. Ils sont séparés principalement
sur la base des fonctionnalités qu’ils fournissent dans une application Flutter
(https://docs.flutter.dev/ui/widgets) :
1. Accessibility: Les widgets qui rendent une application flutter plus facilement accessible.
2. Animation and Motion: Ces widgets ajoutent de l’animation à d’autres widgets.
3. Assets, Images, and Icons: Ces widgets prennent en charge des ressources telles que les
images et les icônes.
4. Async: Ceux-ci fournissent une fonctionnalité asynchrone dans l’application flutter.
5. Basics: Ce sont les widgets qui sont absolument nécessaires pour le développement de
toute application Flutter.
6. Cupertino: Ce sont les widgets conçus pour iOS.
7. Input: Ces widgets fournissent une fonctionnalité de saisie dans une application Flutter.

Prof. C. El Amrani - 2024 15

Les catégories de Widgets en Flutter
8. Interaction Models: Ces widgets servent à gérer les événements tactiles et diriger les
utilisateurs vers les différentes parties de l’application.
9. Layout: Ces widgets permettent de placer les autres widgets à l’écran selon le besoin.
10. Material Components: Ce sont des widgets qui suivent principalement le material design
de Google (pour la création d’interfaces utilisateur cohérentes et esthétiquement
agréables).
11. Painting and effects: Ce sont des widgets qui appliquent des modifications visuelles à
leurs widgets enfants sans modifier leur mise en page ou leur forme.
12. Scrolling: Ces widgets permettent de faire défiler vers un ensemble d’autres widgets qui
ne sont pas défilables par défaut.
13. Styling: Il s’agit du thème, de la réactivité et de la taille de l’application.
14. Text: Ces widgets affichent du texte.

Prof. C. El Amrani - 2024 16

Pratiques
Revenir au premier programme Flutter :
- noter l’architecture de l’application
- trouver les différents widgets
- faire des modifications du contenu, et afficher les résultats

Prof. C. El Amrani - 2024 17