flutter remove back button on appbar

Question

I am wondering, if anyone knows of a way to remove the back button that shows up on the appBar in a flutter app when you use Navigator.pushNamed to go to another page. The reason I do not want it on this resulting page is that it is coming from the navigation and I want users to use the logout button instead, so that the session starts over.

Answer 1

I believe the solutions are the following

You actually either:

• Don't want to display that ugly back button ( :] ), and thus go for : AppBar(...,automaticallyImplyLeading: false,...);

• Don't want the user to go back - replacing current view - and thus go for: Navigator.pushReplacementNamed(## your routename here ##);

• Don't want the user to go back - replacing a certain view back in the stack - and thus use: Navigator.pushNamedAndRemoveUntil(## your routename here ##, f(Route<dynamic>)→bool); where f is a function returning truewhen meeting the last view you want to keep in the stack (right before the new one);

• Don't want the user to go back - EVER - emptying completely the navigator stack with: Navigator.pushNamedAndRemoveUntil(context, ## your routename here ##, (_) => false);

• s.bridges: This was the answer I was looking for! pushReplacementNamed() wasn't working for me, but the user going back EVER is what ended up working! Thank you!
• Jay Jeong: indeed this is the best answer.
• camillo777: Thank you, I had to use "pushReplacementNamed" instead of "popAndPushNamed"
• Vivek Thummar: automaticallyImplyLeading: false is the answer i'm looking for..
• Muhammet: Thanks with getx Navigator.of(Get.context!) .pushNamedAndRemoveUntil('/home', (Route<dynamic> route) => false); worked

Answer 2

A simple way to remove the back button in the AppBar is to set automaticallyImplyLeading to false.

appBar: AppBar(
 title: Text("App Bar without Back Button"),
 automaticallyImplyLeading: false,
),

• Guilherme Matuella: While this is simple to implement, for the given scenario, Navigator.pushReplacementNamed is the correct solution. What you suggest is a workaround that if applied in all scenarios, may eventually infer wrong behavior, like somewhere that someone would like that the AppBar continues to imply the leading behavior (i.e.: back navigation button)
• vishalknishad: Although it removes the back arrow icon but still you can go back by pressing back button of device
• Lane Faison: What is the best way to remove the back button on Android only, so that an Android user must use the device's back button to go back, but an iOS user sees an AppBar back button?

Answer 3

You can remove the back button by passing an empty new Container() as the leading argument to your AppBar.

If you find yourself doing this, you probably don't want the user to be able to press the device's back button to get back to the earlier route. Instead of calling pushNamed, try calling Navigator.pushReplacementNamed to cause the earlier route to disappear.

The function pushReplacementNamed will remove the previous route in the backstack and replace it with the new route.

Full code sample for the latter is below.

import 'package:flutter/material.dart';
class LogoutPage extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
 return new Scaffold(
 appBar: new AppBar(
 title: new Text("Logout Page"),
 ),
 body: new Center(
 child: new Text('You have been logged out'),
 ),
 );
 }
}
class MyHomePage extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
 return new Scaffold(
 appBar: new AppBar(
 title: new Text("Remove Back Button"),
 ),
 floatingActionButton: new FloatingActionButton(
 child: new Icon(Icons.fullscreen_exit),
 onPressed: () {
 Navigator.pushReplacementNamed(context, "/logout");
 },
 ),
 );
 }
}
void main() {
 runApp(new MyApp());
}
class MyApp extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
 return new MaterialApp(
 title: 'Flutter Demo',
 home: new MyHomePage(),
 routes: {
 "/logout": (_) => new LogoutPage(),
 },
 );
 }
}

• Jackpap: @Collin, pushReplacementNamed doesn't seem to remove the possibility of going back with the system back arrow.
• Dmitriy Blokhin: @Collin Jackson, Does pushReplacementNamed() dispose previous screen widget (and all depending data & states)?
• ThinkDigital: @Jackpap that's because it really shows the arrow if there is a previous route. If it's the only route, then there's nothing to go back to. In your case, use the empty Container() method.
• Hasen: The empty container method seems to result in a space where the back button would have been so the Appbar title is moved across slightly. Still not an ideal method.
• Rabi Roshan: appBar: AppBar( title: Text("App Bar without Back Button"), automaticallyImplyLeading: false, ), As shown below is the correct method I guess.

Answer 4

automaticallyImplyLeading:

This checks whether we want to apply the back widget(leading widget) over the app bar or not. If the automaticallyImplyLeading is false then automatically space is given to the title and if If the leading widget is true, then this parameter has no effect.

void main() {
 runApp(
 new MaterialApp(
 home: new Scaffold(
 appBar: AppBar(
 automaticallyImplyLeading: false, // Used for removing back buttoon. 
 title: new Center(
 child: new Text("Demo App"),
 ),
 ),
 body: new Container(
 child: new Center(
 child: Text("Hello world!"),
 ),
 ),
 ),
 ),
 );
} 

