Développement Mobile
Hybride
Abir MHENNI
Dr. Ing. en Informatique
abirmhenni@[Link]
Filière : 2ème année Master MPSWM
2022-2023
1
Widgets
2
Définitions des
widgets dans
Flutter
• Un widget est tout ce qui
compose l’application que ce
soit un text, une image, un
bouton, l’ensemble d’une page
ou bien les opérations qui
permettent de donner un
résultat.
• Les widgets Flutter sont les
principaux composants d’une
application. Ils donnent
l’apparence en fonction de leur
configuration et de leur état.
3
Les notions
d’arborescence
• Les Widgets sont organisés
sous forme d’arborescence
• Un widget qui contient d’autres
widgets est appelé Widget
parent.
• 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 : 4
• Chaque widgets Flutter peut être soit :
StatefulWidget • sans état
• avec état.
et • Le widget sans état ne sera utilisé qu’une
StatelessWidget seule fois.
dans Flutter • Par contre un widget avec état peut être
utilisé plusieurs fois en fonction du
changement de son état interne.
5
Widgets Flutter sans état
StatelessWidget
• Les widgets sans état sont des widgets qui ne stockent aucun état. C’est-
à-dire qu’ils ne stockent pas les valeurs susceptibles de changer.
• Par exemple:
• Une icône est sans état : l’image de l’icône ne change plus
• Un widget Texte est également sans état.
6
Widgets Flutter sans état
StatelessWidget
• Étapes pour implémenter le widget sans état
• Nous créons un widget sans état en étendant notre classe à partir de
StatelessWidgetet :
7
Widgets Flutter avec état
StatefulWidget
• Le StatefulWidget est un
widget qui a un état qui évolue
avec le temps.
• Sa construction se réalise par
le biais de deux classes.
8
Widgets Flutter avec état
StatefulWidget
• Étapes pour implémenter Stateful Widget
9
Le widget
MaterialApp de
Flutter
10
Qu’est-ce que Material Design
• Le « Material Design » est un « langage de conception » développé par
Google.
• Cette méthodologie de conception a été créée en 2014 et est aujourd’hui
l’une des plus grandes tendances du design .
• Il offre un bon design pour de nombreuses plates-formes différentes,
comme les smartphones, ordinateurs ou montres intelligentes.
11
Le widget MaterialApp
• MaterialApp est l’un des widgets les plus puissants de Futter.
• Pour une application Flutter de base, le premier widget que vous verrez
est MaterialApp
• Le Widget MaterialApp est une classe prédéfinie dans un flutter. C’est
probablement le composant principal ou central du flutter qui permet
l’accès à tous les autres composants et widgets fournis par Flutter SDK.
• MaterialApp est un widget pratique qui intègre divers widgets comme :
• Le widget Texte, le widget Bouton déroulant , le widget AppBar , le widget Scaffold ,
le widget ListView, le widget StatelessWidget ,le widget IconButton , le widget
TextField , le widget Padding , le widget ThemeData , etc.
12
Le widget MaterialApp
• C’est une classe Flutter qui fournit une disposition de conception material
design.
• C’est un composant principal pour d’autres widgets enfants et on l’utilise
généralement comme widget de niveau supérieur.
13
Le widget MaterialApp
• Exemple : import 'package:flutter/[Link]’;
void main() {
runApp(const MyApp()); }
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return const MaterialApp(
home: Center(
child: Text("Le widget MaterialApp dans Flutter"),
), ); } }
• home : Il est utilisé, pour la route par défaut de l’application, c’est-à-dire que le
14
widget qui y est défini s’affiche lorsque l’application démarre normalement.
Le widget MaterialApp
• Avant de créer MaterialApp, il faut importer le package de matériel fourni
par Flutter SDK.
• Ce package nous fournit tous les widgets que nous pouvons utiliser dans
notre application. Par exemple :
• AppBar, Scaffold, BottomNavigationBar, Card, Chip, BottomSheet, etc.
• MaterialApp doit avoir au moins l’une des propriétés home, routes, ... Sans
cela, vous obtiendrez une erreur.
15
Flutter Scaffold
• Le Scaffold est la structure de base des applications Android. Il s’agit d’un
ensemble pouvant regrouper plusieurs éléments comme :
• une appBar, un body, un floatingActionButton ou encore une bottomNavigationBar.
• Comme il s’agit d’un élément principal, il sera le premier à être retourné dans le
widget de construction graphique, le build.
16
Flutter Scaffold
• Scaffold occupera tout l’écran de l’appareil. Il occupera l’espace
disponible. Scaffold fournira un cadre pour mettre en œuvre la disposition
de base de la conception matérielle de l’application.
• Scaffold aide à implémenter une structure de mise en page de base pour
la représentation visuelle de l’application.
• La classe Scaffold est un widget extensible qui remplit l’espace disponible
à l’écran. Il fournit une API pour afficher les principaux widgets de
l’application tels que:
• Drawer, AppBar, SnackBar, Bottom-Sheet, FloatingActionButton,
et BottomNavigationBar etc.
17
Attributs du widget Scaffold
• Le widget Scaffold de Flutter offre plusieurs attributs pour définir la
structure générale et le comportement des interfaces utilisateur. Voici
quelques-uns de ses attributs clés
• Le wigdet de Scaffold : appBar
18
Attributs du widget Scaffold
AppBar(
• title : Définit le titre de
title: Text('Mon Application’),
l’AppBar.
actions:
• actions : Permet d’ajouter des [ IconButton(
widgets d’action à droite de
icon: Icon([Link]),
l’AppBar, tels que des icônes onPressed: () { // Action à
ou des boutons. effectuer lorsque l'icône est pressée.
}, ), // Ajoutez d'autres actions... ],)
19
Attributs du widget Scaffold
• leading : Ajoute un widget à AppBar(
gauche de l’AppBar, title: Text('Mon Application’),
leading: IconButton(
généralement utilisé pour ajouter icon: Icon(Icons.arrow_back),
un bouton de retour. onPressed: () { // Action à
effectuer lorsque le bouton est
pressé. }, ), )
20
Attributs du widget Scaffold
• backgroundColor : Définit la • elevation : Contrôle la hauteur de
couleur de fond de l’AppBar. l’ombre sous l’AppBar.
• brightness : Définit le thème de
• centerTitle : Permet de couleur de l’AppBar (clair ou
centrer le titre de l’AppBar. sombre).
21
Attributs du
widget Scaffold
• Le wigdet de Scaffold :
body
• Le widget body est une
propriété très importante de
Scaffold, puisque il affiche les
principaux composants de
l’écran
22
Attributs du widget Scaffold
• Le wigdet de Scaffold : Drawer
• Le Drawer est un menu caché sur la gauche qui glisse horizontalement. Il est surtout utilisé
pour ne pas surcharger l’écran avec divers liens de navigation par exemple, et pour pouvoir
les regrouper dans une zone dédiée et accessible uniquement en cas de besoin.
• Pour y avoir accès, l’appBar est complétée automatiquement par une icône « hamburger »
qui correspond à trois traits horizontaux et parallèles.
• Pour ajouter une icône de Drawer, ajoutez simplement :
drawer: Drawer(),
• drawer est un panneau affiché sur le côté gauche de body avec :
textDirection = [Link]
23
Exemple
import 'package:flutter/[Link]’; drawer: Drawer(
void main() => runApp(const MyApp()); child: ListView(
class MyApp extends StatelessWidget { padding: [Link],
const MyApp({Key? key}) : super(key: key); children: [
@override const DrawerHeader(
Widget build(BuildContext context) { child: Text('Entete du Drawer’),
return const MaterialApp( decoration: BoxDecoration(
title: 'Flutter Demo’, color: [Link], ), ),
debugShowCheckedModeBanner: false, ListTile(
home: Home(), ); } } title: const Text('Elément 1’),
class Home extends StatelessWidget { onTap: () { [Link](context); }, ),
const Home({Key? key}) : super(key: key); ListTile(
@override title: const Text('Elément 2’),
Widget build(BuildContext context) { onTap: () { [Link](context); }, ),
return Scaffold( ListTile(
backgroundColor: [Link], title: const Text('Elément 3’),
appBar: AppBar( onTap: () { [Link](context); }, ),
title: const Text("Wigdet de Scaffold Drawer"), ], ), ), ); } }
24
backgroundColor: [Link]),
Attributs du widget Scaffold
• endDrawer
• endDrawer est un panneau affiché sur
le côté droit de body (si textDirection
= [Link]). En général, il est
masqué sur les appareils mobiles,
vous devez donc faire glisser votre
doigt de droite à gauche pour le faire
apparaître.
25
Exercice :
Personnalisation de l’AppBar
• Étapes :
• Créez un nouveau projet Flutter nommé projet_appbar_personnalisee.
• Personnaliser l’AppBar en répondant aux questions ci-dessous.
• Questions :
• 1-Ajoutez une AppBar au widget Scaffold.
• 2- Utilisez l’attribut title pour définir le titre de l’AppBar comme « Mon Application
».
• 3- Utilisez l’attribut actions pour ajouter une icône de recherche à droite de
l’AppBar.
• 4- Utilisez l’attribut leading de l’AppBar pour ajouter une icône à gauche.
Choisissez une icône de votre choix, par exemple, l’icône de flèche de retour
(Icons.arrow_back).
26
• 5- Changez la couleur de fond de l’AppBar en bleu clair.
Exercice :
Personnalisation de l’AppBar
• 6- Utilisez l’attribut elevation pour donner un effet d’ombre légère à l’AppBar.
• 7- Utilisez l’attribut centerTitle pour centrer le titre de l’AppBar.
• 8- Modifiez l’attribut automaticallyImplyLeading pour empêcher l’ajout
automatique du bouton de retour (« leading »).
• 9- Utilisez l’attribut brightness pour définir la couleur du texte de l’AppBar comme
étant claire.
• 10- Utilisez l’attribut flexibleSpace pour ajouter un dégradé de couleurs en arrière-
plan de l’AppBar.
• 11- Utilisez l’attribut shape pour donner à l’AppBar un contour arrondi avec un
rayon de 15.
27
To be continued …
28