How To Easily Customize Flutter Appbar Back Button

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'),
        ),
      ),
    ));
  }
}

You can see that this screen has a Flutter raised button which if gets clicked then will navigate us to the second screen.

Screen 2: Default Flutter Appbar back Button

class Screen2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
    );
  }
}

You can see that the Flutter appbar widget has a default back button. Let’s now give our own customized Flutter appbar back button.

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,
            )),
      )

You can see that we now have our own customized Flutter appbar back button. By default, the Flutter appbar icon them is white so even if you don’t specify white color of the icon, still it will be shown as white.

So this is how you can easily change Flutter appbar back button in your own Flutter apps as well. Don’t hesitate to ask if you still have any questions regarding the customization of Flutter appbar back button. I would love to answer all.

Below is the complete source code of the above implemented Flutter appbar back button.

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.