Comment masquer la flèche de retour dans la barre d’application Flutter et utiliser le bouton de fermeture?

Difficulté: Débutant

Ce code simple supprime la flèche “arrière” (côté gauche de l’AppBar) et définit un bouton “fermer” (côté droit de l’AppBar)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
class OnePage extends StatefulWidget {
  @override
  _OnePageState createState() => new _OnePageState();
}

class _OnePageState extends State<OnePage> {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('Page Title'),
        actions: <Widget>[
           new IconButton(
             icon: new Icon(Icons.close),
            onPressed: () => Navigator.of(context).pop(null),
           ),
         ],
        leading: new Container(),
      ),
      body: new Container(),
    );
  }
}

Explications

Ligne #18:

Cette ligne est l’astuce pour cacher la flèche “arrière”. En fait, nous remplaçons le contenu par défaut de “leading” (ce qui est à gauche du titre) par un conteneur vide.

Lignes #12-17:

Nous créons un IconButton, avec comme icône le “X” (fermer).

onPressed(): lorsque l’utilisateur clique sur cette icône, nous “pop” (supprimer) la page en cours.