导航时如何修复颤动的黑屏？答案

【问题标题】：How to fix black screen in flutter while Navigating?导航时如何修复颤动的黑屏？
【发布时间】：2020-08-07 19:19:50
【问题描述】：

我正在 Flutter 上创建一个多页应用程序。当我在其中使用导航时，出现黑屏。

导入“包：颤振/material.dart”； void main() => runApp(MyHomePage()); 类 MyHomePage 扩展 StatelessWidget { @覆盖小部件构建（BuildContext 上下文）{ 返回材料应用程序（主页：第0页（）， ); } } 类 Page0 扩展 StatefulWidget { @覆盖 _Page0State createState() => _Page0State(); } 类 _Page0State 扩展状态 { @覆盖小部件构建（BuildContext 上下文）{ 返回脚手架（背景颜色：颜色（0xFF493597），正文：列表视图（孩子们： [ 填充（填充：EdgeInsets.only（顶部：15.0，左侧：10.0）， ), 大小盒（高度：25.0， ), 填充（填充：EdgeInsets.only（左：40.0），孩子：行（孩子们： [ 文本（ '费用'，样式：文本样式（ fontFamily: '蒙特塞拉特', 颜色：颜色。白色， fontWeight: FontWeight.bold, 字体大小：25.0）， ), 大小盒（宽度：10.0， ), 文本（ '什么'，样式：文本样式（ fontFamily: '蒙特塞拉特', 颜色：颜色。白色，字体大小：25.0， ), ), ], ), ), 大小盒（高度：60.0），容器（边距：EdgeInsets.only（左：10.0，对：10.0， ), 高度：MediaQuery.of(context).size.height - 150，装饰：盒子装饰（颜色：颜色（0xFFFCFCFC），边界半径：边界半径.only（左上角：半径.圆形（75.0），右上角：半径.圆形（75.0）， ), ), 孩子：列表视图（主要：假，填充：EdgeInsets.only（左：15.0，对：20.0，最高：25.0， ), 孩子们： [ 填充（填充：const EdgeInsets.only( 最高：30.0， ), 孩子：列（孩子们： [ //问候文字排（孩子们： [ 展开（孩子：中心（孩子：文本（ '你好！ :)', 样式：文本样式（ fontFamily: '永久标记', 颜色：颜色.黑色，字体大小：30.0， ), ), ), ), ], ), 大小盒（高度：30.0， ), //添加按钮行（儿童：[ 展开（弹性：1，孩子：容器（高度：100.0，宽度：100.0，孩子：FittedBox（孩子：浮动动作按钮（海拔：10.0，背景颜色：颜色.白色，孩子：图标（ Icons.add, 颜色：颜色.黑色， ), 按下：（）{ Navigator.push(context,MaterialPageRoute(builder: (context) => NewTrip()),); }, ),`` ), ), ), //添加文字展开（弹性：1，孩子：文本（ '新的旅程'，样式：文本样式（ fontFamily: 'Nanum', 字体大小：30.0， ), ), ), ]), 大小盒（高度：30.0， ), //上一个行程按钮排（孩子们： [ 展开（弹性：1，孩子：容器（高度：100.0，宽度：100.0，孩子：FittedBox（孩子：浮动动作按钮（海拔：10.0，背景颜色：颜色.白色， onPressed: () {}, 孩子：图标（图标评估，颜色：颜色.黑色， ), ), ), ), ), //之前的行程文本展开（弹性：1，孩子：文本（ '以前的旅行'，样式：文本样式（ fontFamily: 'Nanum', 字体大小：30.0， ), ), ) ], ), 大小盒（高度：50.0， ), ], ), ), ], ), ), ], ), ); } }

而NewTrip小部件如下

类 NewTrip 扩展 StatelessWidget { @覆盖小部件构建（BuildContext 上下文）{ 返回材料应用程序（家：脚手架（正文：文本（'新旅行'）， ), ); } }

主页加载正常，但当我单击新行程按钮时，它显示黑屏。 MaterialApp 或 Scaffold 可能存在问题，但我还无法修复它。谁能告诉我是什么问题以及如何解决？

根据 cmets 中的要求更新了完整代码。

【问题讨论】：

