首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Flutter w/ MobX:出现异常时,Snackbar不显示

Flutter是一种跨平台的移动应用开发框架,而MobX是一种状态管理库。当在Flutter应用中使用MobX时,如果出现异常,Snackbar通常不会显示。这是因为MobX默认会捕获并处理异常,以避免应用崩溃。

要解决这个问题,可以通过在异常处理代码中手动显示Snackbar来实现。以下是一个示例代码:

代码语言:txt
复制
import 'package:flutter/material.dart';
import 'package:mobx/mobx.dart';

// 创建一个全局的异常处理器
final globalErrorHandler = (Object error, StackTrace stackTrace) {
  // 在这里显示Snackbar
  ScaffoldMessenger.of(context).showSnackBar(
    SnackBar(
      content: Text('出现异常:$error'),
    ),
  );
};

void main() {
  // 初始化MobX
  WidgetsFlutterBinding.ensureInitialized();
  // 设置全局异常处理器
  FlutterError.onError = globalErrorHandler;

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter w/ MobX',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  final counter = Observable(0);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter w/ MobX'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              '点击按钮增加计数器的值:',
            ),
            Observer(
              builder: (_) => Text(
                '${counter.value}',
                style: Theme.of(context).textTheme.headline4,
              ),
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // 在这里故意引发一个异常
          throw Exception('这是一个故意引发的异常');
        },
        child: Icon(Icons.add),
      ),
    );
  }
}

在上面的示例中,我们创建了一个全局的异常处理器globalErrorHandler,它会在应用中的任何地方捕获异常。然后,在main()函数中设置FlutterError.onErrorglobalErrorHandler,以确保所有异常都会被捕获和处理。

MyHomePage组件中,我们使用了MobX来管理计数器的状态。当点击FloatingActionButton时,故意引发一个异常。由于我们设置了全局异常处理器,异常会被捕获并显示Snackbar。

需要注意的是,Snackbar需要在有Scaffold的上下文中才能正常显示,因此我们使用ScaffoldMessenger.of(context)来获取ScaffoldMessengerState,并调用showSnackBar()来显示Snackbar。

这是一个简单的解决方案,可以根据实际需求进行修改和扩展。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Flutter 刷新页面:通过下拉刷新提升用户体验

无论选择哪种方法,目标都是确保在触发刷新操作,应用程序的状态能够反映新数据,而不会导致用户界面的中断或者不一致。...比如,当新数据被抓取并且页面被更新,我们可能想展示一个成功信息的 SnackBar。我们可以使用 BuildContext 在当前屏幕展示 snackbar。...错误处理和用户反馈 错误处理是任何与数据源交互功能的重要一点,下来刷新也例外。当实现 onRefresh 回调,预测和处理潜在的错误至关重要,比如网络问题或者服务错误,这些会在拉取新数据时候发生。...先进技术和最佳实践 当我们完善 Flutter 应用程序时,采用先进的技术并遵循最佳实践可以显著提高代码的质量和可维护性,特别是在实现拉动刷新等功能。...这可能就要引入更先进的状态管理模式,比如 Bloc, Redux 或者 MobX,它们可以帮助我们更可预测性地管理刷新操作来触发状态更改。

25910

Flutter Widgets 之 SnackBa

