How to change the color of the back button in a CupertinoNavigationBar in Flutter

Question

I would like to change the color of the back button in my flutter app.

Here is what I have at the moment: Screenshoot

I would like to change the color from light blu to white. I have searched online but found nothing. Here is my code (note my button is create automatically)

@override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      navigationBar: CupertinoNavigationBar(
        heroTag: 'menupage',
        transitionBetweenRoutes: false,
        middle: Text(
          'Menu Page',
          style: kSendButtonTextStyle,
        ),
      ),

Many thanks in advance !

score 11 · Accepted Answer · answered Sep 07 '19 at 07:16

I resolved with setting the CupertinoTextThemeData...

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CupertinoApp(
      theme: CupertinoThemeData(
        primaryColor:
            Colors.white, //change color of the BOTTOM navbar icons when selected
        textTheme: CupertinoTextThemeData(
          primaryColor:
              Colors.white, //change color of the TOP navbar icon

Thanks Lucas for pointing me in the right direction

Lucas Matos · Answer 2 · 2019-09-06T19:00:10.480

1

Example

actionsForegroundColor: Colors.white in CupertinoNavigationBar

Do it

return  CupertinoPageScaffold(
      navigationBar: CupertinoNavigationBar(actionsForegroundColor: Colors.white,
        heroTag: 'menupage',
        transitionBetweenRoutes: false,
        middle: Text(
          'Menu Page',
          style: TextStyle(),
        ),
      ), child: Text(''),
    );

edited Sep 06 '19 at 19:00

answered Sep 06 '19 at 18:47

Lucas Matos

566
3
8

1

thanks but it does not work for me. to clarify: I would like the blue arrow on the top bar to become white – M4trix Dev Sep 06 '19 at 18:53
this is what I read in the documentation: actionsForegroundColor → Color Default color used for text and icons of the leading and trailing widgets in the navigation bar. [...] @Deprecated('Use CupertinoTheme and primaryColor to propagate color'), final – M4trix Dev Sep 06 '19 at 18:55
Put `actionsForegroundColor: Colors.white` in `CupertinoNavigationBar`? This is to leave the white arrow – Lucas Matos Sep 06 '19 at 18:57
I did it but it does not change the color of the arrow. Could the problem be that my navBar is inside a cupertinoTabView and a CupertinoTabScaffold? – M4trix Dev Sep 07 '19 at 06:59
4

this not works for flutter 2.0, not such params in CupertinoNavigationBar – Nicholas Jela Apr 04 '21 at 08:44
Wrap it in a `CupertinoTheme` and set the colors there. – Gábor May 17 '21 at 12:11

How to change the color of the back button in a CupertinoNavigationBar in Flutter

2 Answers2