Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to change the appBar back button color

Tags:

flutter

People also ask

How do you change the back button color on Flutter AppBar?

So the right way to change appbar back button color in Flutter is to use iconTheme to change the colors of all the icons present in the appbar.

How can I change the color of my AppBar title?

Step 2: Inside the AppBar widget, find the Text widget inside the title parameter. Step 3: Inside the Text widget, add the style parameter and add the TextStyle widget. Step 4: Inside the TextStyle widget, add the color parameter and assign the appropriate color. Step 5: Run the app.


You have to use the iconTheme property from the AppBar , like this:

appBar: AppBar(
  iconTheme: IconThemeData(
    color: Colors.black, //change your color here
  ),
  title: Text("Sample"),
  centerTitle: true,
),

Or if you want to handle the back button by yourself.

appBar: AppBar(
  leading: IconButton(
    icon: Icon(Icons.arrow_back, color: Colors.black),
    onPressed: () => Navigator.of(context).pop(),
  ), 
  title: Text("Sample"),
  centerTitle: true,
),

Even better, only if you want to change the color of the back button.

appBar: AppBar(
  leading: BackButton(
     color: Colors.black
   ), 
  title: Text("Sample"),
  centerTitle: true,
),

you can also override the default back arrow with a widget of your choice, via 'leading':

leading: new IconButton(
  icon: new Icon(Icons.arrow_back, color: Colors.orange),
  onPressed: () => Navigator.of(context).pop(),
), 

all the AppBar widget does is provide a default 'leading' widget if it's not set.


It seemed to be easier to just create a new button and add color to it, heres how i did it for anyone wondering

Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leading: BackButton(
            color: Colors.black
        ),

You can also set leading icon color globally for the app

MaterialApp(
  theme: ThemeData(
    appBarTheme: AppBarTheme(
      iconTheme: IconThemeData(
        color: Colors.green
      )
    )
  )
)