Flutter 如何用导航去掉底部导航答案

【问题标题】：Flutter how to remove bottom navigation with navigationFlutter 如何用导航去掉底部导航
【发布时间】：2019-02-18 16:45:42
【问题描述】：

我想删除所有堆叠的路由并返回 Auth 页面。我的主页是这样的。

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()));

它正确进入屏幕，但底部导航仍然可见。
如何正确移除底部导航？

【问题讨论】：

您是否使用 Firebase_Auth 进行身份验证。？
是的，我正在使用 firebase 身份验证。

标签： flutter

【解决方案1】：

问题与导航器有关。如果您有嵌套的导航器，则 pushAndRemoveUntil 不会完成这项工作，因为它不会将注销屏幕推送到路线或最顶部的导航器上，而是推送到子导航器上，例如屏幕。因此，您必须在导航到注销屏幕时明确传递路线导航器，例如

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

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

【讨论】：

【解决方案2】：

代码

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。

【讨论】：

这非常适用于非 Firebase 身份验证的应用。
这适用于我的代码。谢谢。

【解决方案3】：

当您使用 FireBase_auth 时：然后您可以使用 StreamBuilder 来处理 Sign & Sign out Process。例如：

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

【讨论】：