Comment créer une AppBar dans Flutter ?

AppBar est l’un des widgets les plus utilisés dans les applications Flutter. C’est une barre qui se trouve en haut de l’ecran. En fait, elle peut contenir un champ de recherche, un menu, des boutons pour naviguer entre les pages, ou simplement le titre de la page.

AppBar est un widget de barre d’application fixe. Cependant, nous pouvons contrôler sa taille et d’autres fonctionnalités.

Création et affichage de AppBar

En général, nous créons le widget AppBar dans le widget Scaffold. La barre d’applications se place en tant que widget à hauteur fixe en haut de l’écran. Toutefois, il n’y a pas de propriétés obligatoire pour ce widget mais généralement nous utiliserons la propriété title. En fait, cette propriété est utilisée pour décrire le contenu de l’écran actuel.

Généralement, un widget Appbar de base se compose de trois éléments principaux, à savoir leading , title et actions .

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          leading: Icon(Icons.home),
          title: Text('AppBar'),
          actions: <Widget>[
            IconButton(
              icon: Icon(Icons.call, color: Colors.white),
              onPressed: () {},
            ),
            IconButton(
              icon: Icon(Icons.search, color: Colors.white),
              onPressed: () {},
            ),
          ],
          elevation: 20,
          shadowColor: Colors.indigo,
          shape: StadiumBorder(),
        ),
      ),
    );
  }
}

Les propriétés du widget AppBar

leader : contient l’icône qui s’affiche avant le titre.
actions : une liste de widgets à afficher après le titre.
backgroundColor : la couleur d’arrière-plan. Utilisez la valeur transparent pour avoir un arrière-plan transparent.

backgroundColor: Colors.transparent,

Si vous souhaitez modifier la couleur d’arrière-plan de la barre d’applications en une couleur dégradée, utilisez flexibleSpace et BoxDecoration. le code est comme ci-dessous :

        appBar: AppBar(
          title: Text('Une couleur dégradée'),
          flexibleSpace: Container(
            decoration: BoxDecoration(
                gradient: LinearGradient(begin: Alignment.topLeft, end: Alignment.bottomRight, colors: <Color>[
              Colors.green,
              Colors.blue
            ])),
          ),
        ),
      ),
    );
  }
}

Elevation : pour créer une ombre. Par défaut, l’ombre a une valeur de 4, donc si vous souhaitez supprimer l’ombre, remplacez-la par une valeur de 0 avec le code suivant :

elevation: 0,

centerTitle : La fonction de cette propriété est de faire en sorte qu’un titre dans l’AppBar puisse être positionné au milieu, pour l’activer il suffit de lui donner la valeur true.

centerTitle: true,

shadowColor : pour appliquer ou modifier la couleur de l’ombre lorsque la barre est élevée.

La propriété Appbar – Brightness

Par défaut, la couleur des éléments (Texte et Icône) dans AppBar est blanche. Toutefois, si nous avons besoin d’une couleur blanche ou claire comme arrière-plan, les icônes et le texte deviendront moins visibles et même invisibles.

Pour les widgets, bien sûr, on peut changer la couleur comme avec le texte ou autres. Mais qu’en est-il des icônes situées en dehors de la zone de sécurité, telles que l’icône de wifi, de la batterie, l’horloge et autres ?

En fait, nous pouvons utiliser la propriété Brightness. Lorsque vous avez un arrière-plan qui a tendance à être sombre, vous pouvez utiliser, brightness: Brightness.light, ce qui signifie que l’icône en dehors de la zone de sécurité sera claire. Et vice versa, si l’arrière-plan de AppBar a tendance à être lumineux, utilisez, brightness: Brightness.dark.

Si vous avez entendu parler du terme mode nuit, la propriété Brightness peut également être très utile lors du changement de thème. Pour info, Android version 10 (API niveau 29) ou supérieur prend déjà en charge le mode nuit (mode sombre).

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
            brightness: Brightness.light,
            backgroundColor: Colors.yellowAccent,
            title: Text('Brightness',
                style: TextStyle(
                  color: Colors.purple,
                ))),
      ),
    );
  }
}

titleSpacing

Sert à fournir un espacement dans le titre afin qu’il puisse être plus proche du début. Cette propriété ne changera la distance qu’horizontalement. Plus la valeur est élevée, plus le titre s’éloignera de leading.

titleSpacing: 12,

shape

Si nous voulons changer la forme de la barre d’applications, nous pouvons utiliser cette propriété. Dans l’exemple ci dessus, j’ai utilisé stadiumBorder.