在物理设备上？还是模拟器？
在物理设备上
问题中提供的代码太少了...可能来自NewTrip的build方法，但不清楚！
请提供更多来自相关小部件的代码。很乐意提供帮助:)
我已经更新了完整的代码。

标签： flutter dart navigation scaffold flutter-navigation

【解决方案1】：

所以在NewTrip() 中删除MaterialApp，因为它继承自父级。只需返回Scaffold。

class NewTrip extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(      
       body: Text('NEW TRIP'),
    );
  }
}

【讨论】：

【解决方案2】：

好的，所以在互联网上进行了一些研究后，我发现是 FloatingActionButton 导致了问题。

我将 FloatingActionButton 替换为 MaterialButton，这解决了我的问题。

【讨论】：

如果你还想使用浮动按钮，添加浮动按钮属性“herotag”。这对我有用。 ?
是的，这就是问题所在，FloatingActionButton 是一个带有默认英雄标签的英雄小部件，您在屏幕上使用了 2 个浮动ActionButton，而没有明确地给它们一个 heroTag。通过这样做，Flutter 无法判断哪个英雄要前进到下一个屏幕，因为有 2 个英雄小部件具有相同的标签。所以，像这样为你的 FloatingActionButton 添加一个独特的 heroTag 到你们两个 FloatingActionButtons。
另外，删除你的 MaterialApp，在一个 Flutter 应用中使用 2 个 Material 应用是没有意义的。
另外，请接受您的正确答案，以免其他人尝试回答。

【解决方案3】：

删除MaterialApp()

class NewTrip extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return  Scaffold(      
       body: Text('NEW TRIP'),    
    );
  }
}

【讨论】：

【解决方案4】：

请检查您的代码中的完整代码编辑。实际上你正在使用两个 FloatingActionButton。所以你需要使用两个不同名称的 heroTag。我已经在代码中添加了。 NewTrip 类没问题。

import 'package:flutter/material.dart';

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Page0(),
    );
  }
}

class Page0 extends StatefulWidget {
  @override
  _Page0State createState() => _Page0State();
}

