App Bar back button is base of every mobile application which has multiple activities screens. Using the App Bar back button mobile UI provides simple navigation to their app users to go back to previous screen. By default the back arrow button is fixed in every flutter android iOS application but we can easily change it by using custom Icons or widgets. In today’s tutorial we are replacing the current app bar icon with new icon from Icon library. So in this tutorial we would Flutter Replace Override App Bar Back Button Android iOS Example Tutorial.
Contents in this project Flutter Replace Override App Bar Back Button Android iOS Example Tutorial:
1. Import material.dart package in your app’s main.dart file.
|
1 |
import 'package:flutter/material.dart'; |
2. Create void main runApp() method and here we would call our main First application screen named as FirstScreen().
|
1 2 3 4 5 6 |
void main() { runApp(MaterialApp( title: 'Flutter Navigate to Next Screen', home: FirstScreen(), )); } |
3. Create first app screen class named as FirstScreen extends StatelessWidget. In this class we would simply create a Raised Button from which we would navigate to next screen.
- gotoNextActivity : In this function we would make the Navigator.push() method to navigate to next activity screen by passing next class name which is SecondScreen().
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
class FirstScreen extends StatelessWidget { gotoNextActivity(BuildContext context){ Navigator.push( context, MaterialPageRoute(builder: (context) => SecondScreen()), ); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Home Activity Screen'), ), body: Center( child: RaisedButton( child: Text('Navigate To Second Screen'), color: Colors.green, textColor: Colors.white, onPressed: () { gotoNextActivity(context); }), ), ); } } |
4. Creating next class named as SecondScreen extends StatelessWidget.
|
1 2 3 4 |
class SecondScreen extends StatelessWidget { } |
5. Creating a function named as goBack with context argument. In this function we would make Navigator.pop(context) method to go back to previous activity screen.
|
1 2 3 4 5 |
goBack(BuildContext context){ Navigator.pop(context); } |
6. Creating Widget Build area in your SecondScreen class. Now we would make the AppBar widget replaced icon image.
- automaticallyImplyLeading : Controls whether we would try to implicit leading widget to null.
- title : Used to set the Title in App bar.
- leading : Used to override the current back arrow button.
Note : I am using the Icons library to show Home icon in App bar. You can also use here any widget.
|
1 2 3 4 5 6 7 |
appBar: AppBar( automaticallyImplyLeading: true, title: Text('OverRide AppBar BACK Button'), leading: IconButton(icon:Icon(Icons.home), onPressed: () {goBack(context);}, ) ), |
7. Creating 1 Raised Button widget in body area to navigate to previous screen.
|
1 2 3 4 5 6 7 8 |
body: Center( child: RaisedButton( onPressed: () {goBack(context);}, color: Colors.green, textColor: Colors.white, child: Text('Go Back To Previous Screen'), ), ), |
8. Complete source code for main.dart file:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 |
import 'package:flutter/material.dart'; void main() { runApp(MaterialApp( title: 'Flutter Navigate to Next Screen', home: FirstScreen(), )); } class FirstScreen extends StatelessWidget { gotoNextActivity(BuildContext context){ Navigator.push( context, MaterialPageRoute(builder: (context) => SecondScreen()), ); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Home Activity Screen'), ), body: Center( child: RaisedButton( child: Text('Navigate To Second Screen'), color: Colors.green, textColor: Colors.white, onPressed: () { gotoNextActivity(context); }), ), ); } } class SecondScreen extends StatelessWidget { goBack(BuildContext context){ Navigator.pop(context); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( automaticallyImplyLeading: true, title: Text('OverRide AppBar BACK Button'), leading: IconButton(icon:Icon(Icons.home), onPressed: () {goBack(context);}, ) ), body: Center( child: RaisedButton( onPressed: () {goBack(context);}, color: Colors.green, textColor: Colors.white, child: Text('Go Back To Previous Screen'), ), ), ); } } |
Screenshots:
