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.
This question is related to
navigation
flutter
appBar: new AppBar(title: new Text("SmartDocs SPAY"),backgroundColor: Colors.blueAccent, automaticallyImplyLeading:false,
leading: new Container(),
),
It is working Fine
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,
),
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(),
),
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 true
when 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);
Cheers
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,
),
Just Make it transparent, and no action while pressend
AppBar(
leading: IconButton(
icon: Icon(
Icons.arrow_back,
color: Colors.white.withOpacity(0),
),
onPressed: () {},
),
Just want to add some description over @Jackpap answer:
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!"),
),
),
),
),
);
}
add
automaticallyImplyLeading: false,
into your Scaffold's Appbar
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)
// 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 new 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);
},
),
],
)
),
),
);
}
Source: Stackoverflow.com