How to Customize the Back Button in AppBar Widget in Flutter

How to Customize the Back Button in AppBar Widget in Flutter

Often we may want to customize the back button which gets added to any page’s app bar automatically.

Changing the Color of the Back Button Icon

The default color of the back button icon, which Flutter adds to any page’s app bar when pushed onto another page is white. If you want to change only the color and not the icon itself, then we can change the color in couple of ways.

1. Using the leading option

The leading option of AppBar accepts a widget as its value. We can pass the BackButton widget as the value and set its color to any desired color.

example:

Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('How to Flutter'),
        backgroundColor: Colors.green,
        leading: BackButton(
          color: Colors.black,
        ),

      ),
    ) ;
  }
2. Using the iconTheme option of AppBar

We can use the iconTheme option of AppBar widget which accepts IconThemeData as its value and sets the color to any desired color.

example:

Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('How to Flutter'),
        backgroundColor: Colors.green,
        iconTheme: IconThemeData(
          color: Colors.redAccent
        ),
      ),
    ) ;
  }

Changing the Back Button Icon in AppBar

We can also change the default back button to any other icon. Though we can use an image or even text also in place of the back button, mostly we may be interested to have an icon.

When we replace the default back button to any other widget, we also needs to implement the default functionality of the back button (popping the page)  by ourselves.

example:

AppBar(
        title: Text('How to Flutter'),
        backgroundColor: Colors.green,
        leading: GestureDetector(
          child: Icon( Icons.arrow_back_ios, color: Colors.black,  ),
          onTap: () {
            Navigator.pop(context);
          } ,
        ) ,
      ),

Instead of using GestureDetector, we can also use any other widget, for example IconButton.

Read more on AppBar in Flutter : AppBar

Leave A Comment

Your email address will not be published. Required fields are marked *