Flutter屏幕效果插件blue_screen的使用

blue_screen 是一个用于替换 Flutter 应用默认错误显示的插件。它允许你在应用中显示一个类似于 Windows 系统蓝屏的错误界面。

蓝屏错误

蓝屏错误（Blue Screen of Death, BSoD），也称为致命错误或 Bugcheck，是 Microsoft Windows 和 ReactOS 操作系统在遇到严重系统错误时显示的一个关键错误界面。蓝屏错误表示操作系统已达到无法安全运行的状态。可能的原因包括硬件故障、设备驱动程序问题或意外终止关键进程或线程。

特性

• 支持在安全模式下运行应用，通过 runSafeMode 函数或使用 SafeModeBuilder 包裹小部件，以避免在发布模式下抛出异常。
• 可以使用 BlueScreenWidget 替换 Flutter 默认的 ErrorWidget 来显示带有 BlueScreenBuilder 的错误消息，或者像其他小部件一样在你的应用中使用它。

安全模式

安全模式是一种计算机操作系统的诊断模式。它也可以指应用程序软件的操作模式。安全模式旨在帮助修复操作系统中的大多数问题。它也被广泛用于删除恶意安全软件。

开始使用

添加插件到项目

要将 blue_screen 插件添加为依赖项，在项目终端运行以下命令：

flutter pub add blue_screen

声明字体资源（可选）

如果你已经导入了该包，告诉 Flutter 在哪里找到 blue_screen 中的字体。

要声明这些字体，请在字体路径前加上 packages/blue_screen。这会告诉 Flutter 在包的 lib 文件夹中查找字体。

flutter:
  fonts:
    - family: <font_name>
      fonts:
        - asset: packages/blue_screen/fonts/<file_name>

要使用这些字体，请按如下方式声明：

...
  fontFamily: '<font_name>',
...

使用示例

完整的示例可以在 此处 查看，同时可以查看在线演示。

import 'package:blue_screen/blue_screen.dart';

/// Flutter代码示例
void main() {
  // 将应用置于安全模式
  runSafeMode(() {
    // 启动应用
    runApp(const BlueScreenExampleApp());
  });
}

附加信息

如需请求功能或报告错误，请访问 问题页面。

完整示例代码

以下是完整的示例代码，展示了如何使用 blue_screen 插件：

import 'package:blue_screen/blue_screen.dart';
import 'package:flutter/material.dart';

/// Flutter代码示例
void main() {
  // 将应用置于安全模式
  runSafeMode(() {
    // 启动应用
    runApp(const BlueScreenExampleApp());
  });
}

/// `BlueScreenWidget` 示例应用
class BlueScreenExampleApp extends StatefulWidget {
  const BlueScreenExampleApp({super.key});

  [@override](/user/override)
  State<BlueScreenExampleApp> createState() => _BlueScreenExampleAppState();
}

class _BlueScreenExampleAppState extends State<BlueScreenExampleApp> {
  OperatingSystem? operatingSystem;

  [@override](/user/override)
  Widget build(BuildContext context) {
    // 设置 BlueScreen 的构建器在应用启动之前
    return BlueScreenBuilder(
      builder: (exception) {
        // 如果选择了操作系统，
        // 使用指定系统的蓝屏来显示错误。
        switch (operatingSystem) {
          case OperatingSystem.windows10:
            return BlueScreenWidget.withWindows10(
              exception,
              rebuild: true,
              repeatable: true,
              stopCode: StopCode.random(),
            );
          case OperatingSystem.windows11:
            return BlueScreenWidget.withWindows11(
              exception,
              rebuild: true,
              repeatable: true,
              stopCode: StopCode.random(),
            );
          case OperatingSystem.windowsServer:
            return BlueScreenWidget.withWindowsServer(
              exception,
              rebuild: true,
              repeatable: true,
              scrollable: true,
              stopCode: StopCode.random(),
            );
          default:
            // 默认情况下，在安全模式下显示蓝屏
            return BlueScreenWidget(exception);
        }
      },
      child: MaterialApp(
        theme: ThemeData(
          fontFamily: FontFamily.segoe,
        ),
        title: 'blue_screen_example',
        debugShowCheckedModeBanner: false,
        home: SafeModeBuilder(
          enable: false,
          builder: (context) {
            if (operatingSystem != null) {
              // 由于错误小部件仅在构建期间使用，在此模拟示例中，
              // 我们故意在构建函数中引发异常。
              throw Exception('oh no, an error');
            } else {
              return Scaffold(
                appBar: AppBar(
                  title: const Text('BlueScreen Sample'),
                ),
                body: Center(
                  child: TextButton(
                    onPressed: () {
                      showDialog(
                        context: context,
                        builder: (context) {
                          return SimpleDialog(
                            title: const Text('BlueScreen Types'),
                            children: OperatingSystem.values.map((os) {
                              return SimpleDialogOption(
                                child: Text(os.name),
                                onPressed: () {
                                  setState(() {
                                    operatingSystem = os;
                                  });
                                  Navigator.pop(context);
                                },
                              );
                            }).toList(),
                          );
                        },
                      );
                    },
                    child: const Text('Error Prone'),
                  ),
                ),
              );
            }
          },
          // 当应用抛出错误时显示默认的 BlueScreenWidget
          creator: (exception) => BlueScreenWidget(exception),
        ),
      ),
    );
  }
}