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.
Outline
- What is Flutter Appbar Back Button?
- Default Flutter Appbar Back Button
- Screen 1: Navigating To The Second Screen
- Screen 2: Default Flutter Appbar back Button
- Change Flutter Appbar Back Button
- Flutter Appbar Back Button Implementation Source Code
- Conclusion
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.
I would highly encourage you to visit my other posts on Flutter widgets, custom Flutter animations, Flutter templates with free source code, Flutter books, Flutter web, Flutter app development and many more.
Listed below are some of the post links for you. Others can be found by the use of search box or by using this site’s menu navigation bar. Thank you for reading this post.
Flutter app articles you might like to read: flutter appbar title center, why learn react native framework, react native jobs, react native elements, unique flutter development. beautiful gradient login UI, Dart Vs JavaScript, flutter login UI form, flutter basics for beginners, explanation of widgets in flutter, flutter architecture, flutter vs native, flutter sliverappbar customization, mobile app marketing tips, flutter bottom navigation bar, flutter appbar actions,
You might also like:
How To Easily Set Flutter Appbar Center Text
How To Easily Change Flutter Appbar Background Color
How To Easily Set Flutter Box Shadow Only Top
How To Easily Change Flutter Container Height
How To Easily Implement Flutter Container Shape Circle
How To Easily Add Flutter Container Background Image
How To Easily Customize Flutter Container Margin
How To Easily Change Flutter Container Padding
Acer Predator Helios 300 PH315 54 760S Gaming Laptop Amazing Specs
How To Easily Change Flutter Text Underline Color
How To Easily Change Flutter Container Color
How To Easily Customize Flutter Box Shadow Offset
How To Easily Change Flutter Container Size
