Skip to content

Commit b60c853

Browse files
vmeng-bvmeng-b
committed
style: Update button themes for enhanced dark mode support and custom styling
This commit refactors `lib/screens/widgets/overrides/button_themes.dart` to provide more granular styling for various button types. It integrates `ThemeCubit` to dynamically adjust colors based on the application's brightness (dark vs. light mode). ### Key Changes: * **Theme Integration:** Added `ThemeCubit` to watch for dark mode changes and define consistent background, text, and icon colors. * **`OutlineButtonTheme`:** Implemented custom decorations, text styles, and icon themes for disabled, hovered, and default states, featuring specific border colors for dark and light modes. * **`SecondaryButtonTheme`:** Updated background decorations and text/icon colors to adapt to the current theme. * **`GhostButtonTheme`:** Added hover-state background colors and theme-specific text/icon colors (grayscale for dark mode, blue for light mode). * **`DestructiveButtonTheme`:** Defined explicit red-based styles for standard, hovered, and disabled states with white text and icons. * **`LinkButtonTheme`:** Added state-dependent text and icon styling to improve visibility and accessibility across different themes.
1 parent 8baa979 commit b60c853

1 file changed

Lines changed: 145 additions & 11 deletions

File tree

‎lib/screens/widgets/overrides/button_themes.dart‎

Lines changed: 145 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,167 @@
1+
import 'package:flutter_bloc/flutter_bloc.dart';
12
import 'package:shadcn_flutter/shadcn_flutter.dart';
23

4+
import '../../../theme/cubit/theme_cubit.dart';
5+
36
class ButtonThemes extends StatelessWidget {
47
const ButtonThemes({super.key, required this.child});
58

69
final Widget child;
710

811
@override
912
Widget build(BuildContext context) {
13+
final isDark = context.watch<ThemeCubit>().state.isDarkMode;
14+
final bgColor = isDark ? Colors.gray[400] : Colors.gray[100];
15+
final textColor = isDark ? Colors.black : Colors.blue[900];
16+
final iconColor = textColor;
1017
return ComponentTheme(
1118
data: OutlineButtonTheme(
1219
decoration: (context, states, defaultDecoration) {
13-
return defaultDecoration;
14-
// return defaultDecoration.copyWithIfBoxDecoration(
15-
// color: Colors.red,
16-
// border: Border.all(color: Colors.green, width: 10),
17-
// );
20+
if (states.contains(WidgetState.disabled)) {
21+
return defaultDecoration.copyWithIfBoxDecoration(
22+
color: isDark ? Colors.gray[500] : Colors.gray[200],
23+
border: Border.all(
24+
color: isDark ? Colors.gray[600] : Colors.gray[300],
25+
),
26+
);
27+
} else if (states.contains(WidgetState.hovered)) {
28+
return defaultDecoration.copyWithIfBoxDecoration(
29+
color: isDark ? Colors.gray[300] : Colors.gray[200],
30+
border: Border.all(
31+
color: isDark ? Colors.blue[300] : Colors.blue[600],
32+
),
33+
);
34+
} else {
35+
return defaultDecoration.copyWithIfBoxDecoration(
36+
color: bgColor,
37+
border: Border.all(
38+
color: isDark ? Colors.blue[100] : Colors.blue[900],
39+
),
40+
);
41+
}
42+
},
43+
textStyle: (context, states, defaultTextStyle) {
44+
return defaultTextStyle.copyWith(color: textColor);
45+
},
46+
iconTheme: (context, states, defaultIconTheme) {
47+
return defaultIconTheme.copyWith(color: iconColor);
1848
},
1949
),
2050
child: ComponentTheme(
2151
data: SecondaryButtonTheme(
2252
decoration: (context, states, defaultDecoration) {
23-
return defaultDecoration;
24-
// return defaultDecoration.copyWithIfBoxDecoration(
25-
// color: Colors.red,
26-
// border: Border.all(color: Colors.green, width: 10),
27-
// );
53+
if (states.contains(WidgetState.disabled)) {
54+
return defaultDecoration.copyWithIfBoxDecoration(
55+
color: isDark ? Colors.gray[500] : Colors.gray[200],
56+
);
57+
} else if (states.contains(WidgetState.hovered)) {
58+
return defaultDecoration.copyWithIfBoxDecoration(
59+
color: isDark ? Colors.gray[300] : Colors.gray[200],
60+
);
61+
} else {
62+
return defaultDecoration.copyWithIfBoxDecoration(color: bgColor);
63+
}
2864
},
65+
textStyle: (context, states, defaultTextStyle) {
66+
return defaultTextStyle.copyWith(color: textColor);
67+
},
68+
iconTheme: (context, states, defaultIconTheme) {
69+
return defaultIconTheme.copyWith(color: iconColor);
70+
},
71+
),
72+
child: ComponentTheme(
73+
data: GhostButtonTheme(
74+
decoration: (context, states, defaultDecoration) {
75+
if (states.contains(WidgetState.disabled)) {
76+
return defaultDecoration.copyWithIfBoxDecoration(
77+
color: Colors.transparent,
78+
);
79+
} else if (states.contains(WidgetState.hovered)) {
80+
return defaultDecoration.copyWithIfBoxDecoration(
81+
color: isDark ? Colors.gray[600] : Colors.gray[100],
82+
);
83+
} else {
84+
return defaultDecoration.copyWithIfBoxDecoration(
85+
color: Colors.transparent,
86+
);
87+
}
88+
},
89+
textStyle: (context, states, defaultTextStyle) {
90+
if (states.contains(WidgetState.disabled)) {
91+
return defaultTextStyle.copyWith(
92+
color: isDark ? Colors.gray[300] : Colors.gray[600],
93+
);
94+
} else if (states.contains(WidgetState.hovered)) {
95+
return defaultTextStyle.copyWith(
96+
color: isDark ? Colors.gray[300] : Colors.blue[900],
97+
);
98+
} else {
99+
return defaultTextStyle.copyWith(
100+
color: isDark ? Colors.gray[300] : Colors.blue[900],
101+
);
102+
}
103+
},
104+
iconTheme: (context, states, defaultIconTheme) {
105+
return defaultIconTheme.copyWith(
106+
color: isDark ? Colors.gray[300] : Colors.blue[900],
107+
);
108+
},
109+
),
110+
child: ComponentTheme(
111+
data: DestructiveButtonTheme(
112+
decoration: (context, states, defaultDecoration) {
113+
if (states.contains(WidgetState.disabled)) {
114+
return defaultDecoration.copyWithIfBoxDecoration(
115+
color: Colors.red[500],
116+
);
117+
} else if (states.contains(WidgetState.hovered)) {
118+
return defaultDecoration.copyWithIfBoxDecoration(
119+
color: Colors.red[700],
120+
border: Border.all(color: Colors.red[700]),
121+
);
122+
} else {
123+
return defaultDecoration.copyWithIfBoxDecoration(
124+
color: Colors.red[500],
125+
border: Border.all(color: Colors.red[700]),
126+
);
127+
}
128+
},
129+
textStyle: (context, states, defaultTextStyle) {
130+
return defaultTextStyle.copyWith(color: Colors.white);
131+
},
132+
iconTheme: (context, states, defaultIconTheme) {
133+
return defaultIconTheme.copyWith(color: Colors.white);
134+
},
135+
),
136+
child: ComponentTheme(
137+
data: LinkButtonTheme(
138+
textStyle: (context, states, defaultTextStyle) {
139+
if (states.contains(WidgetState.disabled)) {
140+
return defaultTextStyle.copyWith(
141+
color: isDark ? Colors.gray[400] : Colors.gray[600],
142+
);
143+
} else {
144+
return defaultTextStyle.copyWith(
145+
color: isDark ? Colors.white : Colors.blue[900],
146+
);
147+
}
148+
},
149+
iconTheme: (context, states, defaultIconTheme) {
150+
if (states.contains(WidgetState.disabled)) {
151+
return defaultIconTheme.copyWith(
152+
color: isDark ? Colors.gray[400] : Colors.gray[600],
153+
);
154+
} else {
155+
return defaultIconTheme.copyWith(
156+
color: isDark ? Colors.white : Colors.blue[900],
157+
);
158+
}
159+
},
160+
),
161+
child: child,
162+
),
163+
),
29164
),
30-
child: child,
31165
),
32166
);
33167
}

0 commit comments

Comments
 (0)