进阶 flutter.dev 2026-10-10 05:26:19 · 6 阅读

第23章 Flutter 中实现 Android 深色主题指南

Android Dark Theme in Flutter

学习如何为 Flutter 应用添加 Android 深色主题支持,并响应系统亮度设置。

Matt Carroll

2019 年 5 月 15 日 · 2 分钟阅读

rss_feed

分享到 X 分享到 Bluesky 分享到 LinkedIn

Android Dark Theme in Flutter

一周前在 Google I/O 2019 大会上,Android 团队宣布 Android Q 支持 Dark Theme,这是一种由用户手动切换的系统级深色 UI 模式。这引出了一个疑问:Flutter 何时会支持这一出色的新功能?你可能会惊讶地发现,Flutter 早在二月份就支持了深色主题。以下是如何使用的方法。

首先,我们从一个典型的 MaterialApp 开始,它负责为其余 UI 建立主题。下面展示了一个典型的普通应用在支持 Dark Theme 之前是如何定义其主题的。

dart MaterialApp( theme: ThemeData( brightness: Brightness.light, primaryColor: Colors.red, ), );

在 Flutter 中,我们为 MaterialApp 引入了 darkTheme 属性,允许你指定第二个独立主题,专门用于 Android 的 Dark Theme 功能。让我们为 MaterialApp 的 darkTheme 引入一个设置为 Brightness.dark 的主题。

dart MaterialApp( theme: ThemeData( brightness: Brightness.light, primaryColor: Colors.red, ), darkTheme: ThemeData( brightness: Brightness.dark, ), );

搞定!现在,当你在系统下拉菜单中切换 Dark Theme 时,你的 Flutter 应用会自动从普通的 theme 切换到你的 darkTheme!

得益于 Flutter 使用代码构建 UI,更新应用以支持这个出色的新功能,只需在你的 widget 树中添加一个新属性即可。无需更新 XML 样式,无需更新 CSS,只需一个普通的 Dart 参数。

在 Flutter 中,无需惧怕黑暗。

More from Flutter

How I converted GenLatte to fullstack Dart And reduced the app's server bill

Craig Labenz

2026 年 9 月 22 日 · 7 分钟阅读

Quick, reliable calculations with A2UI's Client-Side Functions

了解客户端函数如何允许代理将本地操作直接委托给运行在用户设备上的 Dart 代码。

Andrew Brogdon

2026 年 8 月 28 日 · 5 分钟阅读

评论 (0)