flutternavigationback-buttonappbar

flutter remove back button on appbar


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.


Solution

  • 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(),
          },
        );
      }
    }