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 .