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