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

Flutter:在运行的应用程序中获得显示模式(暗/正常)更改的通知

Flutter是一种跨平台的移动应用开发框架,它允许开发者使用单一代码库构建高性能、美观的应用程序。在Flutter中,可以通过使用MediaQuery类来获取显示模式的变化通知。

显示模式通常分为两种:暗模式和正常模式。暗模式是指应用程序在深色背景下显示,而正常模式是指应用程序在浅色背景下显示。

要在Flutter应用程序中获得显示模式更改的通知,可以使用MediaQuery类的platformBrightness属性。该属性返回当前设备的显示模式,可以是Brightness.light(正常模式)或Brightness.dark(暗模式)。

以下是一个示例代码,演示如何使用MediaQuery来获取显示模式的变化通知:

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Display Mode'),
        ),
        body: Center(
          child: DisplayModeWidget(),
        ),
      ),
    );
  }
}

class DisplayModeWidget extends StatefulWidget {
  @override
  _DisplayModeWidgetState createState() => _DisplayModeWidgetState();
}

class _DisplayModeWidgetState extends State<DisplayModeWidget> {
  Brightness _currentBrightness;

  @override
  void initState() {
    super.initState();
    _currentBrightness = MediaQuery.of(context).platformBrightness;
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Text(
          'Current Display Mode:',
          style: TextStyle(fontSize: 20),
        ),
        SizedBox(height: 10),
        Text(
          _currentBrightness == Brightness.light ? 'Normal' : 'Dark',
          style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
        ),
      ],
    );
  }
}

在上述示例中,我们创建了一个名为DisplayModeWidget的有状态小部件。在该小部件的状态类_DisplayModeWidgetState中,我们使用initState方法初始化_currentBrightness变量,该变量存储当前的显示模式。然后,在build方法中,我们根据_currentBrightness的值显示相应的文本。

这样,当应用程序的显示模式发生变化时,DisplayModeWidget会重新构建,并显示更新后的显示模式。

