Appbar widget has a property which is used to hide particular Appbar back arrow icon. The back arrow icon is used to go back to previous screen if user is navigate between multiple activities screen. By default if we would add multiple screens in our flutter application the back arrow icon will appear on 2nd screen and from all screens but sometimes app developers wants to hide the Appbar back arrow icon and make the App bar with online title text. So using the automaticallyImplyLeading with false value we can easily hide the Appbar back button in flutter. So in this tutorial we would Flutter Disable Hide Remove Appbar Back Button Android iOS Example Tutorial.
Contents in this project Flutter Disable Hide Remove Appbar 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 HomeScreen class. Which is our first screen for application.
|
1 2 3 4 5 |
void main() { runApp(MaterialApp( home: HomeScreen(), )); } |
3. Creating our First HomeScreen class extends with StatelessWidget.
- gotoNextActivity : This method is used to navigate to next SecondScreen activity class.
- RaisedButton : Used to create Button in Home Screen class.
|
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 HomeScreen 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 Next Screen'), color: Colors.green, textColor: Colors.white, onPressed: () { gotoNextActivity(context); }), ), ); } } |
4. Creating our second screen class named as SecondScreen extends StatelessWidget.
- goBack : Used to go back to previous screen. We would call this function on Button onPress onClick event.
- automaticallyImplyLeading : false – Used to hide or Disable the AppBar back button.
|
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 |
class SecondScreen extends StatelessWidget { goBack(BuildContext context){ Navigator.pop(context); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( automaticallyImplyLeading: false, title: Text('Disable AppBar BACK Button'), ), body: Center( child: RaisedButton( onPressed: () {goBack(context);}, color: Colors.green, textColor: Colors.white, child: Text('Go Back To Previous Activity Screen'), ), ), ); } } |
5. 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 |
import 'package:flutter/material.dart'; void main() { runApp(MaterialApp( home: HomeScreen(), )); } class HomeScreen 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 Next 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: false, title: Text('Disable AppBar BACK Button'), ), body: Center( child: RaisedButton( onPressed: () {goBack(context);}, color: Colors.green, textColor: Colors.white, child: Text('Go Back To Previous Activity Screen'), ), ), ); } } |
Screenshots:
Can we change the color of default back arrow in appBar ??