Tutoriel Débutant – Créer une AppBar en Flutter
Qu’est-ce qu’une Appbar en Flutter ?
Une AppBar est 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’AppBar est un widget comme tous les autres composants et elle peut être elle-même composée d’autres widgets. Par exemple, l’AppBar peut contenir un bouton d’action permettant à l’utilisateur de se déconnecter.
Note : Dans ce tutoriel, nous allons apprendre à utiliser l'AppBar fournit par Material Design qui est affiché par défaut lorsque l'on créé un projet Flutter.
Scaffold vs AppBar
Avant de commencer la phase de développement, j’aimerais souligner la différence entre les widgets Scaffold et AppBar.
En Flutter, Le Scaffold est le widget qui contient notre application. Comme l’AppBar, ce widget vient de Material Design et est fourni par Flutter.
Scaffold contient différents Widgets comme l’AppBar, le corps de l’application, la bar de navigation (en bas) et un bouton d’action flottant.
Nous ne rentrerons pas plus dans les détails de ce widget dans ce tutoriel sur l’AppBar mais il est intéressant de noter que le Scaffold contient notre AppBar.
Comment créer un AppBar Flutter avec des Actions
C’est le moment de jouer ! 😃
Note : Pour ce tutoriel, vous devrez avoir Flutter installé sur votre ordinateur. Si ce n'est pas le cas, je vous invite à suivre la documentation officielle qui vous explique comment l'installer.
Étape 1. Créer une nouvelle application Flutter
Pour commencer, ouvrons le terminal et créons notre projet avec la commande create comme ci-dessous.
flutter create flutter_appbar_tutorialUne fois que le projet est créé, nous pouvons ouvrir le dossier et ouvrir notre éditeur de texte favori.
cd flutter_appbar_tutorialÉtape 2. Nettoyer le code auto-généré par Flutter
Lorsque nous créons un nouveau projet Flutter, il y a beaucoup de code auto-généré. Je vous recommande de nettoyer tout ça pour ne garder que le nécessaire. Rendez-vous dans le fichier lib/main.dart.
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
// This is the theme of your application.
//
// Try running your application with "flutter run". You'll see the
// application has a blue toolbar. Then, without quitting the app, try
// changing the primarySwatch below to Colors.green and then invoke
// "hot reload" (press "r" in the console where you ran "flutter run",
// or simply save your changes to "hot reload" in a Flutter IDE).
// Notice that the counter didn't reset back to zero; the application
// is not restarted.
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
// This widget is the home page of your application. It is stateful, meaning
// that it has a State object (defined below) that contains fields that affect
// how it looks.
// This class is the configuration for the state. It holds the values (in this
// case the title) provided by the parent (in this case the App widget) and
// used by the build method of the State. Fields in a Widget subclass are
// always marked "final".
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
void _incrementCounter() {
setState(() {
// This call to setState tells the Flutter framework that something has
// changed in this State, which causes it to rerun the build method below
// so that the display can reflect the updated values. If we changed
// _counter without calling setState(), then the build method would not be
// called again, and so nothing would appear to happen.
_counter++;
});
}
@override
Widget build(BuildContext context) {
// This method is rerun every time setState is called, for instance as done
// by the _incrementCounter method above.
//
// The Flutter framework has been optimized to make rerunning build methods
// fast, so that you can just rebuild anything that needs updating rather
// than having to individually change instances of widgets.
return Scaffold(
appBar: AppBar(
// Here we take the value from the MyHomePage object that was created by
// the App.build method, and use it to set our appbar title.
title: Text(widget.title),
),
body: Center(
// Center is a layout widget. It takes a single child and positions it
// in the middle of the parent.
child: Column(
// Column is also a layout widget. It takes a list of children and
// arranges them vertically. By default, it sizes itself to fit its
// children horizontally, and tries to be as tall as its parent.
//
// Invoke "debug painting" (press "p" in the console, choose the
// "Toggle Debug Paint" action from the Flutter Inspector in Android
// Studio, or the "Toggle Debug Paint" command in Visual Studio Code)
// to see the wireframe for each widget.
//
// Column has various properties to control how it sizes itself and
// how it positions its children. Here we use mainAxisAlignment to
// center the children vertically; the main axis here is the vertical
// axis because Columns are vertical (the cross axis would be
// horizontal).
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'You have pushed the button this many times:',
),
Text(
'$_counter',
style: Theme.of(context).textTheme.display1,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: Icon(Icons.add),
), // This trailing comma makes auto-formatting nicer for build methods.
);
}
}En réalisant ce nettoyage, on va :
- Retirer tous les commentaires
- Retirer le bouton du compteur et tout le code associé
- Retirer le paramètre ‘title’ de
MyHomePage
Nous avons maintenant un projet Flutter fonctionnel avec le strict minimum nécessaire pour qu’il soit fonctionnel.
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter AppBar Tutorial',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key}) : super(key: key);
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Flutter AppBar Tutorial"),
),
body: Center(),
);
}
}Avez-vous remarqué la propriété appBar dans le Scaffold ? Par défaut, Flutter génère du code avec une AppBar toute simple.
Pour l’instant, elle n’affiche que du texte. À la fin du tutoriel, nous aurons une AppBar avec des boutons d’action.
Étape 3. Personnaliser l’AppBar
Comme décrit au-dessus, on va modifier le code de l’AppBar existante.
On peut se concentrer sur le code juste en dessous.
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Flutter AppBar Tutorial"),
),
body: Center(),
);
}
}Pour commencer, on va modifier les paramètres principaux de notre AppBar.
Flutter fonctionne avec des widgets et un widget peut en inclure un autre.
Ici, nous allons modifier les paramètres leading, title et actions en leur assignant un/des widget(s) tel que :
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
leading: Text("Leading"),
title: Text("Flutter AppBar Tutorial"),
actions: <Widget>[Text("First action")],
),
body: Center(),
);
}
}L’écriture de la valeur actions est un peu différente, car elle prend en paramètre une liste de widget et pas seulement un widget. Dans le cas présenté ci-dessus, c’est une liste avec une seule valeur, mais on peut en ajouter autant qu’on le souhaite. Nous y reviendrons après.
Étape 4. 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 _MyHomePageState et deux méthodes pour modifier notre variable. Une qui incrémente le compteur et l’autre qui décrémente notre compteur.
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
// Add 1 to the `_counter`
void _incrementCounter() {
setState(() {
_counter++;
});
}
// Remove 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(),
);
}
}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
class _MyHomePageState extends State<MyHomePage> {
// Notre variable compteur
int _counter = 0;
// Ajouter 1 à `_counter`
void _incrementCounter() {
setState(() {
_counter++;
});
}
// Retirer 1 à `_counter`
void _decrementCounter() {
setState(() {
_counter--;
});
}
@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),
),
),
);
}
}Maintenant, on peut se concentrer sur la propriété actions !
Dans notre cas, nous avons besoin de deux boutons pour l’incrémentation et la décrémentation.
On va utiliser le widget IconButton qui nous permet de créer un bouton lié à une action lorsqu’on clique dessus.
IconButton(
icon: Icon(Icons.remove), // L'icône de notre choix
onPressed: _decrementCounter, // La méthode à appeler lorsque l'action est déclenché
),Et voilà le résultat final !
class _MyHomePageState extends State<MyHomePage> {
// Le compteur
int _counter = 0;
// Ajouter 1 à `_counter`
void _incrementCounter() {
setState(() {
_counter++;
});
}
// Retirer 1 à `_counter`
void _decrementCounter() {
setState(() {
_counter--;
});
}
@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>[
// 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(
// Modifier le corps pour afficher le compteur.
child: Text(
'$_counter',
style: TextStyle(fontSize: 50.0),
),
),
);
}
}Retrouvez le projet sur Github
Vous pouvez retrouver l’intégralité du projet sur mon github juste en-dessous.
GitHub: Tutoriel AppBar Flutter
Happy coding !