推荐的腾讯云相关产品:腾讯云移动开发平台(https://cloud.tencent.com/product/mwp)

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

相关·内容

开始使用-编写你第一个Flutter应用程序

这是因为配对这个词是构建方法内部生成,每次MaterialApp需要渲染时或者Flutter Inspector中切换平台时都会运行。 ? 问题? 如果您应用程序运行正常,请查找错别字。...这可能是误报,但考虑重新启动以确保您更改反映在应用用户界面应用程序应该像以前一样运行,每次热重新加载或保存应用程序时都会显示一个字对。 ? 问题?...如果您应用程序运行正常,则可以使用以下链接代码重新进入正轨。...如果您应用程序运行正常,则可以使用以下链接代码重新进入正轨。 lib/main.dart 第6步:导航到新屏幕 在这一步,您将添加一个显示收藏夹新屏幕(Flutter称为路由)。...如果您应用程序运行正常,则可以使用以下链接代码重新进入正轨。 lib/main.dart 第7步:使用主题更改UI 最后一步,您将使用该应用主题。 主题控制你应用外观和感觉。

9.5K20

Flutter 1.22 正式发布

Flutter 1.22修复 Flutter 1.20.4,修复了部署到真机设备问题 当应用程序访问其剪贴板时显示使用通知,导致Flutter应用程序中出现虚假通知,该问题已在Flutter 1.20.4...修复 iOS 14设备上会禁止运行debug应用程序,但实际开发debug除外 针对本地调试Flutter应用程序有关网络安全新策略使iOS 14显示一次性确认对话框(仅在开发过程,不适用于已发布...仍在使用v1 API旧版应用程序构建过程中将显示弃用警告,该警告指向支持新Android插件API文档 同时,如果您仍然有基于v1 Android APIFlutter应用程序,它将继续运行。...webview_flutter插件支持新Android平台视图模式,但当前需要手动启用。一旦更广泛社区得到更多使用,我们将默认将来版本启用它。...,并在其恢复正常运行时恢复。

7.4K20

Flutter 2.8 新特性【flutter专题17】

中进行了, Google Pay 作为一个主流大型应用程序,代码超过 100 万行,使用它进行测试可以确保这些更改所产生影响是可以被感知。...所有这些改进使得 Google Pay 低端 Android 设备上运行启动延迟降低了 50%,高端设备上降低了 10%。...例如在 Android 上渲染第一帧之前,Flutter 现在 只通知 Dart VM TRIM_LEVEL_RUNNING_CRITICAL 及以上内存压力信号,本地测试,这个更改将低端设备上第一帧时间减少了多达...Profiling 以便更好地了解应用程序性能问题,应用程序启动时启用,2.8 版本现在会将跟踪事件发送到 Android systrace 记录器,即使 Flutter 应用程序构建在发布模式下也会发送这些事件...选择此标签会显示应用启动配置文件数据。 Web platform views Android 和 iOS 并不是唯一获得性能改进平台,该版本还改进了 Flutter web 平台性能。

2.4K10

6种极大提升Flutter开发效率工具包

[1] 强大日志软件包 开发 Flutter 过程打印日志是常用调试方式之一,但 Flutter 内置日志打印非常简单,下面介绍一个强大软件包:logger。...(context) 在手机上直接显示日志。...详细用法及安装:http://laomengit.com/guide/data_storage/Json2Model.html [3] 不同分辨率手机上查看UI效果 Flutter 开发最大优势就是其跨平台...2019年 Flutter Interact,像我们展示了同时多个平台和设备上调试应用程序 ? 下面这款工具包 device_preview 可以让您在一台设备上查看不同分辨率设备上UI效果。...不止如此,它还有其他酷炫功能: 更改设备方向 动态系统配置:语言,模式,文本缩放比例 可自由调整分辨率和安全区域设备 保持应用程序状态 截图 device_preview 地址:https://pub.dev

1.3K30

Flutter 旋转轮

在在本文中,我们将探讨 “Flutter 旋转轮”。我们还将在flutter应用程序中使用「flutter_spinwheel」包来实现带有自定义选项「Spinwheel」演示程序。...它显示了如何在flutter应用程序中使用「flutter_spinwheel」软件包运行「旋转轮」,并显示了当您点击该项目时,旋转器将移动。同样,您将沿顺时针/逆时针任何方向移动微调器。...**onChanged:**此 属性用于每次更改选择时从微调器菜单返回所选值回调。 「select」:此 属性用于选择(突出显示)圆扇区。范围是0(项目大小)。想象它就像一个数组。...**在此构建器,我们将添加itemCount和itemBuilder。itemBuilder,我们将导航容器小部件。小部件内,我们将添加一个边距,即容器高度。...当我们运行应用程序时,我们应该获得屏幕输出,如屏幕下方截图所示。

8.7K20

【老孟FlutterFlutter 2 新增功能

:如何编写一个应用程序,适应本身以及多个不同尺寸(小,中和大屏幕),不同输入模式(触摸,键盘和鼠标)和不同习惯用法(移动,网络和台式机)?...为了为我们自己以及世界各地Flutter开发人员回答此问题,我们委托了Flutter Folio剪贴簿应用程序。 Folio只是一个简单示例,您希望它可以从一个代码库多个平台上很好地运行。...支持此功能新API可以beta通道上预览,并在flutter.dev上进行了记录,以及一系列演示此新模式示例项目。通过此更改,我们不再犹豫建议本机应用程序创建Flutter引擎多个实例。...一旦运行了DevTools,选项卡上新错误标记将帮助您跟踪应用程序特定问题。...图片发布 实际应用“反转超大图像”选项 此外,根据大众需求,除了Flutter Inspector“布局资源管理器”显示有关灵活布局详细信息外,我们还添加了显示固定布局功能,使您能够调试各种布局

7.8K20

Flutter Widget框架之旅 顶

介绍 你好,世界 基本小部件 使用材料组件 处理手势 根据输入更改小部件 把它们放在一起 响应小部件生命周期事件 key 全局Key 介绍 Flutter小部件采用现代反应式框架构建,从React获得灵感...name: my_app flutter: uses-material-design: true 为了继承主题数据,许多小部件需要位于MaterialApp才能正常显示。...Flutter,这两种类型对象具有不同生命周期。 小部件是临时对象,用于构建当前状态下应用程序演示文稿。 另一方面,State对象调用build()之间是持久,允许它们记住信息。...更复杂应用程序,小部件层次结构不同部分可能对不同问题负责; 例如,一个小部件可能呈现一个复杂用户界面,其目标是收集特定信息(如日期或位置),而另一个小部件可能会使用该信息来更改整体呈现。...Flutter更改通知通过回调方式“向上”流,而当前状态则“向下”流向呈现无状态小部件。重定向这一流程共同父母是State。

6.7K20

6详解AppBar小部件

AppBar 应用栏是各种应用程序中最常用组件之一。它可用于容纳搜索字段、以及页面之间导航按钮,或者只是页面标题。...由于它是一个如此常用组件,因此 Flutter 为该功能提供了一个名为AppBar专用小部件。 本教程,我们将通过一些实际示例向您展示如何在 Flutter 应用程序自定义 AppBar。...Flutter AppBar 是根据Material Design指南构建应用程序组件。它通常位于屏幕顶部,并且能够在其布局包含其他小部件。...背景颜色 以下代码将 AppBar 背景颜色更改为深橙色。500添加以访问颜色特定阴影,900即最和最亮50。...关于 Flutter AppBar 必须提供所有内容完整演练。我希望这篇文章能帮助你未来所有的 Flutter 应用程序创建漂亮 AppBars。

16.3K10

开始使用-初尝胜果 顶

本页介绍如何“测试驱动器”Flutter:从我们模板创建一个新Flutter应用程序运行它,并学习如何使用Hot Reload进行更改。...项目目录,您应用程序代码位于lib / main.dart运行应用程序 1.找到Android Studio主工具栏: ? 2。...3.单击工具栏Run图标,或调用菜单项Run > Run。 4.如果一切正常,您应该在您设备或模拟器上看到您初学者应用程序: ?...项目目录,您应用程序代码位于lib / main.dart运行应用程序 检查Android设备是否在运行。 如果没有显示,请参阅设置。...$ flutter devices 使用flutter run命令运行应用程序: $ flutter run 如果一切正常应用程序建成后,您应该在您设备或模拟器上看到您初学者应用程序

1.2K30

Flutter 2.8 release 发布,快来看看新特性吧

与往常一样,Flutter 工作第一位就是保证质量,我们花费了大量时间来确保 Flutter 支持设备范围内可以尽可能平稳和稳健地运行。...例如在 Android 上渲染第一帧之前,Flutter 现在 只通知 Dart VM TRIM_LEVEL_RUNNING_CRITICAL 及以上内存压力信号,本地测试,这个更改将低端设备上第一帧时间减少了多达...Profiling 以便更好地了解应用程序性能问题,应用程序启动时启用,2.8 版本现在会将跟踪事件发送到 Android systrace 记录器,即使 Flutter 应用程序构建在发布模式下也会发送这些事件...之前版本, webview_flutter hybrid composition 模式已经可用,但并不是默认设置。...:web,这个支持允许开发者从单个代码库构建 mobile 和 web 应用, Flutter Web 应用程序托管 Web 视图是什么样

4.2K20

谷歌 Flutter 1.17 发布

完全支持MetaliOS设备上,Flutter现在默认情况下使用它,这使您Flutter应用程序大多数时候运行得更快,平均将渲染速度提高了约50%(取决于您工作量)。...,“网络”选项卡将显示Flutter应用程序网络流量。...此选项将您应用程序捆绑到实际上未在您设备上安装通用Android“包装器”,这与正常启动选项不同。此外,某些情况下它不起作用,例如,当您使用访问后台执行插件时。...进行此更改之前,如果您有任何分析错误,“热重装”将不会重装您代码。如果分析错误不会影响您当前正在运行代码(例如在单元测试),那么这可能会令人沮丧。...进行此更改后,分析错误不足以阻止Hot Reload正常运行,而取决于VM编译器错误。

3.5K10

Flutter 1.17版本重磅发布

完全支持MetaliOS设备上,Flutter默认情况下使用它,从而使您Flutter应用程序大多数时候运行得更快,平均使渲染速度提高约50%(取决于您工作量)。...”按钮后,“网络”选项卡将显示Flutter应用程序网络流量。...由于对Dart代码或素材资源更改无需重新构建APK,因此可以使重复flutter运行命令更快地启动。...此选项将您应用程序捆绑到实际上并未在您设备上安装通用Android“包装器”,这与我们正常启动选项不同。此外,某些情况下,例如, 当您使用访问后台执行插件时。...进行此更改后,分析错误不足以阻止Hot Reload正常运行,而取决于VM编译器错误。

2.5K10

flutter windows和linux上运行IOS UI模拟器

之前发视频总是有人留言,我用什么模拟器,今天给大家说一下 我一般用是device_preview这个插件,这个插件闲置是只能做UI上模拟,并没有真正运行环境。...近似您应用程序另一台设备上外观和性能。...插件名称 device_preview https://pub.flutter-io.cn/packages/device_preview 主要特点 从任何设备预览任何设备 更改设备方向 动态系统配置(...语言、模式、文本缩放因子等) 具有可调分辨率和安全区域自由形式设备 保持应用程序状态 插件系统(截图,文件浏览器,...)...可定制插件 快速入门 将您应用程序根小部件包装在 DevicePreview,并将专用builder和locale注入您应用程序

1.8K10

Flutter 2.5正式版发布,带来重大更新

并且,对于 iOS 用户而言,此版本带来了一项重大更新,即在 Apple Silicon M1 Mac 上构建 Flutter 应用程序也可以 ARM iOS 模拟器 (#85642 ) 上运行。...Android 全屏、Material You & 文本编辑快捷方式 从(#81303) 开始, 我们修复了 Android 一系列与全屏模式相关问题,此更改还添加了一种在其他模式下收听全屏更改方法...屏幕底部为用户提供通知。...借助DevTools,我们可以Frames图表中看到页面被渲染完整渲染过程,并且可以应用程序呈现时填充到此图表,从此图表中选择一个帧就可以导航到该帧时间线事件,我们可以使用这些事件来帮助诊断应用程序着色器编译卡顿问题...集成测试是设备上运行整个应用程序一种测试方式,测试代码位于 integration_test 目录,并使用与testWidgets() 单元测试相同功能。

4.3K50

iOS应用黑暗模式设计终极指南(附套件下载)

这意味着打开黑暗模式时,iPhone上所有应用程序都将具有黑暗外观。 因此,作为设计师和开发人员,为您应用程序设计和实现黑暗模式非常重要。苹果已经发布了为您应用程序设计模式的人机交互指南。...不必告诉它在明亮模式显示白色,而在黑暗模式显示黑色。系统会自动判定。 ? 如果要在模式下为元素显示自定义颜色怎么办? 当然,你可以轻松地做到这一点。为每种模式分配自定义颜色即可。...但是,这9种颜色模式模式下略有不同。如果您选择使用这些系统强调颜色,则该应用程序将自动将亮模式色调颜色更改模式色调颜色。 ? 你会发现亮模式模式颜色是稍有差异,请务必注意。...但是如果你要自定义颜色,你必须把黑暗模式和亮色模式颜色都定义出来才行。这里有一些需要注意事项: 尝试选择一种模式模式下均能正常工作颜色(相同RGB值)。...顺便说一句,材质还用于诸如通知和模态之类组件。这是模态中使用材质示例: ? 11 控件或组件 对于控件(Tab),滑块,搜索栏,开关等元素,请尝试使用UI套件组件。

3.2K10

Flutter 2.5正式版发布,带来多项重大更新

[在这里插入图片描述] Android 全屏、Material You & 文本编辑快捷方式 从(#81303) 开始, 我们修复了 Android 一系列与全屏模式相关问题,此更改还添加了一种在其他模式下收听全屏更改方法...屏幕底部为用户提供通知。...[在这里插入图片描述] 借助DevTools,我们可以Frames图表中看到页面被渲染完整渲染过程,并且可以应用程序呈现时填充到此图表,从此图表中选择一个帧就可以导航到该帧时间线事件,我们可以使用这些事件来帮助诊断应用程序着色器编译卡顿问题...集成测试是设备上运行整个应用程序一种测试方式,测试代码位于 integration_test 目录,并使用与testWidgets() 单元测试相同功能。...其他 除此之外,Flutter 2.5重大更改和弃用还有如下一些: 默认拖动滚动设备 v2.2 之后删除了弃用 API 引入包:flutter_lints ThemeData accent

3.5K00

Canonical通过Flutter启用Linux桌面应用程序支持

GitHub和Twitter通知显示将您联系人变成您自己个人社交网络。...Linux上轻松安装Flutter 现在,您已经了解了Flutter桌面类应用程序(尤其是Linux)上运行情况,您将希望使其自己Linux机器上运行。...Flutter项目时,您将获得一个linux子目录,该目录可让您在Linux桌面上运行应用程序: $ flutter create counter $ cd counter $ flutter run...-d linux 您将获得一个运行Flutter上且运行于最新稳定版本GTK +上闪亮Linux新应用程序。...pub.dev上可以找到大多数软件包都是纯Dart,大多数都可以Linux应用程序正常工作。有些软件包(称为插件)包含特定于一个或多个平台本机代码。

2.6K20

Flutter 120hz 高刷新率 Android 和 iOS 上调研总结

如果应用程序需要设置帧速率,那首先需要通过 getSupportedModes() 获取目前屏幕支持模式列表,然后遍历列表,根据找到想要使用分辨率和刷新率 modeId,赋值给窗口preferredDisplayModeId...是 App 向平台设置所需帧率一种方式,因为有时候 App 只想改变刷新率,但是不需要更改其他显示模式如分辨率等。...PS:这里和大家介绍一位 Flutter 大佬, 事实上这个 问题 作为 GDE AlexV525 大佬跟进了很久,上面的插件也是他参与维护,同时也恭喜 大佬获得 Google Open Source...而在 #78117 讨论最终讨论结果就是:Flutter 并不会特别针对这部分厂商去特意做适配,如果需要,你可以通过第三方插件来解决,当然测试,目前大部分设备刷新率支持上还是正常。...同时早期 Flutter IntelliJ 插件也存在 bug ,即使应用程序以 90 fps 运行,Android Studio / IntelliJ Flutter 插件也会给出 60

2.3K30

Flutter生命周期

「initState」 订阅通知 「didUpdateWidget」 ,如果需要替换旧组件,则在旧对象取消订阅,并在新对象订阅通知。 并在 「dispose」 取消订阅。...另外,当此 「State」 对象依赖项更改时被调用,比如其所依赖 「InheritedWidget」 发生变化时, Framework 会调用此方法通知组件发生变化。...「didChangeAppLifecycleState」 方法回调来源于系统通知(notifications),正常情况下,App是能正常接收到这些通知,但有的情况下是无法接收到通知,比如用户强制关机...「pause」:应用程序不可见且无法响应用户输入,运行在后台。处于此状态时,引擎将不会调用 「Window.onBeginFrame」 和 「Window.onDrawFrame」。...onResume」 功能,用 didChangeAppLifecycleState 是无法实现此功能,didChangeAppLifecycleState 是对应于整个应用程序,而不是 Flutter

1.6K30

Flutter 密码锁定屏幕

在任何情况下,如最新Andriod先决条件所指出那样,您需要在生物识别认证被破坏或受损偶然机会上提供选择性认证策略。 在在本文中,我们将探讨「Flutter「密码锁定屏幕」。...它将显示flutter应用程序中使用密码屏幕时如何解锁屏幕。 该演示视频演示了如何在Flutter创建密码锁定屏幕。...它显示了如何在flutter应用程序中使用「passcode_screen」软件包来运行密码锁定屏幕。它显示密码输入屏幕以解锁屏幕。它会显示设备上。...当我们运行应用程序时,我们应该获得屏幕输出,如屏幕下方截图所示。...当我们运行应用程序时,我们应该获得屏幕输出,如屏幕下方截图所示。 img 不要忘记关闭流。用户可以处理它。

4.9K30
领券