How to Change Back Button Icon in Flutter

In this example, we are going to show you how to change the back button which appears on AppBar while you navigate to a new page in Flutter. You can also disable the back button. Here, you will learn to replace the default back button with the new icon.

AppBar(
  leading: IconButton(
      onPressed: (){
        Navigator.pop(context);
      },
      icon:Icon(Icons.arrow_back_ios), 
      //replace with our own icon data.
  )
)

On the new page, pass the leading with an icon button like above. Don't forget to replace the icon with you own icon.

See this also: How to Use Font Awesome Icons in Flutter App

AppBar(
    automaticallyImplyLeading: false,
)

import 'package:flutter/material.dart';

void main(){
  runApp(MyApp());
}

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Home(),
    );
  }
}

class Home extends StatefulWidget{
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> { 
  @override
  Widget build(BuildContext context) { 
    return  Scaffold(
          appBar: AppBar(
            title: Text("Change Back Button"),
            backgroundColor: Colors.orangeAccent
          ),
          body: Container(
            padding: EdgeInsets.only(top:20, left:20, right:20),
            alignment: Alignment.topCenter,
            child: Column(
              children: [
                ElevatedButton(
                  onPressed: (){
                     Navigator.push(context, MaterialPageRoute(builder: (BuildContext context){
                        return NewPage();
                     }));
                  }, 
                  child: Text("Go to Next Page")
                ),
                
            ],)
          )
       );
  }
}

class NewPage extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
     return Scaffold(
         appBar: AppBar(
            title: Text("Next Page"),
            leading: IconButton(
               onPressed: (){
                 Navigator.pop(context);
               },
               icon:Icon(Icons.arrow_back_ios), 
               //replace with our own icon data.
            )
          ),
         body: Container(
           
         ),
     );
  }
}