在 Flutter 中显示用户友好的错误页面而不是异常答案

【问题标题】：Show user-friendly error page instead of exception in Flutter在 Flutter 中显示用户友好的错误页面而不是异常
【发布时间】：2018-11-16 09:09:26
【问题描述】：

是否可以进行全局错误处理以显示用户友好的错误页面而不是显示红色异常？

我已经进行了错误处理 (here)，它将向后端报告异常，但我真正想要实现的是隐藏红色异常并显示一些更友好的东西。

我到处搜索，但实际上一无所获。很抱歉我没有任何代码可显示，因为我不知道如何开始。

【问题讨论】：

为什么不在_reportError 方法的生产else 中显示一个alertDialog 以显示用户友好的消息？
AlertDialog 需要context 对象。我将如何在_reportError 方法中获取context 对象？
作为参数传递？ IE。 Future<Null> _reportError(dynamic error, dynamic stackTrace, BuildContext context) async {}
onError: (error, stackTrace) { _reportError(error, stackTrace); }); 是否也可以在 onError 方法中获取它，因为我使用的是runZoned？
你能像_reportError(error, stackTrace, BuildContext context);一样传递吗？

标签： flutter dart custom-error-pages

【解决方案1】：

官方文档：

在构建阶段发生错误时，调用ErrorWidget.builder 回调来构建小部件被用来代替失败的那个。默认情况下，在调试模式下以红色显示错误消息，在发布模式下显示灰色背景。

您可以在 MaterialApp 小部件的builder 方法中定义它。

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class CustomError extends StatelessWidget {
  final FlutterErrorDetails errorDetails;

  const CustomError({
    Key key,
    @required this.errorDetails,
  })  : assert(errorDetails != null),
        super(key: key);

  @override
  Widget build(BuildContext context) {
    return Card(
      child: Padding(
        child: Text(
          "Something is not right here...",
          style: const TextStyle(
            color: Colors.white,
            fontWeight: FontWeight.bold,
          ),
        ),
        padding: const EdgeInsets.all(8.0),
      ),
      color: Colors.red,
      margin: EdgeInsets.zero,
    );
  }
}

class MyApp extends StatelessWidget {
  MyApp({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      builder: (BuildContext context, Widget widget) {
        ErrorWidget.builder = (FlutterErrorDetails errorDetails) {
          return CustomError(errorDetails: errorDetails);
        };

        return widget;
      },
      title: 'Flutter Demo',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  MyHomePage({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView(
        children: <Widget>[
          Text(
            'Welcome,',
            style: Theme.of(context).textTheme.headline6,
          ),
          FirstName(),
        ],
        padding: const EdgeInsets.all(30.0),
      ),
    );
  }
}

class FirstName extends StatelessWidget {
  FirstName({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Text(null);
  }
}

看起来是这样的：

（点击放大）

【讨论】：

如何测试这个？这是什么红色异常？
您可以简单地抛出一个异常，而不是红色异常，它将显示用户友好的消息。
好吧，我会尝试，因为到目前为止，当我只在控制台上抛出异常时，永远无法在 UI 上获得某些东西，现在我正在研究这个
MaterialApp中是否也需要覆盖builder？
是的，如果你想使用 ThemeData。如果您不关心 ThemeData，请使用前面的代码。

【解决方案2】：

以Spectarion 的回答为基础：

添加了脚手架。如果没有 Scaffold，消息会显示在先前呈现的内容之上。
将更多代码移至辅助方法。

代码：

void setErrorBuilder() {
  ErrorWidget.builder = (FlutterErrorDetails errorDetails) {
    return Scaffold(
        body: Center(
            child: Text("Unexpected error. See console for details.")));
  };
} 

class MyApp extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     setErrorBuilder();

     return MaterialApp(
       builder: (BuildContext context, Widget widget) {
         setErrorBuilder();    
         return widget;
       },
       title: 'Flutter Demo',
       home: MyHomePage(title: 'Flutter Demo Home Page'),
     );
   }
 }

【讨论】：

【解决方案3】：

要定义在构建器构建小部件失败时显示的自定义错误小部件，请使用MaterialApp.builder。

class MyApp extends StatelessWidget {
...
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      ...
      builder: (BuildContext context, Widget widget) {
        Widget error = Text('...rendering error...');
        if (widget is Scaffold || widget is Navigator)
          error = Scaffold(body: Center(child: error));
        ErrorWidget.builder = (FlutterErrorDetails errorDetails) => error;
        return widget;
      },
    );
  }
}

【讨论】：