Skip to content

Commit 29de64b

Browse files
honmaplehonmaple
committed
app: improve ui color
1 parent 2dfe1c0 commit 29de64b

File tree

9 files changed

+143
-141
lines changed

9 files changed

+143
-141
lines changed

‎app/lib/api/file/pages/setting_theme.dart‎

Lines changed: 33 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import 'package:flutter/material.dart';
22
import 'package:flutter_riverpod/flutter_riverpod.dart';
3+
import 'package:flex_color_scheme/flex_color_scheme.dart';
34

45
import 'package:maple_file/app/i18n.dart';
56
import 'package:maple_file/common/widgets/form.dart';
@@ -142,35 +143,55 @@ class _FileSettingThemeState extends ConsumerState<FileSettingTheme> {
142143
],
143144
),
144145
onTap: () async {
145-
final result = await showListDialog2(
146+
final result = await showListDialog2<FlexScheme>(
146147
context,
147148
height: MediaQuery.sizeOf(context).height * 0.618,
148149
child: ListView(
149-
children: ThemeModel.themes.map(
150-
(theme) {
151-
return ListTile(
152-
title: Text(theme.name),
150+
children: [
151+
ListTile(
152+
title: Text("默认".tr()),
153+
leading: Container(
154+
height: 24,
155+
width: 24,
156+
decoration: BoxDecoration(
157+
color:
158+
defaultFlexScheme.primaryColor(context),
159+
borderRadius: const BorderRadius.all(
160+
Radius.circular(12)),
161+
),
162+
),
163+
selected: setting.iconColor == null,
164+
onTap: () {
165+
Navigator.of(context).pop(defaultFlexScheme);
166+
},
167+
),
168+
for (final scheme in FlexScheme.values)
169+
ListTile(
170+
title: Text(scheme.name),
153171
leading: Container(
154172
height: 24,
155173
width: 24,
156174
decoration: BoxDecoration(
157-
color: theme.color,
175+
color: scheme.primaryColor(context),
158176
borderRadius: const BorderRadius.all(
159177
Radius.circular(12)),
160178
),
161179
),
162-
selected: setting.iconColor == theme.name,
180+
selected: setting.iconColor == scheme.name,
163181
onTap: () {
164-
Navigator.of(context).pop(theme.name);
182+
Navigator.of(context).pop(scheme);
165183
},
166-
);
167-
},
168-
).toList(),
184+
),
185+
],
169186
),
170187
);
171188
if (result != null) {
172189
ref.read(fileSettingProvider.notifier).update((state) {
173-
return state.copyWith(iconColor: result);
190+
return state.copyWith(
191+
iconColor: result.name == defaultFlexScheme.name
192+
? null
193+
: result.name,
194+
);
174195
});
175196
}
176197
},

‎app/lib/api/file/providers/file_setting.dart‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import 'package:flutter/material.dart';
22
import 'package:freezed_annotation/freezed_annotation.dart';
3+
import 'package:flex_color_scheme/flex_color_scheme.dart';
34

45
import 'package:maple_file/app/i18n.dart';
56
import 'package:maple_file/api/setting/providers/setting.dart';
@@ -82,12 +83,10 @@ class FileSetting with _$FileSetting {
8283
factory FileSetting.fromJson(Map<String, Object?> json) =>
8384
_$FileSettingFromJson(json);
8485

85-
Color get color => ThemeModel.themes
86-
.firstWhere(
86+
FlexScheme get scheme => FlexScheme.values.firstWhere(
8787
(item) => item.name == iconColor,
88-
orElse: () => ThemeModel.defaultTheme,
89-
)
90-
.color;
88+
orElse: () => defaultFlexScheme,
89+
);
9190
}
9291

9392
final fileSettingProvider = newSettingNotifier(

‎app/lib/api/file/widgets/file_view.dart‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import 'package:maple_file/common/widgets/custom.dart';
1111
import 'package:maple_file/common/providers/selection.dart';
1212

1313
import 'package:maple_file/generated/proto/api/file/file.pb.dart';
14+
import 'package:maple_file/api/setting/providers/setting_appearance.dart';
1415

1516
import 'file_action.dart';
1617
import 'file_breadcrumb.dart';
@@ -254,9 +255,9 @@ class FileIcon extends ConsumerWidget {
254255
height: 48 * size,
255256
width: 48 * size,
256257
decoration: BoxDecoration(
257-
color: setting.iconColor != null
258-
? setting.color
259-
: ColorUtil.backgroundColorWithString(file.name),
258+
color: setting.iconColor == null
259+
? Theme.of(context).primaryColor
260+
: setting.scheme.primaryColor(context),
260261
borderRadius: BorderRadius.all(Radius.circular(24 * size)),
261262
),
262263
alignment: Alignment.center,
@@ -269,9 +270,9 @@ class FileIcon extends ConsumerWidget {
269270
return Icon(
270271
PathUtil.icon(file.name, type: file.type),
271272
size: 64 * size,
272-
color: setting.iconColor != null
273-
? setting.color
274-
: ColorUtil.backgroundColorWithString(file.name),
273+
color: setting.iconColor == null
274+
? Theme.of(context).primaryColor
275+
: setting.scheme.primaryColor(context),
275276
);
276277
}
277278
}

‎app/lib/api/setting/pages/setting_theme.dart‎

Lines changed: 23 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import 'package:flutter/material.dart';
22
import 'package:flutter_riverpod/flutter_riverpod.dart';
3+
import 'package:flex_color_scheme/flex_color_scheme.dart';
34

45
import 'package:maple_file/app/i18n.dart';
56
import 'package:maple_file/common/utils/util.dart';
@@ -51,21 +52,38 @@ class _SettingThemeState extends ConsumerState<SettingTheme> {
5152
},
5253
),
5354
),
54-
for (final model in ThemeModel.themes)
55+
ListTile(
56+
title: Text("默认".tr()),
57+
leading: Container(
58+
height: 24,
59+
width: 24,
60+
decoration: BoxDecoration(
61+
color: defaultFlexScheme.primaryColor(context),
62+
borderRadius: const BorderRadius.all(Radius.circular(12)),
63+
),
64+
),
65+
selected: appearance.themeColor == null,
66+
onTap: () {
67+
ref.read(appearanceProvider.notifier).update((state) {
68+
return state.copyWith(themeColor: null);
69+
});
70+
},
71+
),
72+
for (final scheme in FlexScheme.values)
5573
ListTile(
56-
title: Text(model.name),
74+
title: Text(scheme.name),
5775
leading: Container(
5876
height: 24,
5977
width: 24,
6078
decoration: BoxDecoration(
61-
color: model.color,
79+
color: scheme.primaryColor(context),
6280
borderRadius: const BorderRadius.all(Radius.circular(12)),
6381
),
6482
),
65-
selected: appearance.color == model.color,
83+
selected: appearance.scheme == scheme,
6684
onTap: () {
6785
ref.read(appearanceProvider.notifier).update((state) {
68-
return state.copyWith(themeColor: model.name);
86+
return state.copyWith(themeColor: scheme.name);
6987
});
7088
},
7189
),

