424 lines
14 KiB
Dart
424 lines
14 KiB
Dart
import 'package:flutter/material.dart';
|
||
|
||
/// 应用主题：橙白「双橙策略」，回归并与旧版「云端手机端」视觉延续。
|
||
///
|
||
/// 设计依据：docs/手机端UI优化方案-v2.md
|
||
/// - 行动色 [brandPrimary] (#C2410C) 承载白字（对比度 5.18 ✅），用于主按钮 / 导航选中 / 可点文字。
|
||
/// - 品牌亮橙 [brandOrange] (#FF914D) 仅用于大色块 / 渐变 / 图表，绝不配白字（对比度仅 2.23 ❌）。
|
||
/// - 辅金 [accentGold] (#FFBE58) 用于高亮 / 星级 / 推荐位。
|
||
class AppTheme {
|
||
AppTheme._();
|
||
|
||
/// 行动色（主色）。
|
||
static const Color brandPrimary = Color(0xFFC2410C);
|
||
|
||
/// 品牌亮橙（仅大色块 / 渐变 / 图表）。
|
||
static const Color brandOrange = Color(0xFFFF914D);
|
||
|
||
/// 辅金。
|
||
static const Color accentGold = Color(0xFFFFBE58);
|
||
|
||
static const ColorScheme _light = ColorScheme(
|
||
brightness: Brightness.light,
|
||
primary: Color(0xFFC2410C),
|
||
onPrimary: Color(0xFFFFFFFF),
|
||
primaryContainer: Color(0xFFFFD3B3),
|
||
onPrimaryContainer: Color(0xFF4A1D00),
|
||
secondary: Color(0xFF8A5A3A),
|
||
onSecondary: Color(0xFFFFFFFF),
|
||
secondaryContainer: Color(0xFFF5DFCB),
|
||
onSecondaryContainer: Color(0xFF5A3A22),
|
||
tertiary: Color(0xFF9A6000),
|
||
onTertiary: Color(0xFFFFFFFF),
|
||
tertiaryContainer: Color(0xFFFFE0A3),
|
||
onTertiaryContainer: Color(0xFF5C3D00),
|
||
error: Color(0xFFB02A20),
|
||
onError: Color(0xFFFFFFFF),
|
||
errorContainer: Color(0xFFFFDDD8),
|
||
onErrorContainer: Color(0xFF7A2A22),
|
||
surface: Color(0xFFFCFAF8),
|
||
onSurface: Color(0xFF1A1614),
|
||
onSurfaceVariant: Color(0xFF6E655C),
|
||
surfaceContainerLowest: Color(0xFFFFFFFF),
|
||
surfaceContainerLow: Color(0xFFF7F3EF),
|
||
surfaceContainer: Color(0xFFF2EDE8),
|
||
surfaceContainerHigh: Color(0xFFECE5DF),
|
||
surfaceContainerHighest: Color(0xFFE5DED7),
|
||
outline: Color(0xFF8A8178),
|
||
outlineVariant: Color(0xFFDCCFC2),
|
||
shadow: Color(0xFF5C2E12),
|
||
scrim: Color(0xFF1A1614),
|
||
inverseSurface: Color(0xFF2E2823),
|
||
onInverseSurface: Color(0xFFF7EFE9),
|
||
inversePrimary: Color(0xFFFFB487),
|
||
surfaceTint: Color(0xFFC2410C),
|
||
);
|
||
|
||
static const ColorScheme _dark = ColorScheme(
|
||
brightness: Brightness.dark,
|
||
primary: Color(0xFFFFB487),
|
||
onPrimary: Color(0xFF542000),
|
||
primaryContainer: Color(0xFF63300D),
|
||
onPrimaryContainer: Color(0xFFFFDCC2),
|
||
secondary: Color(0xFFE8C39B),
|
||
onSecondary: Color(0xFF542000),
|
||
secondaryContainer: Color(0xFF5A3A22),
|
||
onSecondaryContainer: Color(0xFFFFDCC2),
|
||
tertiary: Color(0xFFF2BE62),
|
||
onTertiary: Color(0xFF542000),
|
||
tertiaryContainer: Color(0xFF5C3D00),
|
||
onTertiaryContainer: Color(0xFFFFDCC2),
|
||
error: Color(0xFFFF8474),
|
||
onError: Color(0xFF5A1610),
|
||
errorContainer: Color(0xFF7A2A22),
|
||
onErrorContainer: Color(0xFFFFC9C2),
|
||
surface: Color(0xFF16130F),
|
||
onSurface: Color(0xFFF3E9E2),
|
||
onSurfaceVariant: Color(0xFFC4B8AE),
|
||
surfaceContainerLowest: Color(0xFF0F0D0A),
|
||
surfaceContainerLow: Color(0xFF1E1A16),
|
||
surfaceContainer: Color(0xFF23201B),
|
||
surfaceContainerHigh: Color(0xFF2D2924),
|
||
surfaceContainerHighest: Color(0xFF38332D),
|
||
outline: Color(0xFF7A7068),
|
||
outlineVariant: Color(0xFF453F39),
|
||
shadow: Color(0xFF000000),
|
||
scrim: Color(0xFF0F0D0A),
|
||
inverseSurface: Color(0xFFF3E9E2),
|
||
onInverseSurface: Color(0xFF2E2823),
|
||
inversePrimary: Color(0xFFC2410C),
|
||
surfaceTint: Color(0xFFFFB487),
|
||
);
|
||
|
||
/// 浅色主题（橙白品牌主场）。
|
||
static ThemeData light() => _base(_light).copyWith(
|
||
extensions: const <ThemeExtension<dynamic>>[AppSemanticColors.light],
|
||
);
|
||
|
||
/// 深色主题（暖化 surface，主色提亮为 #FFB487）。
|
||
static ThemeData dark() => _base(_dark).copyWith(
|
||
extensions: const <ThemeExtension<dynamic>>[AppSemanticColors.dark],
|
||
);
|
||
|
||
static ThemeData _base(ColorScheme scheme) {
|
||
return ThemeData(
|
||
useMaterial3: true,
|
||
brightness: scheme.brightness,
|
||
colorScheme: scheme,
|
||
scaffoldBackgroundColor: scheme.surface,
|
||
// 暖棕低透明阴影，替代默认偏硬的黑色阴影（云感）。
|
||
shadowColor: const Color(0x245C2E12),
|
||
materialTapTargetSize: MaterialTapTargetSize.padded,
|
||
visualDensity: VisualDensity.standard,
|
||
extensions: const <ThemeExtension<dynamic>>[],
|
||
iconTheme: IconThemeData(
|
||
size: AppIconSize.regular,
|
||
color: scheme.onSurfaceVariant,
|
||
),
|
||
appBarTheme: AppBarTheme(
|
||
centerTitle: true,
|
||
backgroundColor: scheme.surface,
|
||
foregroundColor: scheme.onSurface,
|
||
elevation: 0,
|
||
// 滚动后轻微浮起，呼应云影。
|
||
scrolledUnderElevation: 3,
|
||
shadowColor: const Color(0x245C2E12),
|
||
),
|
||
cardTheme: CardTheme(
|
||
elevation: 0,
|
||
clipBehavior: Clip.antiAlias,
|
||
shape: RoundedRectangleBorder(
|
||
borderRadius: BorderRadius.circular(AppRadius.lg),
|
||
),
|
||
),
|
||
chipTheme: ChipThemeData(
|
||
backgroundColor: scheme.surfaceContainerHighest,
|
||
labelStyle: TextStyle(color: scheme.onSurface),
|
||
selectedColor: scheme.primaryContainer,
|
||
checkmarkColor: scheme.onPrimaryContainer,
|
||
shape: RoundedRectangleBorder(
|
||
borderRadius: BorderRadius.circular(AppRadius.full),
|
||
),
|
||
),
|
||
inputDecorationTheme: InputDecorationTheme(
|
||
border: OutlineInputBorder(
|
||
borderRadius: BorderRadius.circular(AppRadius.md),
|
||
),
|
||
filled: true,
|
||
fillColor: scheme.surfaceContainerHighest,
|
||
labelStyle: TextStyle(color: scheme.onSurfaceVariant),
|
||
hintStyle: TextStyle(color: scheme.onSurfaceVariant),
|
||
errorStyle: TextStyle(color: scheme.error),
|
||
contentPadding:
|
||
const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
|
||
),
|
||
snackBarTheme: const SnackBarThemeData(
|
||
behavior: SnackBarBehavior.floating,
|
||
),
|
||
// 全局兜底：30 处 showModalBottomSheet 一次性拿到把手 / 安全区 / 顶部圆角 / 限宽。
|
||
bottomSheetTheme: BottomSheetThemeData(
|
||
showDragHandle: true,
|
||
backgroundColor: scheme.surface,
|
||
surfaceTintColor: scheme.surfaceTint,
|
||
modalBackgroundColor: scheme.surface,
|
||
elevation: 0,
|
||
clipBehavior: Clip.antiAlias,
|
||
shape: RoundedRectangleBorder(borderRadius: AppRadius.sheetTop),
|
||
constraints: const BoxConstraints(maxWidth: 640),
|
||
),
|
||
navigationBarTheme: NavigationBarThemeData(
|
||
height: 72,
|
||
elevation: 0,
|
||
backgroundColor: scheme.surfaceContainer,
|
||
surfaceTintColor: scheme.surfaceTint,
|
||
indicatorColor: scheme.secondaryContainer,
|
||
indicatorShape: const StadiumBorder(),
|
||
labelBehavior: NavigationDestinationLabelBehavior.alwaysShow,
|
||
iconTheme: WidgetStateProperty.resolveWith((states) => IconThemeData(
|
||
size: 24,
|
||
color: states.contains(WidgetState.selected)
|
||
? scheme.onSecondaryContainer
|
||
: scheme.onSurfaceVariant,
|
||
)),
|
||
labelTextStyle: WidgetStateProperty.resolveWith((states) => TextStyle(
|
||
fontSize: 12,
|
||
fontWeight: states.contains(WidgetState.selected)
|
||
? FontWeight.w600
|
||
: FontWeight.w500,
|
||
color: states.contains(WidgetState.selected)
|
||
? scheme.onSurface
|
||
: scheme.onSurfaceVariant,
|
||
)),
|
||
),
|
||
navigationRailTheme: NavigationRailThemeData(
|
||
backgroundColor: scheme.surfaceContainer,
|
||
elevation: 0,
|
||
indicatorColor: scheme.secondaryContainer,
|
||
indicatorShape: const StadiumBorder(),
|
||
minWidth: 72,
|
||
groupAlignment: -0.2,
|
||
labelType: NavigationRailLabelType.all,
|
||
selectedIconTheme:
|
||
IconThemeData(size: 24, color: scheme.onSecondaryContainer),
|
||
unselectedIconTheme:
|
||
IconThemeData(size: 24, color: scheme.onSurfaceVariant),
|
||
selectedLabelTextStyle: TextStyle(
|
||
fontSize: 12,
|
||
fontWeight: FontWeight.w600,
|
||
color: scheme.onSurface,
|
||
),
|
||
unselectedLabelTextStyle: TextStyle(
|
||
fontSize: 12,
|
||
color: scheme.onSurfaceVariant,
|
||
),
|
||
),
|
||
dialogTheme: DialogThemeData(
|
||
shape: RoundedRectangleBorder(
|
||
borderRadius: BorderRadius.circular(AppRadius.xxl),
|
||
),
|
||
backgroundColor: scheme.surfaceContainerLow,
|
||
surfaceTintColor: scheme.surfaceTint,
|
||
),
|
||
iconButtonTheme: IconButtonThemeData(
|
||
style: IconButton.styleFrom(
|
||
minimumSize: const Size(48, 48),
|
||
tapTargetSize: MaterialTapTargetSize.padded,
|
||
padding: EdgeInsets.zero,
|
||
),
|
||
),
|
||
filledButtonTheme: FilledButtonThemeData(
|
||
style: FilledButton.styleFrom(
|
||
minimumSize: const Size(64, 52),
|
||
shape: RoundedRectangleBorder(
|
||
borderRadius: BorderRadius.circular(AppRadius.lg),
|
||
),
|
||
),
|
||
),
|
||
elevatedButtonTheme: ElevatedButtonThemeData(
|
||
style: ElevatedButton.styleFrom(
|
||
minimumSize: const Size(64, 52),
|
||
shape: RoundedRectangleBorder(
|
||
borderRadius: BorderRadius.circular(AppRadius.lg),
|
||
),
|
||
),
|
||
),
|
||
outlinedButtonTheme: OutlinedButtonThemeData(
|
||
style: OutlinedButton.styleFrom(
|
||
minimumSize: const Size(64, 52),
|
||
shape: RoundedRectangleBorder(
|
||
borderRadius: BorderRadius.circular(AppRadius.lg),
|
||
),
|
||
),
|
||
),
|
||
textButtonTheme: TextButtonThemeData(
|
||
style: TextButton.styleFrom(
|
||
shape: RoundedRectangleBorder(
|
||
borderRadius: BorderRadius.circular(AppRadius.lg),
|
||
),
|
||
),
|
||
),
|
||
);
|
||
}
|
||
}
|
||
|
||
/// 圆角梯度：非胶囊、四角一致、克制感（呼应 logo ≈3% 圆角）。
|
||
class AppRadius {
|
||
static const double xs = 4; // 进度条、缩略图角
|
||
static const double sm = 8; // Chip、SnackBar、小标签
|
||
static const double md = 12; // 输入框（沿用现值，保持手感连续）
|
||
static const double lg = 16; // ★ 标准卡片、按钮（主力值）
|
||
static const double xl = 20; // 分组容器、大 Banner 卡
|
||
static const double xxl = 28; // ★ 底部弹窗顶部两角（云朵弧线核心表达）
|
||
static const double full = 999; // 仅状态 Chip / 头像 / pill
|
||
|
||
/// 底部弹窗顶部两角大圆角、底部直角（云朵上缘多弧、下缘平缓）。
|
||
static const BorderRadius sheetTop =
|
||
BorderRadius.vertical(top: Radius.circular(xxl));
|
||
|
||
AppRadius._();
|
||
}
|
||
|
||
/// 云感暖阴影：模糊:偏移 ≈4:1，暖棕而非纯黑。
|
||
class AppShadows {
|
||
static const List<BoxShadow> xs = [
|
||
BoxShadow(
|
||
color: Color(0x0F5C2E12),
|
||
blurRadius: 8,
|
||
offset: Offset(0, 2),
|
||
spreadRadius: -1,
|
||
),
|
||
];
|
||
static const List<BoxShadow> sm = [
|
||
BoxShadow(
|
||
color: Color(0x145C2E12),
|
||
blurRadius: 12,
|
||
offset: Offset(0, 4),
|
||
spreadRadius: -2,
|
||
),
|
||
];
|
||
static const List<BoxShadow> md = [
|
||
BoxShadow(
|
||
color: Color(0x1A5C2E12),
|
||
blurRadius: 20,
|
||
offset: Offset(0, 8),
|
||
spreadRadius: -4,
|
||
),
|
||
];
|
||
static const List<BoxShadow> lg = [
|
||
BoxShadow(
|
||
color: Color(0x245C2E12),
|
||
blurRadius: 32,
|
||
offset: Offset(0, 12),
|
||
spreadRadius: -6,
|
||
),
|
||
];
|
||
static const List<BoxShadow> xl = [
|
||
BoxShadow(
|
||
color: Color(0x245C2E12),
|
||
blurRadius: 48,
|
||
offset: Offset(0, 20),
|
||
spreadRadius: -8,
|
||
),
|
||
];
|
||
|
||
/// 深色：暖色阴影在暗底不可见，改用纯黑 + 描边。
|
||
static const List<BoxShadow> dark = [
|
||
BoxShadow(
|
||
color: Color(0x66000000),
|
||
blurRadius: 24,
|
||
offset: Offset(0, 8),
|
||
spreadRadius: -4,
|
||
),
|
||
];
|
||
|
||
AppShadows._();
|
||
}
|
||
|
||
/// 图标尺寸栅格（24dp 为默认）。
|
||
class AppIconSize {
|
||
static const double inline = 16; // 正文行内
|
||
static const double dense = 20; // 密集信息行
|
||
static const double regular = 24; // ★ 默认：列表 leading、按钮内、AppBar actions
|
||
static const double medium = 28; // 卡片强调图标
|
||
static const double large = 32; // 列表主 leading
|
||
static const double display = 48; // 空状态 / 结果页
|
||
static const double hero = 64; // 关于页 logo、引导页
|
||
|
||
AppIconSize._();
|
||
}
|
||
|
||
/// 品牌视觉常量：logo 云朵橙→金渐变。
|
||
class AppBrand {
|
||
static const Color cloud = Color(0xFFFF914D); // logo 主色
|
||
static const Color cloudGold = Color(0xFFFFBE58); // logo 金黄
|
||
static const Color onCloud = Color(0xFF3D1A00); // 亮橙底上的深棕文字（6.99 ✅）
|
||
|
||
/// logo 橙→金渐变（云朵受光）。
|
||
static const LinearGradient cloudGradient = LinearGradient(
|
||
begin: Alignment.topLeft,
|
||
end: Alignment.bottomRight,
|
||
colors: [Color(0xFFFF914D), Color(0xFFFFBE58)],
|
||
);
|
||
|
||
AppBrand._();
|
||
}
|
||
|
||
/// 语义色（成功 / 警告 / 错误 / 信息），通过 ThemeExtension 暴露。
|
||
///
|
||
/// 警告用琥珀黄而非橙，避免与品牌橙语义打架。
|
||
class AppSemanticColors extends ThemeExtension<AppSemanticColors> {
|
||
const AppSemanticColors({
|
||
required this.success,
|
||
required this.successContainer,
|
||
required this.onSuccessContainer,
|
||
required this.warning,
|
||
required this.warningContainer,
|
||
required this.onWarningContainer,
|
||
required this.info,
|
||
required this.infoContainer,
|
||
required this.onInfoContainer,
|
||
});
|
||
|
||
final Color success;
|
||
final Color successContainer;
|
||
final Color onSuccessContainer;
|
||
final Color warning;
|
||
final Color warningContainer;
|
||
final Color onWarningContainer;
|
||
final Color info;
|
||
final Color infoContainer;
|
||
final Color onInfoContainer;
|
||
|
||
static const light = AppSemanticColors(
|
||
success: Color(0xFF1E7A4E),
|
||
successContainer: Color(0xFFD3EDDD),
|
||
onSuccessContainer: Color(0xFF1E5138),
|
||
warning: Color(0xFF8A5C00),
|
||
warningContainer: Color(0xFFFFE9B8),
|
||
onWarningContainer: Color(0xFF5C4100),
|
||
info: Color(0xFF0B6397),
|
||
infoContainer: Color(0xFFD7E9FA),
|
||
onInfoContainer: Color(0xFF1A4763),
|
||
);
|
||
|
||
static const dark = AppSemanticColors(
|
||
success: Color(0xFF5FD398),
|
||
successContainer: Color(0xFF1E5138),
|
||
onSuccessContainer: Color(0xFFA8E6C4),
|
||
warning: Color(0xFFF0BE4E),
|
||
warningContainer: Color(0xFF5C4100),
|
||
onWarningContainer: Color(0xFFFFDCA8),
|
||
info: Color(0xFF7FC4F0),
|
||
infoContainer: Color(0xFF1A4763),
|
||
onInfoContainer: Color(0xFFB8DCF5),
|
||
);
|
||
|
||
@override
|
||
ThemeExtension<AppSemanticColors> copyWith() => this;
|
||
|
||
@override
|
||
ThemeExtension<AppSemanticColors> lerp(
|
||
covariant ThemeExtension<AppSemanticColors>? other, double t) =>
|
||
other ?? this;
|
||
}
|