Skip to content

Commit 61c5b11

Browse files
FeichtmeierFeichtmeier
committed
feat: make radius and button height selectable
1 parent 0dcf1e0 commit 61c5b11

File tree

1 file changed

+166
-62
lines changed

1 file changed

+166
-62
lines changed

‎lib/src/theme.dart‎

Lines changed: 166 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -11,70 +11,92 @@ typedef ThemePair = ({ThemeData lightTheme, ThemeData darkTheme});
1111
const _lightBase = Colors.white;
1212
final _darkBase = Colors.black.scale(lightness: 0.09);
1313
final _darkMenuBase = Colors.black.scale(lightness: 0.07);
14-
const kContainerRadius = 10.0;
15-
const kButtonRadius = 6.0;
16-
const kMenuRadius = 8.0;
14+
const _kContainerRadius = 10.0;
15+
final _kButtonHeight = isDesktop ? 42.0 : 48.0;
16+
final _kButtonRadius = _kButtonHeight / 2;
17+
const _kMenuRadius = 8.0;
18+
const _kInputDecorationRadius = 6.0;
1719

1820
ThemePair phoenixTheme({
1921
required Color color,
22+
double? buttonRadius,
23+
double? buttonHeight,
2024
}) {
2125
final darkScheme = _darkScheme(color);
2226
final lightScheme = _lightScheme(color);
2327

2428
return (
25-
lightTheme: ThemeData(
29+
lightTheme: _phoenixTheme(
2630
colorScheme: lightScheme,
27-
scaffoldBackgroundColor: lightScheme.surface,
28-
splashFactory: NoSplash.splashFactory,
29-
dividerColor: _dividerColor(lightScheme),
30-
cardColor: _cardColor(lightScheme),
31-
menuTheme: _menuTheme(lightScheme),
32-
popupMenuTheme: _popupMenuTheme(lightScheme),
33-
dialogTheme: _dialogTheme(lightScheme),
34-
dialogBackgroundColor: _menuBg(lightScheme),
35-
dropdownMenuTheme: _dropdownMenuTheme(lightScheme),
36-
sliderTheme: _sliderTheme(lightScheme),
37-
dividerTheme: _dividerTheme(lightScheme),
38-
progressIndicatorTheme: _progressIndicatorTheme(lightScheme),
39-
switchTheme: _switchTheme(lightScheme),
40-
checkboxTheme: _checkBoxTheme(lightScheme),
41-
floatingActionButtonTheme: _floatingActionButtonTheme(lightScheme),
42-
elevatedButtonTheme: _elevatedButtonTheme(lightScheme),
43-
navigationRailTheme: _naviRailTheme(lightScheme),
44-
navigationBarTheme: _naviBarTheme(lightScheme),
45-
appBarTheme: _appBarTheme(lightScheme),
46-
snackBarTheme: _snackBarThemeData(lightScheme),
47-
cardTheme: _cardTheme(lightScheme),
48-
drawerTheme: _drawerTheme(lightScheme),
31+
buttonHeight: buttonHeight,
32+
buttonRadius: buttonRadius,
4933
),
50-
darkTheme: ThemeData(
34+
darkTheme: _phoenixTheme(
5135
colorScheme: darkScheme,
52-
scaffoldBackgroundColor: darkScheme.surface,
53-
splashFactory: NoSplash.splashFactory,
54-
dividerColor: _dividerColor(darkScheme),
55-
cardColor: _cardColor(darkScheme),
56-
menuTheme: _menuTheme(darkScheme),
57-
popupMenuTheme: _popupMenuTheme(darkScheme),
58-
dialogTheme: _dialogTheme(darkScheme),
59-
dialogBackgroundColor: _menuBg(darkScheme),
60-
dropdownMenuTheme: _dropdownMenuTheme(darkScheme),
61-
sliderTheme: _sliderTheme(darkScheme),
62-
dividerTheme: _dividerTheme(darkScheme),
63-
progressIndicatorTheme: _progressIndicatorTheme(darkScheme),
64-
switchTheme: _switchTheme(darkScheme),
65-
checkboxTheme: _checkBoxTheme(darkScheme),
66-
floatingActionButtonTheme: _floatingActionButtonTheme(darkScheme),
67-
elevatedButtonTheme: _elevatedButtonTheme(darkScheme),
68-
navigationRailTheme: _naviRailTheme(darkScheme),
69-
navigationBarTheme: _naviBarTheme(darkScheme),
70-
appBarTheme: _appBarTheme(darkScheme),
71-
snackBarTheme: _snackBarThemeData(darkScheme),
72-
cardTheme: _cardTheme(darkScheme),
73-
drawerTheme: _drawerTheme(darkScheme),
36+
buttonHeight: buttonHeight,
37+
buttonRadius: buttonRadius,
7438
)
7539
);
7640
}
7741

42+
ThemeData _phoenixTheme({
43+
required ColorScheme colorScheme,
44+
double? buttonRadius,
45+
double? buttonHeight,
46+
}) {
47+
final buttonShape = RoundedRectangleBorder(
48+
borderRadius: BorderRadius.circular(buttonRadius ?? _kButtonRadius),
49+
);
50+
51+
final buttonSize = Size(1, buttonHeight ?? _kButtonHeight);
52+
53+
return ThemeData(
54+
colorScheme: colorScheme,
55+
scaffoldBackgroundColor: colorScheme.surface,
56+
splashFactory: NoSplash.splashFactory,
57+
dividerColor: _dividerColor(colorScheme),
58+
cardColor: _cardColor(colorScheme),
59+
menuTheme: _menuTheme(colorScheme),
60+
popupMenuTheme: _popupMenuTheme(colorScheme),
61+
dialogTheme: _dialogTheme(colorScheme),
62+
dialogBackgroundColor: _menuBg(colorScheme),
63+
dropdownMenuTheme: _dropdownMenuTheme(colorScheme),
64+
sliderTheme: _sliderTheme(colorScheme),
65+
dividerTheme: _dividerTheme(colorScheme),
66+
progressIndicatorTheme: _progressIndicatorTheme(colorScheme),
67+
switchTheme: _switchTheme(colorScheme),
68+
checkboxTheme: _checkBoxTheme(colorScheme),
69+
floatingActionButtonTheme: _floatingActionButtonTheme(colorScheme),
70+
elevatedButtonTheme: _elevatedButtonTheme(
71+
colorScheme: colorScheme,
72+
buttonShape: buttonShape,
73+
buttonSize: buttonSize,
74+
),
75+
outlinedButtonTheme: _outlinedButtonThemeData(
76+
colorScheme: colorScheme,
77+
buttonShape: buttonShape,
78+
buttonSize: buttonSize,
79+
),
80+
filledButtonTheme: _filledButtonThemeData(
81+
colorScheme: colorScheme,
82+
buttonShape: buttonShape,
83+
buttonSize: buttonSize,
84+
),
85+
textButtonTheme: _textButtonThemeData(
86+
colorScheme: colorScheme,
87+
buttonShape: buttonShape,
88+
buttonSize: buttonSize,
89+
),
90+
navigationRailTheme: _naviRailTheme(colorScheme),
91+
navigationBarTheme: _naviBarTheme(colorScheme),
92+
appBarTheme: _appBarTheme(colorScheme),
93+
snackBarTheme: _snackBarThemeData(colorScheme),
94+
cardTheme: _cardTheme(colorScheme),
95+
drawerTheme: _drawerTheme(colorScheme),
96+
inputDecorationTheme: _inputDecorationTheme(colorScheme),
97+
);
98+
}
99+
78100
ColorScheme _darkScheme(Color color) {
79101
return ColorScheme.fromSeed(
80102
seedColor: color,
@@ -113,7 +135,7 @@ DialogTheme _dialogTheme(ColorScheme colorScheme) {
113135
backgroundColor: bgColor,
114136
surfaceTintColor: bgColor,
115137
shape: RoundedRectangleBorder(
116-
borderRadius: BorderRadius.circular(kContainerRadius),
138+
borderRadius: BorderRadius.circular(_kContainerRadius),
117139
side: colorScheme.isLight
118140
? BorderSide.none
119141
: BorderSide(
@@ -141,7 +163,7 @@ PopupMenuThemeData _popupMenuTheme(ColorScheme colorScheme) {
141163
color: bgColor,
142164
surfaceTintColor: bgColor,
143165
shape: OutlineInputBorder(
144-
borderRadius: BorderRadius.circular(kContainerRadius),
166+
borderRadius: BorderRadius.circular(_kContainerRadius),
145167
borderSide: BorderSide(
146168
color: colorScheme.onSurface.withOpacity(
147169
colorScheme.isLight ? 0.3 : 0.2,
@@ -165,7 +187,7 @@ MenuStyle _menuStyle(ColorScheme colorScheme) {
165187
),
166188
width: 1,
167189
),
168-
borderRadius: BorderRadius.circular(kMenuRadius),
190+
borderRadius: BorderRadius.circular(_kMenuRadius),
169191
),
170192
),
171193
side: WidgetStateBorderSide.resolveWith(
@@ -208,6 +230,42 @@ SliderThemeData _sliderTheme(ColorScheme colorScheme) {
208230
);
209231
}
210232

233+
InputDecorationTheme _inputDecorationTheme(ColorScheme colorScheme) {
234+
return InputDecorationTheme(
235+
isDense: isDesktop ? true : false,
236+
filled: true,
237+
fillColor: colorScheme.surface
238+
.scale(lightness: colorScheme.isLight ? -0.07 : 0.03),
239+
border: _inputBorder(colorScheme: colorScheme),
240+
enabledBorder: _inputBorder(
241+
colorScheme: colorScheme,
242+
),
243+
focusedBorder: _inputBorder(
244+
colorScheme: colorScheme,
245+
state: WidgetState.focused,
246+
),
247+
);
248+
}
249+
250+
OutlineInputBorder _inputBorder({
251+
required ColorScheme colorScheme,
252+
WidgetState? state,
253+
}) {
254+
return OutlineInputBorder(
255+
borderSide: BorderSide(
256+
width: 1,
257+
color: switch (state) {
258+
WidgetState.focused => colorScheme.primary,
259+
WidgetState.hovered => colorScheme.primary,
260+
_ =>
261+
colorScheme.outline.scale(lightness: colorScheme.isLight ? 0 : 0.1),
262+
},
263+
),
264+
borderRadius:
265+
const BorderRadius.all(Radius.circular(_kInputDecorationRadius)),
266+
);
267+
}
268+
211269
class CustomTrackShape extends RoundedRectSliderTrackShape {
212270
@override
213271
void paint(
@@ -308,21 +366,64 @@ FloatingActionButtonThemeData _floatingActionButtonTheme(
308366
);
309367
}
310368

311-
ElevatedButtonThemeData _elevatedButtonTheme(ColorScheme colorScheme) {
369+
ElevatedButtonThemeData _elevatedButtonTheme({
370+
required ColorScheme colorScheme,
371+
required Size buttonSize,
372+
required RoundedRectangleBorder buttonShape,
373+
}) {
312374
return ElevatedButtonThemeData(
313375
style: ElevatedButton.styleFrom(
314-
backgroundColor: colorScheme.isLight
315-
? colorScheme.primaryFixed
316-
: colorScheme.primaryContainer,
317-
elevation: 0,
318-
shadowColor: Colors.transparent,
319-
shape: RoundedRectangleBorder(
320-
borderRadius: BorderRadius.circular(30),
376+
shape: buttonShape,
377+
backgroundColor: colorScheme.primary,
378+
foregroundColor: colorScheme.primary.contrastColor,
379+
minimumSize: buttonSize,
380+
),
381+
);
382+
}
383+
384+
OutlinedButtonThemeData _outlinedButtonThemeData({
385+
required ColorScheme colorScheme,
386+
required Size buttonSize,
387+
required RoundedRectangleBorder buttonShape,
388+
}) {
389+
return OutlinedButtonThemeData(
390+
style: OutlinedButton.styleFrom(
391+
shape: buttonShape,
392+
minimumSize: buttonSize,
393+
backgroundColor: colorScheme.primary.withOpacity(0.03),
394+
side: BorderSide(
395+
color: colorScheme.primary.withOpacity(0.4),
321396
),
322397
),
323398
);
324399
}
325400

401+
FilledButtonThemeData _filledButtonThemeData({
402+
required ColorScheme colorScheme,
403+
required Size buttonSize,
404+
required RoundedRectangleBorder buttonShape,
405+
}) {
406+
return FilledButtonThemeData(
407+
style: FilledButton.styleFrom(
408+
shape: buttonShape,
409+
minimumSize: buttonSize,
410+
),
411+
);
412+
}
413+
414+
TextButtonThemeData _textButtonThemeData({
415+
required ColorScheme colorScheme,
416+
required Size buttonSize,
417+
required RoundedRectangleBorder buttonShape,
418+
}) {
419+
return TextButtonThemeData(
420+
style: TextButton.styleFrom(
421+
shape: buttonShape,
422+
minimumSize: buttonSize,
423+
),
424+
);
425+
}
426+
326427
NavigationRailThemeData _naviRailTheme(ColorScheme colorScheme) {
327428
return NavigationRailThemeData(
328429
indicatorColor: _indicatorColor(colorScheme),
@@ -350,8 +451,8 @@ DrawerThemeData _drawerTheme(ColorScheme colorScheme) {
350451
return DrawerThemeData(
351452
shape: RoundedRectangleBorder(
352453
borderRadius: const BorderRadiusDirectional.only(
353-
topEnd: Radius.circular(kContainerRadius),
354-
bottomEnd: Radius.circular(kContainerRadius),
454+
topEnd: Radius.circular(_kContainerRadius),
455+
bottomEnd: Radius.circular(_kContainerRadius),
355456
),
356457
side: colorScheme.isLight
357458
? BorderSide.none
@@ -375,3 +476,6 @@ SnackBarThemeData _snackBarThemeData(ColorScheme colorScheme) {
375476

376477
bool get isMobile =>
377478
!kIsWeb && Platform.isAndroid || Platform.isIOS || Platform.isFuchsia;
479+
480+
bool get isDesktop =>
481+
!kIsWeb && (Platform.isLinux || Platform.isMacOS || Platform.isWindows);

0 commit comments

Comments
 (0)