了解并解决 Flutter 中的灰屏问题

生产中的 flutter 应用程序中的灰屏是一种通用占位符，当框架遇到问题无法渲染预期用户界面时就会显示。是的，所以基本上是出现问题时的后备指示器。

有趣的是，这只出现在发布模式下。在任何其他模式下运行都会显示红色错误屏幕，并说明导致错误的原因。 （检查此处以了解各种类型的构建模式。）此类错误的常见原因是：

• 未处理的异常：这些是运行时发生的错误，未使用 try-catch 块捕获。
• 渲染错误：这些是渲染布局时引起的问题，例如，在 Column 、 Row 或 Flex 小部件外部使用 Expanded 时引起的问题。

以下是可能导致灰屏的代码示例：

class HomeView extends HookWidget {
   
  const HomeView({
   super.key});
  @override
  Widget build(BuildContext context) {
   
    const widget = null;
    return Scaffold(
      appBar: AppBar(
        title: Text(
          'Gallery',
          style: Theme.of(context).textTheme.headlineLarge,
        ),
      ),
      body: widget!,
    );
  }
}

在这里，我们犯了一个明显的错误，在我们知道的 null 小部件上使用了 bang 运算符(!)，这导致在非发布模式下出现红屏，在发布模式下出现灰屏。

需要注意的是，我们不建议在不更新的情况下将部件明确设置为空值，空值错误是一个常见错误，而上述操作是重现该错误的简单方法。

调试模式下的红色错误屏幕（左）和发布模式下的灰色屏幕（右）的图像

自定义错误屏幕

为了显示更用户友好的消息而不是灰屏，我们将策略性地在 main 函数中放置一行代码。该行充当预防措施，确保每当发生未处理的异常时都会显示自定义错误屏幕。

void main() {
   
  ErrorWidget.builder = (_) => const AppErrorWidget(); // This line does the magic!