Flutter Scaffold

• 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.
• appBar : Définit la barre d’application située en haut de l’écran. On y place généralement un widget AppBar.
• Le widget AppBar de Flutter offre plusieurs attributs pour personnaliser l’apparence et le comportement de la barre d’application dans une interface utilisateur.



title : Définit le titre de l’AppBar.

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(Icons.search),
      onPressed: () {
        // Action à effectuer lorsque l'icône est pressée.
      },
    ),
    // Ajoutez d'autres actions...
  ],
)

leading : Ajoute un widget à gauche de l’AppBar, généralement utilisé pour ajouter un bouton de retour.

AppBar(
  title: Text('Mon Application'),
  leading: IconButton(
    icon: Icon(Icons.arrow_back),
    onPressed: () {
      // Action à effectuer lorsque le bouton est pressé.
    },
  ),
)

backgroundColor : Définit la couleur de fond de l’AppBar.

AppBar(
  title: Text('Mon Application'),
  backgroundColor: Colors.blue,
)

elevation : Contrôle la hauteur de l’ombre sous l’AppBar.

AppBar(
  title: Text('Mon Application'),
  elevation: 4.0,
)

centerTitle : Permet de centrer le titre de l’AppBar.

AppBar(
  title: Text('Mon Application'),
  centerTitle: true,
)

automaticallyImplyLeading : Contrôle si le bouton de retour (« leading ») est automatiquement ajouté.

AppBar(
  title: Text('Mon Application'),
  automaticallyImplyLeading: false,
)

brightness : Définit le thème de couleur de l’AppBar (clair ou sombre).

AppBar(
  title: Text('Mon Application'),
  brightness: Brightness.dark,
)

flexibleSpace : Permet d’ajouter un espace flexible au-dessus de l’AppBar.

AppBar(
  title: Text('Mon Application'),
  flexibleSpace: Container(
    decoration: BoxDecoration(
      gradient: LinearGradient(
        colors: [Colors.blue, Colors.green],
        begin: Alignment.topLeft,
        end: Alignment.bottomRight,
      ),
    ),
  ),
)

shape : Définit la forme de l’AppBar, par exemple, un contour arrondi.

AppBar(
  title: Text('Mon Application'),
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(10.0),
  ),
)

automaticImplyLeading

automaticImplyLeading : est une propriété facultative de AppBar et sa valeur par défaut est 0. Si aucun widget n’est placé dans la zone principale, les widgets appropriés peuvent y être automatiquement placés en fonction du contexte.

L’attribut automaticImplyLeading dans Flutter est utilisé pour contrôler l’affichage automatique de l’icône de retour (flèche de retour) dans l’AppBar. Cet attribut détermine si l’icône de retour doit être affichée lorsque la propriété leading de l’AppBar est nulle (absente).

En définissant automaticallyImplyLeading

sur false, vous désactivez l’affichage automatique de l’icône de retour. Cela signifie que si vous utilisez un widget personnalisé (comme MyVolumeButton) pour la propriété leading, il sera affiché à la place de l’icône de retour par défaut.

AppBar(
  title: Text('Mon Application'),
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(10.0),
  ),
)

Code



Résultat

• Le widget body est une propriété très importante de Scaffold, puisque il affiche les principaux composants de l’écran.
Code



Résultat

• 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



• 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

• 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

• Créez un nouveau projet Flutter nommé projet_appbar_personnalisee.
• Dans le fichier lib/main.dart, remplacez le contenu par le code de base d’une application Flutter.
• À l’intérieur de la méthode main, définissez une version de l’AppBar avec le titre « Mon Application ».
• 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).
• 5- Changez la couleur de fond de l’AppBar en bleu clair.
• 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.

Consignes :

• Suivez les étapes pour créer et configurer le projet.
• Répondez aux questions en modifiant le code dans lib/main.dart.
• Assurez-vous que chaque question est traitée dans une étape séparée.
• Vérifiez que les modifications sont visibles lors de l’exécution de l’application.

Consignes :

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

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

Solution

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,
)

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