‎app/lib/api/setting/providers/setting_appearance.dart‎

Lines changed: 14 additions & 102 deletions
Original file line numberDiff line numberDiff line change
@@ -1,105 +1,23 @@
11
import 'package:flutter/material.dart';
22
import 'package:freezed_annotation/freezed_annotation.dart';
3-
4-
import 'package:maple_file/app/i18n.dart';
3+
import 'package:flex_color_scheme/flex_color_scheme.dart';
54

65
import 'setting.dart';
76

87
part 'setting_appearance.freezed.dart';
98
part 'setting_appearance.g.dart';
109

11-
class ThemeModel {
12-
final String name;
13-
final Color color;
14-
15-
const ThemeModel({
16-
required this.name,
17-
required this.color,
18-
});
19-
20-
// static const defaultColor = Color.fromRGBO(32, 82, 67, 1);
21-
static const defaultColor = Color.fromRGBO(244, 63, 94, 0.2);
22-
23-
static final defaultTheme = ThemeModel(
24-
name: '默认'.tr(),
25-
color: defaultColor,
26-
);
10+
const defaultFlexScheme = FlexScheme.redM3;
2711

28-
static final themes = [
29-
defaultTheme,
30-
const ThemeModel(
31-
name: 'Blue',
32-
color: Colors.blue,
33-
),
34-
const ThemeModel(
35-
name: 'Red',
36-
color: Colors.red,
37-
),
38-
const ThemeModel(
39-
name: 'Pink',
40-
color: Colors.pink,
41-
),
42-
const ThemeModel(
43-
name: 'Purple',
44-
color: Colors.purple,
45-
),
46-
const ThemeModel(
47-
name: 'DeepPurple',
48-
color: Colors.deepPurple,
49-
),
50-
const ThemeModel(
51-
name: 'Indigo',
52-
color: Colors.indigo,
53-
),
54-
const ThemeModel(
55-
name: 'LightBlue',
56-
color: Colors.lightBlue,
57-
),
58-
const ThemeModel(
59-
name: 'Cyan',
60-
color: Colors.cyan,
61-
),
62-
const ThemeModel(
63-
name: 'Teal',
64-
color: Colors.teal,
65-
),
66-
const ThemeModel(
67-
name: 'LightGreen',
68-
color: Colors.lightGreen,
69-
),
70-
const ThemeModel(
71-
name: 'Lime',
72-
color: Colors.lime,
73-
),
74-
const ThemeModel(
75-
name: 'Yellow',
76-
color: Colors.yellow,
77-
),
78-
const ThemeModel(
79-
name: 'Amber',
80-
color: Colors.amber,
81-
),
82-
const ThemeModel(
83-
name: 'Orange',
84-
color: Colors.orange,
85-
),
86-
const ThemeModel(
87-
name: 'DeepOrange',
88-
color: Colors.deepOrange,
89-
),
90-
const ThemeModel(
91-
name: 'Brown',
92-
color: Colors.brown,
93-
),
94-
const ThemeModel(
95-
name: 'Grey',
96-
color: Colors.grey,
97-
),
98-
const ThemeModel(
99-
name: 'BlueGrey',
100-
color: Colors.blueGrey,
101-
),
102-
];
12+
extension FlexSchemeExtension on FlexScheme {
13+
Color primaryColor(BuildContext context) {
14+
switch (MediaQuery.of(context).platformBrightness) {
15+
case Brightness.light:
16+
return colors(Brightness.light).primary;
17+
case Brightness.dark:
18+
return colors(Brightness.dark).primary;
19+
}
20+
}
10321
}
10422

10523
@freezed
@@ -115,16 +33,10 @@ class AppearanceSetting with _$AppearanceSetting {
11533
factory AppearanceSetting.fromJson(Map<String, Object?> json) =>
11634
_$AppearanceSettingFromJson(json);
11735

118-
Color get color => ThemeModel.themes
119-
.firstWhere(
36+
FlexScheme get scheme => FlexScheme.values.firstWhere(
12037
(item) => item.name == themeColor,
121-
orElse: () => ThemeModel.defaultTheme,
122-
)
123-
.color;
124-
125-
bool isDefaultColor() {
126-
return color == ThemeModel.defaultColor;
127-
}
38+
orElse: () => defaultFlexScheme,
39+
);
12840
}
12941

13042
final appearanceProvider = newSettingNotifier(

‎app/lib/main.dart‎

Lines changed: 3 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import 'package:flutter/material.dart';
22
import 'package:flutter/gestures.dart';
33
import 'package:flutter_riverpod/flutter_riverpod.dart';
4+
import 'package:flex_color_scheme/flex_color_scheme.dart';
45

56
import 'api/setting/providers/setting_appearance.dart';
67
import 'app/app.dart';
@@ -51,17 +52,8 @@ class MyApp extends ConsumerWidget {
5152
),
5253
scaffoldMessengerKey: App.scaffoldMessengerKey,
5354
themeMode: appearance.themeMode,
54-
theme: ThemeData(
55-
colorScheme: ColorScheme.fromSeed(
56-
seedColor: appearance.color,
57-
),
58-
),
59-
darkTheme: ThemeData(
60-
colorScheme: ColorScheme.fromSeed(
61-
seedColor: appearance.color,
62-
brightness: Brightness.dark,
63-
),
64-
),
55+
theme: FlexThemeData.light(scheme: appearance.scheme),
56+
darkTheme: FlexThemeData.dark(scheme: appearance.scheme),
6557
localizationsDelegates: I18n.localizationsDelegates,
6658
supportedLocales: I18n.supportedLocales,
6759
initialRoute: App.initialRoute,

‎app/pubspec.lock‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -406,6 +406,22 @@ packages:
406406
url: "https://pub.flutter-io.cn"
407407
source: hosted
408408
version: "1.1.1"
409+
flex_color_scheme:
410+
dependency: "direct main"
411+
description:
412+
name: flex_color_scheme
413+
sha256: "90f4fe67b9561ae8a4af117df65a8ce9988624025667c54e6d304e65cff77d52"
414+
url: "https://pub.flutter-io.cn"
415+
source: hosted
416+
version: "8.0.2"
417+
flex_seed_scheme:
418+
dependency: transitive
419+
description:
420+
name: flex_seed_scheme
421+
sha256: "7639d2c86268eff84a909026eb169f008064af0fb3696a651b24b0fa24a40334"
422+
url: "https://pub.flutter-io.cn"
423+
source: hosted
424+
version: "3.4.1"
409425
flutter:
410426
dependency: "direct main"
411427
description: flutter

‎app/pubspec.yaml‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,7 @@ dependencies:
6464
table_calendar: ^3.1.2
6565
permission_handler: ^11.3.1
6666
desktop_drop: ^0.5.0
67+
flex_color_scheme: ^8.0.2
6768

6869
dev_dependencies:
6970
flutter_test:

0 commit comments

Comments
 (0)