如何使用Flutter移除底部导航栏与导航。

Question

我希望删除所有堆叠的路由，并返回到身份验证页面。我的主页如下所示。

class _HomeScreenState extends State<HomeScreen> {
      final List<StatelessWidget> pages = [
        new Page1(),
        new Page2(),
        new Page3(),
        new Page3(),
      ];        

      @override
      Widget build(BuildContext context) {
        return new WillPopScope(
          onWillPop: () async {
            await Future<bool>.value(true);
          },
          child: new CupertinoTabScaffold(
            tabBar: new CupertinoTabBar(
              activeColor: Colors.blue,
              inactiveColor: Colors.grey,
              items: const <BottomNavigationBarItem>[
                BottomNavigationBarItem(
                  icon: Icon(Icons.looks_one),
                  title: Text('Page1'),
                ),
                BottomNavigationBarItem(
                  icon: Icon(Icons.looks_two),
                  title: Text('Page2'),
                ),
                BottomNavigationBarItem(
                  icon: Icon(Icons.looks_3),
                  title: Text('Page3'),
                ),
                BottomNavigationBarItem(
                  icon: Icon(Icons.looks_4),
                  title: Text('Page4'),
                ),
              ],
            ),
            tabBuilder: (BuildContext context, int index) {
              return new DefaultTextStyle(
                style: const TextStyle(
                  fontFamily: '.SF UI Text',
                  fontSize: 17.0,
                  color: CupertinoColors.black,
                ),
                child: new CupertinoTabView(
                  builder: (BuildContext context) {
                    return pages[index];
                  },
                ),
              );
            },
          ),
        );
      }
    }

当用户注销时，我想要移除CupertinoTabBar。我尝试了以下代码：

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

它已经正确显示在屏幕上，但底部导航仍然可见。 如何正确移除底部导航？

- Daibaku

---

你是否正在使用 Firebase_Auth 进行身份验证？ - anmol.majhail

是的，我正在使用 Firebase 认证。 - Daibaku

Answer 1

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

将由以下方式进行修复：

Navigator.of(context, rootNavigator: true).pushReplacement(MaterialPageRoute(builder: (context) => new AtuhScreen()));

rootNavigator: true会获取最高的根部小部件Scaffold或MaterialApp，并避免显示BottomNavigationBar 。

- Frank Vu

---

这对于非 Firebase 认证的应用程序完美地运行。 - Jeff Frazier

这对我的代码起作用了。谢谢。 - Davrick

Answer 2

由于您正在使用FireBase_auth： 那么您可以使用StreamBuilder来处理登录和退出的过程。 例如：

final FirebaseAuth _auth = FirebaseAuth.instance;
void main() {
  runApp(MaterialApp(
    //home: MyLoginPage(),
    home: StreamBuilder(
        stream: _auth.onAuthStateChanged,
        builder: (context, snap) {
          if (snap.connectionState == ConnectionState.waiting) {
            return SplashScreen();
          } else {
            if (snap.hasData) {
              return HomeScreen(
                user: snap.data,
                signOut: signOut,
              );
            }
            return MyLoginPage();
          }
        }),
    theme: ThemeData(
        primarySwatch: Colors.blue,
        accentColor: Colors.blue),
  ));
}

void signOut() async {
  await _auth.signOut();
}

然后，您可以从任何页面屏幕中简单调用SignOut()，并且您将获得一个新的屏幕，例如此处的MyLoginPage()示例。

class Page3 extends StatelessWidget {
  final Function signOut;

  Page3(this.signOut);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Third'),
      ),
      body: Center(child: RaisedButton(onPressed: ()=> signOut,child: Text("Sign-Out"),),),
    );
  }
}

- anmol.majhail

Answer 3

这个问题与导航器有关。如果你有嵌套的导航器，那么pushAndRemoveUntil将无法正常工作，因为它不会将注销屏幕推送到路由或最上层的导航器上，而是推送到子导航器上，例如一个屏幕。因此，在导航到注销屏幕时，你必须明确传递路由导航器，如下所示：

Navigator.of(context, rootNavigator: true).pushReplacement(                          
MaterialPageRoute(builder: (context) => LogoutPage()));

这将弹出任何子导航器并跳转到顶级导航器。

- Saurabh Kumar