258 lines
8.9 KiB
Dart
258 lines
8.9 KiB
Dart
import 'package:flutter/material.dart';
|
||
import 'package:flutter_screenutil/flutter_screenutil.dart';
|
||
import 'package:new_learn/core/config/app_config.dart';
|
||
|
||
/// ============================================================
|
||
/// 【SeedPaletteDemo】Seed 色板 —— 验证"主题 seed 是否生效"的演示页
|
||
///
|
||
/// 一、原理：
|
||
/// MaterialApp 的 theme.colorSchemeSeed（来自 AppConfig.theme.seedColor）
|
||
/// 会自动生成整套 ColorScheme（primary/secondary/tertiary/...）。
|
||
/// 页面里【不指定颜色】的 Material 组件，颜色全部取自这套色板：
|
||
/// FilledButton/Checkbox/Switch/Radio/进度圈/聚焦输入框 等。
|
||
/// 所以换一个品牌（seed 不同），整页组件整体变色 —— 这就是
|
||
/// "seed 驱动全局 Material 色板" 的直接证明。
|
||
///
|
||
/// 二、怎么验证：
|
||
/// flutter run → 本页所有组件是 SkyBlue 蓝
|
||
/// flutter run --dart-define=BRAND=chucai → 本页所有组件变 Red 红
|
||
///
|
||
/// 三、对比理解（对照登录页为什么不变色）：
|
||
/// 本页组件【没写死颜色】→ 跟随 seed 变；
|
||
/// 登录页所有颜色写死 Color(0xFF3B82F6) 等 → 永远蓝色，不随主题走。
|
||
/// ============================================================
|
||
class SeedPaletteDemoPage extends StatefulWidget {
|
||
const SeedPaletteDemoPage({super.key});
|
||
|
||
@override
|
||
State<SeedPaletteDemoPage> createState() => _SeedPaletteDemoPageState();
|
||
}
|
||
|
||
class _SeedPaletteDemoPageState extends State<SeedPaletteDemoPage> {
|
||
final _focusController = TextEditingController();
|
||
|
||
bool _checked = true;
|
||
bool _switched = true;
|
||
int _chipSelected = 1;
|
||
|
||
@override
|
||
void dispose() {
|
||
// 输入框 controller 必须在 dispose 释放（防内存泄漏）
|
||
_focusController.dispose();
|
||
super.dispose();
|
||
}
|
||
|
||
@override
|
||
Widget build(BuildContext context) {
|
||
final brandTheme = AppConfig.theme;
|
||
|
||
return Scaffold(
|
||
appBar: AppBar(
|
||
title: const Text('Seed 色板'),
|
||
centerTitle: true,
|
||
),
|
||
body: ListView(
|
||
padding: EdgeInsets.all(16.w),
|
||
children: [
|
||
// ─── ① 当前品牌 / seed 信息卡 ───
|
||
_sectionTitle('① 当前生效的 seed'),
|
||
Container(
|
||
padding: EdgeInsets.all(16.w),
|
||
decoration: BoxDecoration(
|
||
color: Colors.white,
|
||
borderRadius: BorderRadius.circular(12.r),
|
||
border: Border.all(color: const Color(0xFFEEF1F5)),
|
||
),
|
||
child: Row(
|
||
children: [
|
||
// seed 色块：就是 AppConfig.theme.seedColor
|
||
Container(
|
||
width: 56.w,
|
||
height: 56.h,
|
||
decoration: BoxDecoration(
|
||
color: brandTheme.seedColor,
|
||
borderRadius: BorderRadius.circular(12.r),
|
||
),
|
||
),
|
||
SizedBox(width: 16.w),
|
||
Expanded(
|
||
child: Column(
|
||
crossAxisAlignment: CrossAxisAlignment.start,
|
||
children: [
|
||
Text(
|
||
AppConfig.appName,
|
||
style: TextStyle(
|
||
fontSize: 16.sp,
|
||
fontWeight: FontWeight.w600,
|
||
color: const Color(0xFF333333),
|
||
),
|
||
),
|
||
SizedBox(height: 4.h),
|
||
Text(
|
||
'主题 ${brandTheme.name} · seed '
|
||
'${_hex(brandTheme.seedColor)}',
|
||
style: TextStyle(
|
||
fontSize: 12.sp,
|
||
color: const Color(0xFF999999),
|
||
),
|
||
),
|
||
],
|
||
),
|
||
),
|
||
],
|
||
),
|
||
),
|
||
SizedBox(height: 24.h),
|
||
|
||
// ─── ② 组件区说明 ───
|
||
_sectionTitle('② 下列组件【未写死颜色】'),
|
||
_tipCard('它们的颜色全部取自 colorSchemeSeed 自动生成的色板。'
|
||
'跑不同品牌包，下面所有组件整体变色。'),
|
||
|
||
// ─── ③ 按钮组 ───
|
||
_sectionTitle('按钮（默认取 primary）'),
|
||
Row(
|
||
children: [
|
||
FilledButton(
|
||
onPressed: () {},
|
||
child: const Text('FilledButton'),
|
||
),
|
||
SizedBox(width: 12.w),
|
||
OutlinedButton(
|
||
onPressed: () {},
|
||
child: const Text('OutlinedButton'),
|
||
),
|
||
SizedBox(width: 12.w),
|
||
TextButton(
|
||
onPressed: () {},
|
||
child: const Text('TextButton'),
|
||
),
|
||
],
|
||
),
|
||
SizedBox(height: 24.h),
|
||
|
||
// ─── ④ 勾选 / 开关 / 选择标签 ───
|
||
_sectionTitle('勾选 / 开关 / 选择标签（选中色取自 seed 色板）'),
|
||
Row(
|
||
children: [
|
||
Checkbox(
|
||
value: _checked,
|
||
onChanged: (v) => setState(() => _checked = v!),
|
||
),
|
||
const Text('Checkbox'),
|
||
SizedBox(width: 24.w),
|
||
Switch(
|
||
value: _switched,
|
||
onChanged: (v) => setState(() => _switched = v),
|
||
),
|
||
SizedBox(width: 12.w),
|
||
const Text('Switch'),
|
||
SizedBox(width: 24.w),
|
||
ChoiceChip(
|
||
label: const Text('选项1'),
|
||
selected: _chipSelected == 1,
|
||
onSelected: (_) => setState(() => _chipSelected = 1),
|
||
),
|
||
SizedBox(width: 12.w),
|
||
ChoiceChip(
|
||
label: const Text('选项2'),
|
||
selected: _chipSelected == 2,
|
||
onSelected: (_) => setState(() => _chipSelected = 2),
|
||
),
|
||
],
|
||
),
|
||
SizedBox(height: 24.h),
|
||
|
||
// ─── ⑤ 进度指示器 ───
|
||
_sectionTitle('进度指示器（默认取 primary）'),
|
||
Row(
|
||
children: [
|
||
// 注意：这里不能写 const —— .w/.h 是 ScreenUtil 扩展方法，
|
||
// extension 方法不允许出现在 const 表达式里（const_eval_extension_method）
|
||
SizedBox(
|
||
width: 32.w,
|
||
height: 32.h,
|
||
child: const CircularProgressIndicator(strokeWidth: 3),
|
||
),
|
||
SizedBox(width: 20.w),
|
||
Expanded(
|
||
child: ClipRRect(
|
||
borderRadius: BorderRadius.circular(4.r),
|
||
child: const LinearProgressIndicator(value: 0.6),
|
||
),
|
||
),
|
||
],
|
||
),
|
||
SizedBox(height: 24.h),
|
||
|
||
// ─── ⑥ 聚焦输入框 ───
|
||
_sectionTitle('聚焦输入框（边框取 primary）'),
|
||
_tipCard('点进输入框，光标 + 聚焦边框颜色 = 当前 seed 主色。'),
|
||
TextField(
|
||
controller: _focusController,
|
||
decoration: InputDecoration(
|
||
labelText: '点击聚焦看边框颜色',
|
||
border: const OutlineInputBorder(),
|
||
),
|
||
),
|
||
SizedBox(height: 24.h),
|
||
|
||
// ─── ⑦ 验证提示 ───
|
||
_sectionTitle('⑦ 怎么看到变化'),
|
||
Container(
|
||
padding: EdgeInsets.all(16.w),
|
||
decoration: BoxDecoration(
|
||
color: const Color(0xFFE8F0FE),
|
||
borderRadius: BorderRadius.circular(12.r),
|
||
),
|
||
child: Text(
|
||
'flutter run --dart-define=BRAND=chucai\n'
|
||
'→ 本页所有组件变成红色系。\n\n'
|
||
'flutter run（默认爱学蝶变）\n'
|
||
'→ 恢复 SkyBlue 蓝色系。',
|
||
style: TextStyle(fontSize: 13.sp, color: const Color(0xFF3B82F6)),
|
||
),
|
||
),
|
||
],
|
||
),
|
||
);
|
||
}
|
||
|
||
/// 段落小标题
|
||
Widget _sectionTitle(String text) {
|
||
return Padding(
|
||
padding: EdgeInsets.only(bottom: 10.h),
|
||
child: Text(
|
||
text,
|
||
style: TextStyle(
|
||
fontSize: 14.sp,
|
||
fontWeight: FontWeight.w600,
|
||
color: const Color(0xFF333333),
|
||
),
|
||
),
|
||
);
|
||
}
|
||
|
||
/// 灰色提示卡
|
||
Widget _tipCard(String text) {
|
||
return Container(
|
||
padding: EdgeInsets.all(12.w),
|
||
margin: EdgeInsets.only(bottom: 12.h),
|
||
decoration: BoxDecoration(
|
||
color: const Color(0xFFF7F8FA),
|
||
borderRadius: BorderRadius.circular(10.r),
|
||
),
|
||
child: Text(
|
||
text,
|
||
style: TextStyle(fontSize: 12.sp, color: const Color(0xFF666666)),
|
||
),
|
||
);
|
||
}
|
||
|
||
/// Color → #RRGGBB 显示（Flutter 3.27+ 用 toARGB32 取色值）
|
||
String _hex(Color c) {
|
||
final v = c.toARGB32() & 0xFFFFFF;
|
||
return '#${v.toRadixString(16).padLeft(6, '0').toUpperCase()}';
|
||
}
|
||
}
|