Flutter – How to change the appBar back button color and icon

CodeWithFlutter
1 Min Read

Flutter changing the appbar back button color is very easy. By default the appbar color is blue and the appbar icons and title color is white.

If you change the appbar color is white or another color, still the color of the appbar icon back button is white color. To change appbar icons color use iconTheme property.

In this tutorial, you will learn how to change the appbar back button color and icon in the flutter.

Flutter AppBar Back Button Color

Consider the second page appbar.

 appBar: AppBar(
          backgroundColor: Colors.white,
          title: Text("Second Page", style: TextStyle(color: Colors.black))),

To change the back button color use iconTheme property. The appbar looks like this,

 appBar: AppBar(
          backgroundColor: Colors.white,
          iconTheme: IconThemeData(color: Colors.black),
          title: Text("Second Page", style: TextStyle(color: Colors.black))),
The appbar backbutton custom color

Flutter change appbar back button icon

To change appbar back button use the leading property. For Example,

 appBar: AppBar(
        leading: IconButton(
          onPressed: () {
            Navigator.pop(context);
          },
          icon: Icon(Icons.home_outlined),
        ),
        title: Text(
          "Second Page",
          style: TextStyle(color: Colors.black),
        ),
      ),

Share this Article
2 Comments