Flutter:自定义错误显示

这篇具有很好参考价值的文章主要介绍了Flutter:自定义错误显示。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

为什么要自定义错误处理

以下面数组越界的错误为例:

class _YcHomeBodyState extends State<YcHomeBody> {
  List<String> list = ['苹果', '香蕉'];
  
  Widget build(BuildContext context) {
    return Center(
        child: Column(
      children: [
        Text(list[0]),
        Text(list[2]),
      ],
    ));
  }
}

当构建失败后会在屏幕上如下显示,这样不太友好,是否可以进行自定义错误显示呢?
Flutter:自定义错误显示,dart 和 Flutter,flutter,javascript,开发语言

自定义错误显示

使用Flutter的错误处理机制:Flutter提供了一个全局的错误处理机制,可以通过重写ErrorWidget.builder来自定义错误显示。

自定义的错误widget

class CustomErrorHandle extends StatelessWidget {
  final String errorMessage;
  const CustomErrorHandle({Key? key, required this.errorMessage})
      : super(key: key);

  
  Widget build(BuildContext context) {
    return Scaffold(
        body: Container(
      width: MediaQuery.of(context).size.width,
      height: MediaQuery.of(context).size.height,
      color: Colors.grey.withOpacity(0.5),
      child: Center(
        child: Container(
          padding: const EdgeInsets.all(20),
          width: MediaQuery.of(context).size.width * 0.8,
          height: MediaQuery.of(context).size.height * 0.3,
          decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(10), color: Colors.white),
          child: Column(
            children: [
              Row(
                children: const [
                  Icon(Icons.warning_amber_sharp),
                  Text(
                    "错误提示",
                    style: TextStyle(fontSize: 20),
                  )
                ],
              ),
              Expanded(
                child: Padding(
                    padding: const EdgeInsets.symmetric(vertical: 10),
                    //当超出两行时,文本将被截断
                    child: Align(
                      alignment: Alignment.topLeft,
                      child: Text(
                        errorMessage,
                        overflow: TextOverflow.ellipsis,
                        maxLines: 2,
                      ),
                    )),
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.end,
                children: [
                  TextButton(
                      onPressed: () {
                        Navigator.pop(context);
                      },
                      child: const Text('确定'))
                ],
              ),
            ],
          ),
        ),
      ),
    ));
  }
}

全局监听

main() {
  // 全局错误处理机制
  FlutterError.onError = (FlutterErrorDetails errorDetails) {
    print('错误消息:$errorDetails');
    ErrorWidget.builder = (FlutterErrorDetails errorDetails) {
      return CustomErrorHandle(
        errorMessage: errorDetails.exception.toString(),
      );
    };
  };
  runApp(const MyApp());
}

Flutter:自定义错误显示,dart 和 Flutter,flutter,javascript,开发语言
如果不想显示系统提示的异常信息,可以进行自定义,比如:

 String errorMessage = '发生错误,请稍后重试。';
      var exception = errorDetails.exception;
      if(exception is RangeError){
            errorMessage ='数组越界';
      }
      return CustomErrorHandle(
        errorMessage: errorMessage,
      );

Flutter:自定义错误显示,dart 和 Flutter,flutter,javascript,开发语言文章来源地址https://www.toymoban.com/news/detail-587046.html

