How to hide the back arrow in the Flutter application bar and use the close button?

Difficulty: Beginner

This simple code removes the “back” arrow (left side of the AppBar) and sets a “close” button (right side of the 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(),
    );
  }
}

Explanation

Line #18:

This line makes the trick to hide the “back” arrow. In fact, we override the default content of “leading” (what is at the left side of the title) by an empty container.

Lines #12-17:

We create an IconButton, with as an icon the “X” (close).

onPressed(): when the user clicks this icon, we “pop” (remove) the current page.