Flutter Scaffold
Flutter Scaffold
-
Objectifs
- Comprendre ce que sont les Scaffolds et ses propriétés et comment ils peuvent donner une belle apparence visuelle aux applications Flutter.
-
Définitions
- 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.
@override
souligne simplement que la fonction est également définie dans une classe ancêtre, mais qu’elle est redéfinie pour faire autre chose dans la classe actuelle.- Il est également utilisé pour annoter l’implémentation d’une méthode abstraite. Il est facultatif à utiliser mais recommandé car il améliore la lisibilité.
Scaffold
est une classe en flutter qui fournit de nombreux widgets ou nous pouvons dire des API comme Drawer, SnackBar, BottomNavigationBar, FloatingActionButton, AppBar, etc.Scaffold
est un widget dans Flutter utilisé pour implémenter la structure de mise en page visuelle de conception matérielle de base.Scaffold
étendra ou 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
vous 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 queDrawer
,SnackBar
,Bottom-Sheet
,FloatingActionButton
,AppBar
etBottomNavigationBar
, etc. -
Les attributs du widget Scaffold
-
Le wigdet de Scaffold :
appBar
- L’
appBar
est un widget qui vient se situer en haut de l’écran et dans lequel le titre se trouve généralement placé. C’est un élément du Scaffold. - C’est la barre horizontale qui s’affiche en haut de l’écran. C’est l’un des principaux composants d’une application. Toutefois, le widget appBar possède ses propres propriétés comme elevation, title, actions, etc.
-
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.
-
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.
- Drawer est un panneau latéral qui se positionne sur le côté de l’écran (et souvent masqué sur les téléphones) à l’aide de la propriété Drawer.
- Une icône appropriée pour Drawer est définie automatiquement dans AppBar.
- Pour ajouter une icône de Drawer, ajoutez simplement :
drawer: Drawer(),
- drawer est un panneau affiché sur le côté gauche de body (si
textDirection = TextDirection.ltr
). - En général, il est masqué sur les appareils mobiles, vous devez donc le faire glisser de gauche à droite pour le faire apparaître
endDrawer
endDrawer
est un panneau affiché sur le côté droit de body (sitextDirection = TextDirection.ltr
). 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.-
Le wigdet de Scaffold :
floatingActionButton
- Le bouton d’action flottant, parfois appelé par son acronyme FAB, a été détaillé précédemment dans les sections Scaffold et AppBar.
- Ce widget peut être considéré comme faisant partie du Scaffold contrairement aux autres boutons qui, eux, s’intègrent dans la propriété body du Scaffold, au sein d’autres widgets le plus souvent.
- Pour d’information consulter la leçon le Widget
floatingActionButton
de flutter -
Application
- Créer un nouveau projet Flutter. Nommez le projet projet_coeur
- Le projet consiste à placer une
appBar
au sein d’unScaffold
et intégrant un bouton “j’aime”. - Réalisation Partie 01
- Supprimer tout le code de lib/main.dart . Remplacer-le par le code ci-dessous.
- Importer la la bibliothèque
material.dart
. - La seconde ligne sera deux version de la fonction
void main()
, l’une des deux versions sera à mettre en commentaire. - La fonction fléchée doit “pointer” vers une fonction nommée
runApp
qui, comme son nom l’indique, sert à spécifier quelle est la classe qui va être exécutée au démarrage de l’application. Ici, c’est la classeMyApp
qui est concernée. - Maintenant il est temps de déclarer votre nouvelle classe, qui indique dans son nom extends StatelessWidget.
- Il s’agit d’une classe dont l’état n’évoluera pas au cours du temps.
- Donner un titre à l’application (title: ‘Projet j\’aime’,)
- Supprimer la bannière de debug dans Flutter
- Donner un thème à l’application (theme) qui comporte, entre autres, la couleur primaire utilisée:
- Le denier élément, le plus important peut-être, à ajouter est la classe contenant le code décrivant l’affichage du premier écran (home). Elle porte le nom MyHomePage et prend en paramètre, entre les parenthèses, le titre qui sera affiché sur l’écran :
Page d\'accueil du projet Flutter
. - Une bannière est présente par défaut lorsque vous lancez votre application pour la tester depuis votre ordinateur.
- Pour enlever cette bannière lors du développement, vous devez ajouter une propriété lors de la déclaration de l’application, avec le widget “
MaterialApp
“. - En définissant la propriété “
debugShowCheckedModeBanner
“ avec la valeur “false
“, la bannière sera masquée. - Réalisation Partie 02
- Pour cette partie coller les lignes de code qui suivent à la fin du fichier main.dart :
- Interprétation du code
- Contrairement à la première classe vue plus haut, ici
MyHomePage
hérite deStatefulWidget
. Elle aura donc un comportement dynamique. - Deux choses sont à noter. D’abord, le titre passé plus haut en paramètre est récupéré et associé à la ligne :
final String title;
- La seconde, la plus importante, est la fonction
createState()
qui renvoie vers la classe_MyHomePageState
. - Réalisation Partie 03
- Cette troisième partie sert à créer le contenu de la classe
_MyHomePageState
- A l’intérieur de la structure basique, Scaffold, une appBar est intégrée. Elle comporte le titre de la page ainsi que le bouton “j’aime“.
- Ajouter une propriété backgroundColor est ajoutée pour afficher la couleur rouge.
- Ajouter un widget
IconButton
. Il est intégré dans un paramètre nommé actions qui attend une liste de widgets. - L’
IconButton
sera vu, peu après, plus en détail. La propriétéonPressed
appelle la méthode _jaime :
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return const MaterialApp(
title: 'Flutter Demo',
debugShowCheckedModeBanner: false,
home: Home(),
);
}
}
class Home extends StatelessWidget {
const Home({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.blueGrey,
appBar: AppBar(
title: const Text("Le wigdet de Scaffold Drawer"),
backgroundColor: Colors.blueAccent),
drawer: Drawer(
child: ListView(
padding: EdgeInsets.zero,
children: [
const DrawerHeader(
child: Text('Entete du Drawer'),
decoration: BoxDecoration(
color: Colors.blue,
),
),
ListTile(
title: const Text('Elément 1'),
onTap: () {
Navigator.pop(context);
},
),
ListTile(
title: const Text('Elément 2'),
onTap: () {
Navigator.pop(context);
},
),
ListTile(
title: const Text('Elément 3'),
onTap: () {
Navigator.pop(context);
},
),
],
),
),
);
}
}
Résultat après clic
......
appBar: AppBar(
title: const Text("Le wigdet de Scaffold Drawer"),
backgroundColor: Colors.blueAccent),
endDrawer: Drawer(
child: ListView(
padding: EdgeInsets.zero,
children: [
const DrawerHeader(
child: Text('Entete du Drawer'),
decoration: BoxDecoration(
color: Colors.blue,
),
),
ListTile(
title: const Text('Elément 1'),
onTap: () {
Navigator.pop(context);
},
),
........
Créer le widget racine de l’application (Widget build(BuildContext context)).
theme: ThemeData(
primarySwatch: Colors.blue,
),
Solution
MaterialApp(
debugShowCheckedModeBanner: false,
)
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}