【新手学习笔记DAY7】Flutter for OpenHarmony:AtomGit口袋工具启用深色模式
·
欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net
本文是我参考其他人的文章后的实践
参考文章链接在这：
在开源鸿蒙跨平台开发的生态中，Flutter for OpenHarmony 成为了连接 Flutter 生态中，OpenHarmony 生态的重要桥梁，凭借一次开发多端部署的特性，大幅降低了跨端开发的成本。本次实战将详细解析如何基于 Flutter for OpenHarmony 构建一款简洁高效的待办事项应用，从开发环境调试、核心功能搭建到多端适配优化，全方位讲解开发中的关键要点与实操技巧，帮助开发者快速上手这类轻量应用的开发流程。
本次开发将依托 OpenHarmony 的多端部署能力，结合 Flutter 的高性能 UI 渲染优势，让待办事项应用能够在 OpenHarmony 生态下的手机、平板、智慧屏等设备上流畅运行。开发过程中会重点讲解 Flutter 与 OpenHarmony 的基础交互逻辑、待办事项的增删改查核心功能实现、页面状态管理、数据本地缓存以及简单的 UI 美化适配，兼顾功能性与易用性，打造出符合用户使用习惯的待办应用。
一、首先我们先把深色模式添加到面版那里具体操作如下：
先打开我们的模拟器
下拉添加深色模式
二、具体操作
1、创建文件
新增一个app_theme.dart文件，具体路径是lib/core/app_theme.dart，文件创建完毕后将下列代码添加到该文件中。
import 'package:flutter/material.dart';
/// 统一管理浅色（Light）与深色（Dark）主题的工具类。
/// 通过 Material 3 的 ColorScheme.fromSeed 自动生成协调配色，
/// 并为常用组件（AppBar、Card、Input 等）定制统一的视觉风格。
/// 特别适用于需要适配系统夜间模式的场景（如 HarmonyOS）。
class AppTheme {
// 私有构造函数：防止外部实例化此类（仅作为静态工具类使用）
AppTheme._();
/// 主题的“种子颜色”（Seed Color）。
/// Material 3 会基于此颜色自动生成整套配色方案（primary、onPrimary、surface 等）。
/// 这里使用 Indigo（靛蓝）作为主色调，可根据需求替换。
static const Color _seedColor = Colors.indigo;
/// 返回浅色主题（Brightness.light）
static ThemeData light() => _theme(Brightness.light);
/// 返回深色主题（Brightness.dark）
static ThemeData dark() => _theme(Brightness.dark);
/// 内部私有方法：根据指定的亮度（亮/暗）生成完整的 ThemeData 主题配置。
///
/// [brightness]：指定主题是亮色还是暗色。
static ThemeData _theme(Brightness brightness) {
// 基于种子色和亮度，自动生成一套符合 Material 3 规范的配色方案
final colorScheme = ColorScheme.fromSeed(
seedColor: _seedColor,
brightness: brightness, // 决定生成的是浅色还是深色配色
);
// 判断当前是否为深色模式，用于后续微调某些颜色的透明度
final isDark = brightness == Brightness.dark;
// 构建完整的 ThemeData 对象
return ThemeData(
// 使用自动生成的配色方案
colorScheme: colorScheme,
// 启用 Material Design 3（Material You）风格
useMaterial3: true,
// 设置视觉密度为标准（不压缩 UI 元素间距）
visualDensity: VisualDensity.standard,
// 明确指定主题亮度（影响滚动条、弹窗等系统组件）
brightness: brightness,
// Scaffold 背景色使用 surface（Material 3 中代表“纸张”表面的颜色）
scaffoldBackgroundColor: colorScheme.surface,
// 配置 AppBar（顶部导航栏）样式
appBarTheme: AppBarTheme(
backgroundColor: colorScheme.surface, // 背景使用 surface 色
foregroundColor: colorScheme.onSurface, // 文字/图标使用 onSurface 色
centerTitle: true, // 标题居中
elevation: 0, // 无阴影（M3 推荐用颜色区分层级而非阴影）
),
// 配置底部导航栏（NavigationBar）样式
navigationBarTheme: NavigationBarThemeData(
backgroundColor: colorScheme.surfaceContainerHigh, // 使用高一级容器色，略深于 surface
indicatorColor: colorScheme.primary.withOpacity(
isDark ? 0.35 : 0.2, // 深色模式下指示器更不透明，保证可见性
),
labelBehavior: NavigationDestinationLabelBehavior.alwaysShow, // 始终显示标签文字
),
// 配置 Card（卡片）样式
cardTheme: CardTheme(
color: colorScheme.surfaceContainerLowest, // 最浅的容器色，用于卡片背景
elevation: 0, // 无阴影（靠颜色层次表达层级）
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20), // 圆角 20，现代感强
),
),
// 配置输入框（TextField 等）的装饰样式
inputDecorationTheme: InputDecorationTheme(
// 默认边框样式（未聚焦）
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(16),
borderSide: BorderSide(color: colorScheme.outlineVariant),
),
// 启用状态下的边框（同默认）
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(16),
borderSide: BorderSide(color: colorScheme.outlineVariant),
),
// 聚焦状态下的边框（高亮主色）
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(16),
borderSide: BorderSide(color: colorScheme.primary, width: 1.4),
),
filled: true, // 启用填充背景
fillColor: colorScheme.surfaceContainerLowest, // 填充色使用最浅容器色
// 标签文字颜色（如 "用户名"）
labelStyle: TextStyle(color: colorScheme.onSurfaceVariant),
// 提示文字颜色（如 "请输入..."），稍透明
hintStyle: TextStyle(color: colorScheme.onSurfaceVariant.withOpacity(0.7)),
// 前缀图标颜色（如 🔍）
prefixIconColor: colorScheme.onSurfaceVariant,
),
// 配置 Chip（标签/徽章）样式
chipTheme: ChipThemeData(
backgroundColor: colorScheme.surfaceContainerHigh, // 背景色
selectedColor: colorScheme.primary.withOpacity(0.2), // 选中时的半透主色背景
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(24), // 更大圆角，柔和
),
labelStyle: TextStyle(color: colorScheme.onSurface), // 文字颜色
),
// 配置 Divider（分割线）样式
dividerTheme: DividerThemeData(
color: colorScheme.outlineVariant.withOpacity(0.7), // 使用 outlineVariant 并降低透明度
thickness: 1, // 线条粗细
),
);
}
}2、修改文件
2.1修改main.dart文件
MaterialApp 跟随系统模式，可同时拥有亮/暗主题，并通过 ThemeMode.system 跟随 HarmonyOS/Windows 的系统设置：
原代码：
return MaterialApp(
title: 'GitCode 口袋工具',
theme: ThemeData(
colorSchemeSeed: Colors.indigo,
useMaterial3: true,
visualDensity: VisualDensity.standard,
),
home: const MainNavigationPage(),
debugShowCheckedModeBanner: false,
);修改后的代码：
return MaterialApp(
title: 'GitCode 口袋工具',
theme: AppTheme.light(),
darkTheme: AppTheme.dark(),
themeMode: ThemeMode.system,
home: const MainNavigationPage(),
);记得添加导入文件，否则会报错
import 'package:gitcode_pocket_tool/core/app_theme.dart';
2.2修改search_page.dart文件
原代码：
return _InfoBanner(
icon: Icons.error_outline,
background: Colors.red.withValues(alpha: 0.08),
textColor: Colors.red.shade700,
message: _errorMessage!,
);修改后的代码：
return _InfoBanner(
icon: Icons.error_outline,
background: scheme.errorContainer,
textColor: scheme.onErrorContainer,
message: _errorMessage!,
);三、运行示例
欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net
Agent 垂直技术社区，欢迎活跃、内容共建。
更多推荐
8
0- 0
已为社区贡献4条内容
所有评论(0)