Flutter: How to Change AppBar Back Button Color [Solved]

Today you will learn how to change the flutter app back button color.

The back button will show on the screen when we navigate from one page to another in a flutter app. For changing the back button color you can pick any method that suits your use case. Here you will see five different methods for changing the app bar back button color.

Use IconThemeDate colors property in AppBar

Snippet:

AppBar(
         iconTheme: const IconThemeData(
           color: Colors.yellow,
         ),
        title: const Text('Title'),
),

Explanation:

Flutter AppBar has a property iconTheme which will take IconThemeData as an argument and you just pass your color against the color parameter of the IconThemeData.

Example

Scaffold(
      appBar: AppBar(
        
        iconTheme: const IconThemeData(
          color: Colors.yellow,
        ),

        title: const Text('Second Screen'),
      ),
      body: const Center(
        child: Text('Second'),
      ),
    );

Use IconButton as a leading widget of AppBar

Snippet:

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

IconButton widget of flutter material package will take icon as the argument and you can pass an Icon widget with your specific color property.

This IconButton will be passed as leading property of AppBar widget.

Example

Scaffold(
      appBar: AppBar(
     
        leading: IconButton(
          icon: const Icon(Icons.arrow_back, color: Colors.black),
          onPressed: () => Navigator.of(context).pop(),
        ),

        title: const Text('Second Screen'),
      ),
      body: const Center(
        child: Text('Second'),
      ),
    );

Use Material Design BackButton as leading Widget in AppBar

Snippet

 leading: const BackButton(color: Colors.black),

Flutter material library has a BackButton widget. Which you can use as leading argument of the AppBar.

BackButton widget has color property. User this property to change the color of the flutter AppBar Back Button.

Example

Scaffold(
      appBar: AppBar(
        
         leading: const BackButton(color: Colors.black),

        title: const Text('Second Screen'),
      ),
      body: const Center(
        child: Text('Second'),
      ),
    );

Use IconThemeData for SliverAppBar

Snippet

SliverAppBar(
            iconTheme: IconThemeData(
              color: Colors.black,
            ),
            title: Text('title'),
            floating: true,
            flexibleSpace: Placeholder(),
            expandedHeight: 200,
          ),

For SliverAppBar widget place IconThemeData inside the iconTheme property of the SliverAppBar.

Example

Scaffold(
      body: CustomScrollView(
        slivers: [
          const SliverAppBar(
           
            iconTheme: IconThemeData(
              color: Colors.black,
            ),
            title: Text('title'),
            floating: true,
            flexibleSpace: Placeholder(),
            expandedHeight: 200,
          ),
          SliverList(
            delegate: SliverChildBuilderDelegate(
              (context, index) => ListTile(title: Text('Item #$index')),
              childCount: 1000,
            ),
          ),
        ],
      ),
    );

Use ThemeData in MaterialApp

Snippet

ThemeData(
              appBarTheme: const AppBarTheme(
                  iconTheme: IconThemeData(color: Colors.black))),

This method will change the AppBar back button color for the entire app. In this method, we will place the configurations inside the ThemeData.

IconThemeData has a color property that you pass inside the AppBarTheme which we pass back to the ThemeData.

Example

MaterialApp(
      title: 'Learn Flutter Tutorial',
      theme:
          ThemeData(
              appBarTheme: const AppBarTheme(
                  iconTheme: IconThemeData(color: Colors.black))),
     

      home: const BackButtonPage(),
    );