In this Flutter post, we will be changing the Flutter appbar back button by using an easy Flutter example for better understanding. We will be customizing Flutter appbar back button step by step so you can have a clear understanding and can change it in your Flutter apps with ease.
So let’s get right into it.
What is Flutter Appbar Back Button?
Flutter appbar back button is generally used to navigate to the previous screen in Flutter apps. For instance, if we have two screens in our Flutter app and we navigate from the first screen to the second one, then the second screen will automatically show a back icon in its Flutter appbar widget, if the appbar is present in that screen.
I know it looks a bit confusing, but don’t worry, let’s understand it through a proper example. First we will see what the default Flutter appbar back button looks like then we will change it.
Default Flutter Appbar Back Button
In order to see the default back button in Flutter appbar. Follow the below steps:
- Make two Flutter classes. We will be making two Flutter stateless widget classes.
- In the first class, create a button and pass navigation action to that button so when we click on it, it will navigate to the next screen.
- Define a Flutter appbar widget in the second screen.
If it is confusing then see the below code in which these steps are practically implemented.
Screen 1: Navigating To The Second Screen
class Screen1 extends StatelessWidget { @override Widget build(BuildContext context) { return SafeArea( child: Scaffold( body: Center( child: RaisedButton( onPressed: () { Navigator.of(context) .push(MaterialPageRoute(builder: ((context) => Screen2()))); }, color: Colors.blue, textColor: Colors.white, child: Text('Go to second screen'), ), ), )); } }

Screen 2: Default Flutter Appbar back Button
class Screen2 extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(), ); } }

Change Flutter Appbar Back Button
In order to change Flutter appbar back button, we have to use the leading constructor of the Flutter appbar widget. This constructor takes a Flutter widget so we will pass a Flutter icon button widget to it in which we will specify an icon of our choice and in onPressed, we will do the pop navigation, which means that it will go back to the page from where navigation to this page was triggered. You can specify any function you want in the body of onPressed function. See the below code:
appBar: AppBar( leading: IconButton( onPressed: () { Navigator.of(context).pop(); }, icon: Icon( Icons.arrow_back_ios, color: Colors.white, size: 20, )), )

Flutter Appbar Back Button Implementation Source Code
import 'package:flutter/material.dart'; void main() { runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false, home: Screen1(), ); } } class Screen1 extends StatelessWidget { @override Widget build(BuildContext context) { return SafeArea( child: Scaffold( body: Center( child:Button( onPressed: () { Navigator.of(context) .push(MaterialPageRoute(builder: ((context) => Screen2()))); }, color: Colors.blue, textColor: Colors.white, child: Text('Go to second screen'), ), ), )); } } class Screen2 extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( leading: IconButton( onPressed: () { Navigator.of(context).pop(); }, icon: Icon( Icons.arrow_back_ios, size: 20, )), ), ); } }
Conclusion
To conclude, I have implemented everything practically and with step by step explanation of how to customize Flutter appbar back button. I would love to hear your thoughts regarding this post. Thank you for reading this post.