Flutter appBar
Flutter appBar
-
Objectifs
- Comprendre ce que sont les appBar et ses propriétés et comment ils peuvent donner une belle apparence visuelle aux applications Flutter.
-
Présentations
- L’
AppBarest l’un des widgets clés pour la création d’une interface utilisateur dans une application Flutter. - Elle est principalement utilisée pour afficher un en-tête en haut de l’écran, généralement pour indiquer le nom de la page, des actions ou des icônes de navigation.
- Dans ce cours, nous allons examiner les définitions, les propriétés, les exemples, les exercices et les applications courantes de l’AppBar dans Flutter.
-
Définitions
- L’
AppBarest un widget de barre d’application dans Flutter qui représente la partie supérieure de l’interface utilisateur de l’application. Elle peut contenir un titre, des actions, un menu de navigation, ou d’autres widgets personnalisés. - Une
AppBarest une barre d’outils placée en haut d’une application pour smartphone. C’est un élément essentiel que l’on peut retrouver sur la majorité des applications mobiles. - Elle est souvent composée du nom de l’application et de boutons d’action.
- En Flutter, l’
AppBarest un widget comme tous les autres composants et elle peut être elle-même composée d’autres widgets. Par exemple, l’AppBarpeut contenir un bouton d’action permettant à l’utilisateur de se déconnecter. -
Propriétés principales de l’AppBar :
title: Le texte ou le widget à afficher comme titre de l’AppBar.actions: Une liste de widgets à afficher du côté droit de l’AppBar, généralement utilisée pour les actions ou les icônes de navigation.backgroundColor: La couleur de fond de l’AppBar.elevation: L’élévation de l’AppBar par rapport au reste de l’écran.brightness: La luminosité de la barre, généralement utilisée pour définir la couleur du texte.iconTheme: Les paramètres de style pour les icônes de l’AppBar.centerTitle: Un booléen pour centrer le titre de l’AppBar.automaticallyImplyLeading: Un booléen pour afficher automatiquement un bouton de retour en arrière si l’AppBar est la première sur l’écran.leading: Un widget à afficher à gauche de l’AppBar, généralement utilisé pour le bouton de retour en arrière.flexibleSpace: Un widget flexible à afficher derrière l’AppBar.-
Exemple d’utilisation de l’AppBar
-
Créer des actions dans l’AppBar Flutter
- Notre but dans cette étape est de recréer le bouton d’incrémentation qui était présent dans le code auto-généré.
- Création de la partie logique du compteur
- Pour notre compteur, nous devons créer une variable dans
_MyHomePageStateet deux méthodes pour modifier notre variable. Une qui incrémente le compteur et l’autre qui décrémente notre compteur. - Design de notre AppBar Flutter
- Maintenant que la partie logique est prête, nous allons nous concentrer sur le design de notre application.
- Avant d’ajouter nos actions, on peut :
- Choisir une icône
- Modifier le titre
- Modifier le corps pour afficher la valeur du compteur
- Ajouter deux boutons pour l’incrémentation et la décrémentation.
-
Exercices d’application
-
Exercice01
- Créez une nouvelle application Flutter avec une AppBar contenant un titre et un bouton de retour en arrière.
- Ajoutez une action à l’AppBar qui affiche une boîte de dialogue lorsque l’utilisateur appuie dessus.
- Modifiez la couleur de fond de l’AppBar pour correspondre au thème de votre choix.
-
Exercice02
- Énoncé de l’exercice
- Créez une nouvelle application Flutter avec les spécifications suivantes :
- L’application doit contenir une AppBar avec un titre au choix.
- Ajoutez deux actions à l’AppBar :
- Action 1 : Une icône d’engrenage (icone Settings) qui, lorsqu’elle est cliquée, affiche une boîte de dialogue de paramètres.
- Action 2 : Une icône de recherche (icone Search) qui, lorsqu’elle est cliquée, affiche une boîte de dialogue de recherche.
- Personnalisez la couleur de fond de l’AppBar pour correspondre à un thème de couleur de votre choix.
- Lorsque l’utilisateur clique sur l’icône d’engrenage, affichez une boîte de dialogue avec le texte « Paramètres ». Lorsqu’il clique sur l’icône de recherche, affichez une boîte de dialogue avec le texte « Recherche ».
- Assurez-vous que l’application est bien structurée et que le code est propre et lisible.
- Astuces
- Utilisez le widget AppBar pour créer l’AppBar.
- Utilisez le widget IconButton pour créer des icônes d’action.
- Utilisez le widget AlertDialog pour créer des boîtes de dialogue.
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Mon Application Flutter'),
actions: [
IconButton(
icon: Icon(Icons.search),
onPressed: () {
// Action de recherche
},
),
IconButton(
icon: Icon(Icons.settings),
onPressed: () {
// Action des paramètres
},
),
],
),
body: Center(
child: Text('Contenu de l\'application'),
),
),
);
}
}
class _MyHomePageState extends State {
int _counter = 0;
// Ajouter 1 to the `_counter`
void _incrementCounter() {
setState(() {
_counter++;
});
}
// Supprimer 1 to the `_counter`
void _decrementCounter() {
setState(() {
_counter--;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
leading: Text("Leading"),
title: Text("Flutter AppBar Tutorial"),
actions: <Widget>[Text("First action")],
),
body: Center(),
);
}
}
class _MyHomePageState extends State {
// ................
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
// Mettre une icône dans le `leading`
leading: Icon(Icons.accessibility),
// Changer le nom de l'app
title: Text("Flutter Calculator"),
actions: <Widget>[Text("First action")]),
body: Center(
// Modifier le corps pour afficher le compteur.
child: Text(
'$_counter',
style: TextStyle(fontSize: 50.0),
),
),
);
}
}
class _MyHomePageState extends State {
// ................
actions: <Widget>[
// Premier bouton - decrémente
IconButton(
icon: Icon(Icons.remove), // L'icône "-"
onPressed: _decrementCounter, // La méthode `_decrementCounter`
),
// Second bouton - incrémente
IconButton(
icon: Icon(Icons.add), // L'icône "+"
onPressed: _incrementCounter, // La méthode `_incrementCounter`
),
],
),
body: Center(
.........
Sollution
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
theme: ThemeData(
primaryColor: Colors.blue, // Couleur de fond de l'AppBar
),
home: Scaffold(
appBar: AppBar(
title: Text('Mon Application Flutter'), // Titre de l'AppBar
leading: IconButton(
icon: Icon(Icons.arrow_back), // Bouton de retour en arrière
onPressed: () {
// Action du bouton de retour en arrière
showDialog(
context: context,
builder: (BuildContext context) {
return AlertDialog(
title: Text('Bouton de retour en arrière'),
content: Text('Vous avez appuyé sur le bouton de retour en arrière.'),
actions: [
TextButton(
onPressed: () {
Navigator.of(context).pop();
},
child: Text('OK'),
),
],
);
},
);
},
),
actions: [
IconButton(
icon: Icon(Icons.info), // Icône de l'action
onPressed: () {
// Action de l'icône d'information
showDialog(
context: context,
builder: (BuildContext context) {
return AlertDialog(
title: Text('Action d\'information'),
content: Text('Vous avez appuyé sur l\'icône d\'information.'),
actions: [
TextButton(
onPressed: () {
Navigator.of(context).pop();
},
child: Text('OK'),
),
],
);
},
);
},
),
],
),
body: Center(
child: Text('Contenu de l\'application'),
),
),
);
}
}
Sollution
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
primaryColor: Colors.blue, // Couleur de fond de l'AppBar
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Mon Application Flutter'), // Titre de l'AppBar
actions: [
IconButton(
icon: Icon(Icons.settings), // Icône d'engrenage
onPressed: () {
// Action de l'icône d'engrenage
showDialog(
context: context,
builder: (BuildContext context) {
return AlertDialog(
title: Text('Paramètres'),
content: Text('Ceci sont les paramètres de l\'application.'),
actions: [
TextButton(
onPressed: () {
Navigator.of(context).pop();
},
child: Text('Fermer'),
),
],
);
},
);
},
),
IconButton(
icon: Icon(Icons.search), // Icône de recherche
onPressed: () {
// Action de l'icône de recherche
showDialog(
context: context,
builder: (BuildContext context) {
return AlertDialog(
title: Text('Recherche'),
content: Text('Entrez votre terme de recherche.'),
actions: [
TextButton(
onPressed: () {
Navigator.of(context).pop();
},
child: Text('Fermer'),
),
],
);
},
);
},
),
],
),
body: Center(
child: Text('Contenu de l\'application'),
),
);
}
}
