Skip to content

Commit

Permalink
Merge pull request Predidit#616 from ErBWs/feat-theme-palette
Browse files Browse the repository at this point in the history 
feat: color palette for theme picker
  • Loading branch information
@Predidit
Predidit authored Jan 16, 2025
2 parents 6c41d45 + 383755d commit 2f5ae48
Show file tree
Hide file tree
Showing 3 changed files with 101 additions and 57 deletions.
86 changes: 86 additions & 0 deletions lib/bean/card/palette_card.dart
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,86 @@
import 'package:flutter/material.dart';
import 'package:material_color_utilities/material_color_utilities.dart';

class PaletteCard extends StatefulWidget {
final Color color;
final bool selected;

const PaletteCard({
super.key,
required this.color,
required this.selected,
});

@override
State<StatefulWidget> createState() => _PaletteCardState();
}

class _PaletteCardState extends State<PaletteCard> {
@override
Widget build(BuildContext context) {
final Hct hct = Hct.fromInt(widget.color.value);
final primary = Color(Hct.from(hct.hue, 20.0, 90.0).toInt());
final tertiary = Color(Hct.from(hct.hue + 50, 20.0, 85.0).toInt());
final primaryContainer = Color(Hct.from(hct.hue, 30.0, 50.0).toInt());
final checkbox = Color(Hct.from(hct.hue, 30.0, 40.0).toInt());
return SizedBox(
width: 70,
height: 70,
child: Stack(
children: [
Card(
elevation: 0,
child: Container(
padding: const EdgeInsets.all(10),
child: ClipOval(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Expanded(
child: Container(
color: primary,
),
),
Expanded(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Expanded(
child: Container(
color: tertiary,
),
),
Expanded(
child: Container(
color: primaryContainer,
),
),
],
),
),
],
),
),
),
),
if (widget.selected)
Center(
child: Container(
width: 25,
height: 25,
decoration: BoxDecoration(
color: checkbox,
shape: BoxShape.circle,
),
child: Icon(
Icons.check_rounded,
color: Theme.of(context).colorScheme.surfaceContainerLow,
size: 12,
),
),
),
],
),
);
}
}
14 changes: 2 additions & 12 deletions lib/bean/settings/color_type.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,22 +2,12 @@ import 'package:flutter/material.dart';

final List<Map<String, dynamic>> colorThemeTypes = [
{'color': Colors.green, 'label': '默认'},
{'color': Colors.lightGreen, 'label': '浅绿色'},
{'color': Colors.teal, 'label': '青色'},
{'color': Colors.cyan, 'label': '蓝绿色'},
{'color': Colors.lightBlue, 'label': '浅蓝色'},
{'color': Colors.blue, 'label': '蓝色'},
{'color': Colors.indigo, 'label': '靛蓝色'},
{'color': Colors.purple, 'label': '紫色'},
{'color': const Color(0xff6750a4), 'label': '紫罗兰色'},
{'color': Colors.deepPurple, 'label': '深紫色'},
{'color': Colors.pink, 'label': '粉红色'},
{'color': Colors.red, 'label': '红色'},
{'color': Colors.orange, 'label': '橙色'},
{'color': Colors.amber, 'label': '琥珀色'},
{'color': Colors.yellow, 'label': '黄色'},
{'color': Colors.lime, 'label': '酸橙色'},
{'color': Colors.blueGrey, 'label': '蓝灰色'},
{'color': Colors.brown, 'label': '棕色'},
{'color': Colors.grey, 'label': '灰色'},
{'color': Colors.orange, 'label': '橙色'},
{'color': Colors.deepOrange, 'label': '深橙色'},
];
58 changes: 13 additions & 45 deletions lib/pages/settings/theme_settings_page.dart
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import 'dart:io';
import 'package:flutter/material.dart';
import 'package:flutter_modular/flutter_modular.dart';
import 'package:kazumi/bean/card/palette_card.dart';
import 'package:kazumi/utils/storage.dart';
import 'package:hive/hive.dart';
import 'package:kazumi/bean/dialog/dialog_helper.dart';
Expand Down Expand Up @@ -204,8 +205,8 @@ class _ThemeSettingsPageState extends State<ThemeSettingsPage> {
colorThemeTypes;
return Wrap(
alignment: WrapAlignment.center,
spacing: 22,
runSpacing: 18,
spacing: 8,
runSpacing: Utils.isDesktop() ? 8 : 0,
children: [
...colorThemes.map(
(e) {
Expand All @@ -219,50 +220,17 @@ class _ThemeSettingsPageState extends State<ThemeSettingsPage> {
},
child: Column(
children: [
Container(
width: 46,
height: 46,
decoration: BoxDecoration(
color:
e['color'].withOpacity(0.8),
borderRadius:
BorderRadius.circular(50),
border: Border.all(
width: 2,
color: e['color']
.withOpacity(0.8),
),
),
child: AnimatedOpacity(
opacity: (e['color']
.value
.toRadixString(
16) ==
defaultThemeColor ||
(defaultThemeColor ==
'default' &&
index == 0))
? 1
: 0,
duration: const Duration(
milliseconds: 200),
child: const Icon(
Icons.done,
color: Colors.black,
size: 20,
),
),
),
const SizedBox(height: 3),
Text(
e['label'],
style: TextStyle(
fontSize: 12,
color: Theme.of(context)
.colorScheme
.outline,
),
PaletteCard(
color: e['color'],
selected: (e['color']
.value
.toRadixString(16) ==
defaultThemeColor ||
(defaultThemeColor ==
'default' &&
index == 0)),
),
Text(e['label']),
],
),
);
Expand Down

0 comments on commit 2f5ae48

Please sign in to comment.