在 Flutter 中使用 Navigator.push() 时出现黑屏答案

【问题标题】：Black screen when using Navigator.push() in Flutter在 Flutter 中使用 Navigator.push() 时出现黑屏
【发布时间】：2020-07-23 04:25:47
【问题描述】：

我正在尝试使用 Navigator.push 导航到 Flutter 中的新页面。这是我到目前为止所得到的：

GestureDetector(
            onTap: () {
              print('Test');
//              Navigator.push(context,
//                  MaterialPageRoute(builder: (context) => ResultsPage()));
            },
            child: Container(
              color: Color(0xFFff474b),
              child: Center(
                child: Text('CALCULATE', style: kButtonText),
              ),
              padding: EdgeInsets.only(bottom: 20.0),
              width: double.infinity,
              height: 80.0,
              margin: EdgeInsets.only(top: 10.0),
            ),
          ),

我想实现的代码被注释掉了，因为我一直在用 print 语句测试 onTap。

有趣的是，打印语句运行，但由于某种原因，我无法让 Navigator.push 工作。它只会导航到黑屏。

就上下文而言，这是结果页面 - 只是一个带有 App Bar 的简单脚手架。但是应用栏没有显示在下一页：

class ResultsPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Calculated Distance'),
      ),
    );
  }
}

【问题讨论】：

标签： android flutter dart mobile flutter-layout

【解决方案1】：

该错误可能是由于脚手架中存在两个或多个浮动操作按钮造成的。默认情况下，浮动动作按钮有一个 Hero 属性处于活动状态。通过 heroTag: null, 使其停用。

例如，

FloatingActionButton(
                    heroTag: null,
                    child: Icon(),
                    onPressed: () {},
                  ),

【讨论】：

【解决方案2】：

啊，事实证明问题是我在页面上有两个 FloatingActionButton，因此它与 Navigator 路由混淆了。

我发现的这篇 Medium 文章是解决方案的一个很好的指南：https://medium.com/@kaendagger/test-cef30fcb5c54

【讨论】：

【解决方案3】：

将 ResultsPage() 添加到您的路线中将其添加到您的 MaterialApp(

MaterialApp( 
  initialRoute: '/',
              routes: {
                '/': (_) => HOME(),
                '/home': (_) => ResultsPage(),
              }, )

【讨论】：