到了这里,关于Flutter:自定义错误显示的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • flutter开发实战-长链接WebSocket使用stomp协议stomp_dart_client

    flutter开发实战-长链接WebSocket使用stomp协议stomp_dart_client 在app中经常会使用长连接进行消息通信,这里记录一下基于websocket使用stomp协议的使用。 1.1 stomp介绍 stomp,Streaming Text Orientated Message Protocol,是流文本定向消息协议,是一种为MOM(Message Oriented Middleware,面向消息的中间件

    2024年02月13日
    浏览(46)
  • 【Flutter 面试题】Dart是什么?Dart和Flutter有什么关系?

    【Flutter 面试题】Dart是什么?Dart和Flutter有什么关系? 👏🏻 正在学 Flutter 的同学,你好! 😊 本专栏是解决 Flutter 面试过程中可能出现的问题,而进行汇总整理的。一个问题一篇文章,尽可能详细解答,满足面试需求。 🔍 想解决开发中的零散问题?碎片化教程 👉 Flutte

    2024年02月22日
    浏览(46)
  • 【Flutter】Flutter Dart 获取当前时间戳

    在日常的软件开发中,我们经常需要获取当前的时间戳。无论是用于日志记录,还是用于生成唯一标识符,或者是用于时间同步,时间戳都发挥着重要的作用。 本文将详细介绍如何在 Flutter 和 Dart 中获取当前时间戳。 通过阅读本文,你将掌握以下知识: 了解时间戳的重要性

    2024年02月12日
    浏览(39)
  • Flutter长图显示,自定义显示图片的指定区域

    话不多说,直切正题!我们经常会遇到一个需求,在在一个定高的卡片中显示长图,如下图所示。 假如我们要显示这个长图。如果不考虑自定义显示长图的区域,这个很好实现,没什么可说的。 关于 BoxFit 这个枚举,各个具体的枚举值含义,我直接从官方的注释中复制了出来

    2024年02月21日
    浏览(43)
  • 【Flutter】下载安装Flutter并使用学习dart语言

    安装flutter, 并使用flutter内置的dartSDK学习使用dart语言。 编辑器: Android Studio fluuter 版本 : flutter_windows_3.13.1 内置dartSDK : 3.1.0 dart路径路径: flutter安装路径bincachedart-sdk flutter下载地址 官网的下载描述蛮详细的,直接用就行。 Android Studio 需要到官网下载安装包。 如果你c盘容

    2024年02月09日
    浏览(45)
  • Flutter系列文章-Flutter环境搭建和Dart基础

    Flutter是Google推出的一个开源的、高性能的移动应用开发框架,可以用一套代码库开发Android和iOS应用。Dart则是Flutter所使用的编程语言。让我们来看看如何搭建Flutter开发环境,并了解Dart语言的基础知识。 1. 安装Flutter SDK 首先,访问Flutter官网下载Flutter SDK。选择适合你操作系统

    2024年02月15日
    浏览(46)
  • flutter开发实战-inappwebview实现flutter与Javascript方法调用

    flutter开发实战-inappwebview实现flutter与Javascript方法调用 在使用inappwebview时候,需要flutter端与JS进行交互,调用相应的方法,在inappwebview中的JavaScript Handlers。 要添加JavaScript Handlers,可以使用InAppWebViewController.addJavaScriptHandler方法,在该方法中定义handlerName和JavaScript端调用它时要

    2024年02月03日
    浏览(43)
  • Flutter学习2 - Dart

    Dart语言特点: Dart 2.0 开始便是强类型语言,而且是静态类型的(可以类比Java,C#等) 强类型语言的优点:所有类型的检查必须在编译的时候完成 前端开发的 js 语言是弱类型的语言 强类型的语言需要在定义的时候指定类型,如果不指定,编译器也可以在赋值的时候推断出变

    2024年02月21日
    浏览(46)
  • 【Flutter】Dio 强大的Dart/Flutter HTTP客户端

    Dio是一个强大的Dart/Flutter HTTP客户端,支持全局配置、拦截器、FormData、请求取消、文件上传/下载、超时等功能。 首先,

    2024年02月11日
    浏览(46)
  • 无涯教程-Flutter - Dart简介

    Dart是一种开源通用编程语言,它最初是由Google开发的, Dart是一种具有C样式语法的面向对象的语言,它支持诸如接口,类之类的编程概念,与其他编程语言不同,Dart不支持数组, Dart集合可用于复制数据结构,例如数组,泛型和可选类型。 以下代码显示了一个简单的Dart程序

    2024年02月10日
    浏览(53)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包