class _Page0State extends State {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color(0xFF493597),
      body: ListView(
        children: [
          Padding(
            padding: EdgeInsets.only(top: 15.0, left: 10.0),
          ),
          SizedBox(
            height: 25.0,
          ),
          Padding(
            padding: EdgeInsets.only(left: 40.0),
            child: Row(
              children: [
                Text(
                  'Expense',
                  style: TextStyle(
                      fontFamily: 'Montserrat',
                      color: Colors.white,
                      fontWeight: FontWeight.bold,
                      fontSize: 25.0),
                ),
                SizedBox(
                  width: 10.0,
                ),
                Text(
                  'What',
                  style: TextStyle(
                    fontFamily: 'Montserrat',
                    color: Colors.white,
                    fontSize: 25.0,
                  ),
                ),
              ],
            ),
          ),
          SizedBox(height: 60.0),
          Container(
            margin: EdgeInsets.only(
              left: 10.0,
              right: 10.0,
            ),
            height: MediaQuery.of(context).size.height - 150,
            decoration: BoxDecoration(
              color: Color(0xFFFCFCFC),
              borderRadius: BorderRadius.only(
                topLeft: Radius.circular(75.0),
                topRight: Radius.circular(75.0),
              ),
            ),
            child: ListView(
              primary: false,
              padding: EdgeInsets.only(
                left: 15.0,
                right: 20.0,
                top: 25.0,
              ),
              children: [
                Padding(
                  padding: const EdgeInsets.only(
                    top: 30.0,
                  ),
                  child: Column(
                    children: [
                      //greeting text
                      Row(
                        children: [
                          Expanded(
                            child: Center(
                              child: Text(
                                'Hello! :)',
                                style: TextStyle(
                                  fontFamily: 'Permanent-Marker',
                                  color: Colors.black,
                                  fontSize: 30.0,
                                ),
                              ),
                            ),
                          ),
                        ],
                      ),

                      SizedBox(
                        height: 30.0,
                      ),

                      //add button
                      Row(children: [
                        Expanded(
                          flex: 1,
                          child: Container(
                            height: 100.0,
                            width: 100.0,
                            child: FittedBox(
                              child: FloatingActionButton(
                                heroTag: "btn",
                                elevation: 10.0,
                                backgroundColor: Colors.white,
                                child: Icon(
                                  Icons.add,
                                  color: Colors.black,
                                ),
                                onPressed: () {
                                  Navigator.push(
                                    context,
                                    MaterialPageRoute(
                                        builder: (context) => NewTrip()),
                                  );
                                },
                              ),
                            ),
                          ),
                        ),

                        //add text
                        Expanded(
                          flex: 1,
                          child: Text(
                            'New trip',
                            style: TextStyle(
                              fontFamily: 'Nanum',
                              fontSize: 30.0,
                            ),
                          ),
                        ),
                      ]),

                      SizedBox(
                        height: 30.0,
                      ),

                      //previous trip button
                      Row(
                        children: [
                          Expanded(
                            flex: 1,
                            child: Container(
                              height: 100.0,
                              width: 100.0,
                              child: FittedBox(
                                child: FloatingActionButton(
                                  heroTag: "btn1",
                                  elevation: 10.0,
                                  backgroundColor: Colors.white,
                                  onPressed: () {},
                                  child: Icon(
                                    Icons.assessment,
                                    color: Colors.black,
                                  ),
                                ),
                              ),
                            ),
                          ),

                          //previous trip text
                          Expanded(
                            flex: 1,
                            child: Text(
                              'Previous trips',
                              style: TextStyle(
                                fontFamily: 'Nanum',
                                fontSize: 30.0,
                              ),
                            ),
                          )
                        ],
                      ),

                      SizedBox(
                        height: 50.0,
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

NewTrip 类

class NewTrip extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Text('NEW TRIP'),
    );
  }
}

【讨论】：

【解决方案5】：

问题是您在另一个materialApp 中使用materialApp

Navigator 只是更改页面，我们不需要在 NewTrip() 中单独的 materialApp。

所以NewTrip应该如下

class NewTrip extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Text('NEW TRIP'),
    );
  }
}

【讨论】：

【解决方案6】：

使用ThemeData，以及参数scaffoldBackgroundColor。
例如：

ThemeData (
   scaffoldBackgroundColor: Colors.black,
)

【讨论】：

【解决方案7】：

在我的情况下，它是由以下原因引起的：

// to set portait screen orientation 
SystemChrome.setPreferredOrientation([
   DeviceOrientation.portraitUp,
   DeviceOrientation.portraitDown,
]);
// Instead i use `android:screenOrientation="portrait"` on my AndroidManifest.xml.

我在页面小部件呈现时声明的。删除它解决了我的黑屏问题。

【讨论】：

【解决方案8】：

我相信整个 Flutter 应用程序中只能有一个MaterialApp Widget，因为 MaterialApp Widget 很可能是 Flutter 的主要或核心组件。因此，当您尝试导航到新屏幕时，请尝试返回 Scaffold Widget 而不是 MaterialApp Widget。

class NewTrip extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return Scaffold(      
                  body: Text('NEW TRIP'),
        );
      }
    }

【讨论】：

【解决方案9】：

更改scaffoldBackgroundColor

theme: ThemeData(
        primarySwatch: Colors.blue,
        scaffoldBackgroundColor: Colors.white,  //here
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),

class NewTrip extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Text('NEW TRIP'),
    );
  }
}

【讨论】：

【解决方案10】：

FloatingActionButton 是个问题，所以如果你真的想使用浮动操作按钮，你应该将它们中的每一个添加到唯一的 heroTag 中。现在您可以毫无问题地使用 FloatingActionButton。切勿在同一页面上不使用 HeroTag 的情况下使用多个浮动操作按钮。

【讨论】：

【解决方案11】：

只需将脚手架放在下一页即可。

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。

【解决方案12】：

class NewTrip extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(      
              body: Text('NEW TRIP'),
            ),
    );
  }
}

删除材料应用程序并返回脚手架它肯定可以正常工作

如果浮动按钮有问题，请添加

heroTag：“btn1”，

heroTag：“btn2”，

在一个子树中有多个英雄共享同一个标签

【讨论】：