• ryandra: now i understand the back widget is called leading widget, before i confuse why its called ImplyLeading

Answer 5

just use automaticallyImplyLeading in AppBar()

appBar: AppBaar(
 automaticallyImplyLeading: false,
)

Answer 6

If you want to hide back button use below code

class SecondScreen extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
 return Scaffold(
 appBar: AppBar(
 title: Text('Remove Back Button'),
 //hide back button
 automaticallyImplyLeading: false,
 ),
 body: Center(
 child: Container(),
 ),
 );
 }
}

If you want to hide back button and stop the pop action use below code

class SecondScreen extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
 return WillPopScope(
 onWillPop: () async => false,
 child: Scaffold(
 appBar: AppBar(
 title: Text("Second Screen"),
 //For hide back button
 automaticallyImplyLeading: false,
 ),
 body: Center(
 child: Column(
 mainAxisAlignment: MainAxisAlignment.center,
 crossAxisAlignment: CrossAxisAlignment.center,
 children: <Widget>[
 RaisedButton(
 child: Text('Back'),
 onPressed: () {
 Navigator.pop(context);
 },
 ),
 ],
 )),
 ),
 );
 }
}

[

Answer 7

Use this for slivers AppBar

SliverAppBar (
 automaticallyImplyLeading: false,
 elevation: 0,
 brightness: Brightness.light,
 backgroundColor: Colors.white,
 pinned: true,
 ),

Use this for normal Appbar

 appBar: AppBar(
 title: Text
 ("You decide on the appbar name"
 style: TextStyle(color: Colors.black,), 
 elevation: 0,
 brightness: Brightness.light,
 backgroundColor: Colors.white,
 automaticallyImplyLeading: false,
),

Answer 8

The AppBar widget has a property called automaticallyImplyLeading. By default it's value is true. If you don't want flutter automatically build the back button for you then just make the property false.

appBar: AppBar(
 title: Text("YOUR_APPBAR_TITLE"), 
 automaticallyImplyLeading: false,
),

To add your custom back button

appBar: AppBar(
 title: Text("YOUR_APPBAR_TITLE"), 
 automaticallyImplyLeading: false,
 leading: YOUR_CUSTOM_WIDGET(),
),

Answer 9

If navigating to another page . Navigator.pushReplacement() can be used. It can be used If you're navigating from login to home screen. Or you can use .
AppBar(automaticallyImplyLeading: false)

Answer 10

There is a property in the appbar:

automaticallyImplyLeading: false 

Make this true so you will get back button.

Answer 11

SliverAppBar( automaticallyImplyLeading: false,}

Answer 12

in your appBar, put automaticallyImplyLeading in false :

 @override
 Widget build(BuildContext context) {
 return Scaffold(
 appBar: AppBar(
 automaticallyImplyLeading: false,

Answer 13

it is easy find the button in main.dart or any place as I set in main.dart

change this

 Navigator.push(

to

 Navigator.pushReplacement(

Answer 14

When you use Navigator.pushNamed the back-arrow appears automatically on the new screen's appBar for going back to the previous screen. If you don't want this functionality all you have to do is write automaticallyImplyLeading: false in your appBar properties.

Answer 15

AppBar widget automatically includes a back button when the current screen has been pushed onto the navigation stack. If you want to remove this back button, you have a few options depending on your needs and the structure of your app.

Option 1: Use automaticallyImplyLeading Property

AppBar(
 automaticallyImplyLeading: false,
 // Other AppBar properties
)

Option 2: Custom Leading Widget

AppBar(
 leading: Container(), // Effectively removes the back button, but can be any widget.
 // Other AppBar properties
)

Option 3: Modifying the Navigation Logic

For example, using Navigator.pushReplacement or Navigator.pushAndRemoveUntil to navigate to a new page won't add a back button because the previous page is removed from the stack.

Navigator.of(context).pushReplacement(MaterialPageRoute(builder: (context) => NewPage()));

• BoundForGlory: YES! This is exactly the solution for me since i'm using option 3

Answer 16

Just Make it transparent, and no action while pressend

AppBar(
 leading: IconButton(
 icon: Icon(
 Icons.arrow_back,
 color: Colors.white.withOpacity(0),
 ),
 onPressed: () {},
 ),

Answer 17

If you want to remove space as well set titleSpacing:0 .

 appBar: AppBar(
 title: Text("How do you rate us?"),
 automaticallyImplyLeading: false,
 titleSpacing: 0,
 actions: [
 IconButton(
 onPressed: () {
 Navigator.pop(context);
 },
 icon: Icon(Icons.close))
 ],
 ),

Answer 18

in flutter >= 3.10 set automaticallyImplyLeading: false,

• Community: Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Answer 19

 appBar: new AppBar(title: new Text("SmartDocs SPAY"),backgroundColor: Colors.blueAccent, automaticallyImplyLeading:false,
 leading: new Container(),
 ),

It is working Fine

• siva: we need to provide the leading : new Container() tag