版本及Dart版本如下: Flutter版本: 1.12.13+hotfix.5 Dart版本: 2.7.0 基础用法 应用程序有时候需要弹出消息提示用户,比如‘网络连接失败’、‘下载成功’等提示,就像...Android 等Toast,在Flutter中使用SnackBar组件,用法如下: Scaffold.of(context).showSnackBar(SnackBar( content...,消息会在底部弹出并显示一段时间,默认显示4秒,然后弹出,我们可以设置其显示的时间: Scaffold.of(context).showSnackBar(SnackBar( duration...方法SnackBar消息将会以队列的形式一个一个的弹出,比如下面的代码: RaisedButton( child: Text( '点我,弹出SnackBar...4秒,如果有10个,那么40秒内会一直弹消息,体验明显不友好,我们希望的效果是如果有新的消息,旧的都消息立刻消失,显示新的消息,只需在弹出新的SnackBar移除现在的SnackBar, Scaffold.of

1K00
  • Flutter 构建完整应用手册-处理手势

    假设我们想要制作一个自定义按钮,当点击显示snackbar。 我们如何解决这个问题?...添加材质涟漪效果 在设计应遵循材质设计指南的应用程序时,我们希望在点击将涟漪动画添加到部件。 Flutter提供InkWell部件来达到这个效果。...当他们这样做,我们需要将该项目从收件箱移至垃圾箱。 Flutter通过提供Dismissible部件使这项任务变得简单。...用户将该项目删除后,我们需要运行一些代码以从列表中删除该项目并显示Snackbar。 在真实的应用程序中,您可能需要执行更复杂的逻辑,例如从Web服务或数据库中删除项目。...为了提供我们正在移除项目的提示,我们将在屏幕上滑动该项目显示“划动消除”指示符。 在这种情况下,红色背景! 为此,我们将为Dismissible提供background参数。

    1.8K20

    Flutter 构建完整应用手册-设计基础知识 顶

    显示SnackBars 在某些情况下,当发生某些操作可以方便地向用户简单通知。 例如,当用户在列表中删除消息,我们可能想通知他们消息已被删除。 我们甚至可能想给他们一个撤消行为的选择!...); 2.显示一个SnackBar 使用Scaffold,我们可以展示SnackBar! 首先,我们需要创建一个SnackBar,然后使用Scaffold显示它。...(snackBar); 3.提供额外的操作 在某些情况下,我们可能希望在显示SnackBar向用户提供额外的操作。...}, ), ); 完整的例子 注意:在本例中,我们将在用户点击按钮显示SnackBar。 有关处理用户输入的更多信息,请参阅食谱的处理手势部分。...3.为每个选项卡创建内容 现在我们有了选项卡,我们希望在选择标签显示内容。 为此,我们将使用TabBarView部件。 注意:顺序很重要,必须与TabBar中的选项卡顺序相对应!

    7.1K10

    Flutter 中可定制的时间规划器

    原文链接:https://medium.com/flutterdevs/explore-customizable-time-planner-in-flutter-c8108218b52c ❞ Flutter...介绍 一个令人愉快、易于使用且可自定义的时间规划器,适用于 Flutter 移动、桌面和 Web。这是一个小部件,用于按计划向客户显示分配。...每行显示一个小时,每列显示一天,但您可以更改该部分的标题并显示您需要的任何其他内容。 此演示视频展示了如何在 Flutter 中创建可自定义的时间规划器。...它展示了可定制的时间规划器将如何在您的「Flutter」 应用程序中使用「time_planner」包工作。它显示当用户点击任何行和列,将创建一个随机时间规划器。...当用户点击时间规划器,我们还将显示snackBar消息。 void _addObject(BuildContext context) { List<Color?

    1.7K20

    Flutter 2 正式出道(一)

    相信不少人昨晚熬夜奋战,观看了Flutter Engage大会,Flutter团队也正式官宣了Flutter 2。从Flutter 1.0正式版到Flutter 2差不多有两年多一些的时间。...docs.google.com/document/d/1fV4FDNdcza1ITU7hlgweCDUZdWyCqd-rjz_J7K2KkfY/) 同样地,ScaffoldMessenger的创建是为了解决一些和SnackBar...有关的问题,包括轻松响应AppBar动作创建SnackBar,创建在Scaffold转换之间持久保存的SnackBars的能力,以及即使用户导航到具有其他Scaffold的页面也能够在异步操作完成显示...image 所有的这些好处,我们只需要几行代码就能实现显示SnackBar: final messenger = ScaffoldMessenger.of(context); messenger.showSnackBar...(SnackBar(content: Text(‘I can fly.’))); 当然了ScaffoldMessenger不止这些,有关更多的详细资料,可以观看这个视频。

    1.5K10

    Flutter 构建完整应用手册-导航器 顶

    当点击一个待办事项,我们将导航到一个显示关于待办事项信息的新屏幕(部件)。...在我们的例子中,当用户点击我们列表中的Todo,我们需要导航到DetailScreen。 当我们这样做,我们也想将Todo传递给DetailScreen。...路线 定义主屏幕 添加一个启动选择屏幕的按钮 在选择屏幕上创建两个按钮 轻触一个按钮,关闭选择屏幕 在主屏幕上使用snackbar显示选择 1.定义主屏幕 主屏幕将显示一个按钮。..., ); 5.在主屏幕上使用snackbar显示选择 既然我们正在启动一个选择屏幕并等待结果,那么我们会想要对返回的信息进行一些操作! 在这种情况下,我们将显示一个显示结果的Snackbar。...路线 创建两个屏幕显示相同的图像 将英雄部件添加到第一个屏幕 将英雄部件添加到第二个屏幕 1.创建两个屏幕显示相同的图像 在这个例子中,我们将在两个屏幕上显示相同的图像。

    4.9K10

    Flutter入门三部曲(2) - 界面开发基础

    最常见的Widget 接着先看看一些常用的组件,这些是随时可用的小部件,开箱即用,你会非常满意: Text - 用于简单地在屏幕上显示文本的小部件。 Image - 用于显示图像。...Icon - 用于显示Flutter的内置Material和Cupertino图标。 Container - 在Flutter中,相当于div。...Row, Column- 这些小部件显示水平或垂直方向的子项列表。 Stack - 堆栈显示一个孩子的列表。这个功能很像CSS中的'position'属性。...因为State在每次重建都没有抛弃,所以可以维护它并且不必每次重建某些东西都要进行昂贵的计算以获得状态属性。 此外,这是允许Flutter动画存在的原因。...我们知道可以通过Scaffold的context来弹出一个SnackBar。这里想通过点击弹出这个。

    2.6K00

    Flutter入门三部曲(2) - 界面开发基础

    StatelessWidgets and StatefulWidgets Flutter中的Widget都必须从Flutter库中继承。...最常见的Widget 接着先看看一些常用的组件,这些是随时可用的小部件,开箱即用,你会非常满意: Text - 用于简单地在屏幕上显示文本的小部件。 Image - 用于显示图像。...Icon - 用于显示Flutter的内置Material和Cupertino图标。 Container - 在Flutter中,相当于div。...Row, Column- 这些小部件显示水平或垂直方向的子项列表。 Stack - 堆栈显示一个孩子的列表。这个功能很像CSS中的'position'属性。...因为State在每次重建都没有抛弃,所以可以维护它并且不必每次重建某些东西都要进行昂贵的计算以获得状态属性。 此外,这是允许Flutter动画存在的原因。

    1.6K20

    Tooltip

    前言 ---- 在前面的文章中我们讲到了Wrap的用法,介绍了Flutter中的流式布局,在文章的最后让大家实现如下效果: ?...的一个Widget,它并不需要其他借助于类似showDialog、showModalBottomSheet或者SnackBarAction类似的方法来调出,当用户长按被Tooltip包裹的Widget,...当然,我们可以修改Tooltip的其他属性来更改它的显示效果。 比如,我想要这个tip显示在这个图标的上面,我们只需要修改如下属性即可 preferBelow: false, ?...又或许你觉得tip的显示区域太小了,你想要让它变大点? 借助于hight属性可以修改tip的高度 height: 132.0 ?...所以我们也可以进行下修改,放置自己想要的Widget 但是呢,如果没有特殊的需要还是建议修改哦,毕竟material官方对tooltips的颜色大小方向等都已经做了最合适的定义material.io

    3.2K50

    Flutter 专题】40 日常小问题小结 (一)

    问题一:嵌套权重异常 和尚在做 Android 为了屏幕适配,用到权重/比例比较多,Flutter 也提供了实现权重的功能,和尚尝试过 权重基本用法,当时没有涉及到嵌套权重的问题,和尚想要实现的是左侧一张大图...尝试三: 根据上一步尝试,和尚理解 Container 高度为 0,需要手动设置高度,但是设置在 Row 层还是 Column 层或子 Container 层是不同的; 和尚理解不显示的原因是高度未匹配...尝试四: 如果最外层设置高度,则考虑根据需求使用带有宽高的 Widget,和尚需要展示图片,故直接用图片占位; 和尚主要想实现图片高度自适应,而宽度随屏幕比例占有,右侧两图正常为左图占位一半...模式可以填满剩余空间,也允许稍小填满,非强制;相对 loose 使用范围更广。...问题二:SnackBar 找不到 Context 和尚在尝试 SnackBar 总是找不到上下文环境而打不开; ?

    83431
    领券