Flutter Scaffold

Sommaire

1- Objectifs
2- Définitions
3- Les attributs du widget Scaffold
3.1.1- Le wigdet de Scaffold : appBar
3.1.2- Le wigdet de Scaffold : body
3.1.3- Le wigdet de Scaffold : Drawer
3.1.4- Le wigdet de Scaffold : floatingActionButton
4- Application
4.1.1- Cours Flutter

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.

Flutter Scaffold

@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 que Drawer, SnackBar, Bottom-Sheet, FloatingActionButton, AppBar et BottomNavigationBar, 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.

Code

Résultat

Flutter 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.

Code

Résultat

Flutter 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.
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

Code

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 avant clic

Résultat après clic

Flutter Scaffold

endDrawer

endDrawer est un panneau affiché sur le côté droit de body (si textDirection = 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.

Code

......
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);
              },
            ),
........

Résultat

Flutter Scaffold

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’un Scaffold 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 classe MyApp 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.

Créer le widget racine de l’application (Widget build(BuildContext context)).

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:

theme: ThemeData(
primarySwatch: Colors.blue,
),

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.

Solution

Flutter Scaffold

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.

MaterialApp(
debugShowCheckedModeBanner: false,
)

Réalisation Partie 02

Pour cette partie coller les lignes de code qui suivent à la fin du fichier main.dart :

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

Interprétation du code

Contrairement à la première classe vue plus haut, ici MyHomePage hérite de StatefulWidget. 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 :

Solution

Les cours

Les cours

Flutter

Flutter Scaffold