Flutter Scaffold

1. title

• Définit le titre de l’AppBar.

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

2. 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...
  ],
)

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

4. backgroundColor

• Définit la couleur de fond de l’AppBar.

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

5. elevation

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

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

6. centerTitle

• Permet de centrer le titre de l’AppBar.

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

7. automaticallyImplyLeading

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

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

8. brightness

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

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

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

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

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

12. Exemple

Code



Résultat



13. Activité

• Créez un nouveau projet Flutter « app_bar_01« 
• Copiez le code suivant dans le fichier main.dart du projet.:

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'exemple',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('exemple'), 
        ),
        ), 
      ), 
    ); 
  } 
}

• Désactivez la petite bannière « DEBUG » utilisée en mode débogage pour indiquer que l’application est en mode débogage.
• Changez le titre de l’application par : « cours Flutter« 
• Changez le titre de l’appBar de exemple en Les attributs du widget Scaffold
• Placez le titre de l’appBar au centre ?
• Changez la couleur de l’arrière plan de l’appBar en « 248, 31, 4, 238« 
• Changez la couleur du texte de l’appBar en « White« 
• Maintenant ajoutez l’icône « menu » a gauche de l’appBar
• Maintenant ajoutez l’icône « search » a droite de l’appBar
• Ajouter l’icône « shopping_cart » a droite de l’appBar
• Ajouter un ombre sous l’AppBar
• Ajoutez le corps du texte « Ceci est la leçon Flutter Scaffold »
• Mettez le texte nouvellement ajouté au centre de l’écran

Exemple:

Résultat avant clic



Résultat après clic



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

• 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