Skip to content

Commit

Permalink
feat: make radius and button height selectable
Browse files Browse the repository at this point in the history
  • Loading branch information
@Feichtmeier
Feichtmeier committed Jun 8, 2024
1 parent 0dcf1e0 commit 61c5b11
Showing 1 changed file with 166 additions and 62 deletions.
228 changes: 166 additions & 62 deletions lib/src/theme.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,70 +11,92 @@ typedef ThemePair = ({ThemeData lightTheme, ThemeData darkTheme});
const _lightBase = Colors.white;
final _darkBase = Colors.black.scale(lightness: 0.09);
final _darkMenuBase = Colors.black.scale(lightness: 0.07);
const kContainerRadius = 10.0;
const kButtonRadius = 6.0;
const kMenuRadius = 8.0;
const _kContainerRadius = 10.0;
final _kButtonHeight = isDesktop ? 42.0 : 48.0;
final _kButtonRadius = _kButtonHeight / 2;
const _kMenuRadius = 8.0;
const _kInputDecorationRadius = 6.0;

ThemePair phoenixTheme({
required Color color,
double? buttonRadius,
double? buttonHeight,
}) {
final darkScheme = _darkScheme(color);
final lightScheme = _lightScheme(color);

return (
lightTheme: ThemeData(
lightTheme: _phoenixTheme(
colorScheme: lightScheme,
scaffoldBackgroundColor: lightScheme.surface,
splashFactory: NoSplash.splashFactory,
dividerColor: _dividerColor(lightScheme),
cardColor: _cardColor(lightScheme),
menuTheme: _menuTheme(lightScheme),
popupMenuTheme: _popupMenuTheme(lightScheme),
dialogTheme: _dialogTheme(lightScheme),
dialogBackgroundColor: _menuBg(lightScheme),
dropdownMenuTheme: _dropdownMenuTheme(lightScheme),
sliderTheme: _sliderTheme(lightScheme),
dividerTheme: _dividerTheme(lightScheme),
progressIndicatorTheme: _progressIndicatorTheme(lightScheme),
switchTheme: _switchTheme(lightScheme),
checkboxTheme: _checkBoxTheme(lightScheme),
floatingActionButtonTheme: _floatingActionButtonTheme(lightScheme),
elevatedButtonTheme: _elevatedButtonTheme(lightScheme),
navigationRailTheme: _naviRailTheme(lightScheme),
navigationBarTheme: _naviBarTheme(lightScheme),
appBarTheme: _appBarTheme(lightScheme),
snackBarTheme: _snackBarThemeData(lightScheme),
cardTheme: _cardTheme(lightScheme),
drawerTheme: _drawerTheme(lightScheme),
buttonHeight: buttonHeight,
buttonRadius: buttonRadius,
),
darkTheme: ThemeData(
darkTheme: _phoenixTheme(
colorScheme: darkScheme,
scaffoldBackgroundColor: darkScheme.surface,
splashFactory: NoSplash.splashFactory,
dividerColor: _dividerColor(darkScheme),
cardColor: _cardColor(darkScheme),
menuTheme: _menuTheme(darkScheme),
popupMenuTheme: _popupMenuTheme(darkScheme),
dialogTheme: _dialogTheme(darkScheme),
dialogBackgroundColor: _menuBg(darkScheme),
dropdownMenuTheme: _dropdownMenuTheme(darkScheme),
sliderTheme: _sliderTheme(darkScheme),
dividerTheme: _dividerTheme(darkScheme),
progressIndicatorTheme: _progressIndicatorTheme(darkScheme),
switchTheme: _switchTheme(darkScheme),
checkboxTheme: _checkBoxTheme(darkScheme),
floatingActionButtonTheme: _floatingActionButtonTheme(darkScheme),
elevatedButtonTheme: _elevatedButtonTheme(darkScheme),
navigationRailTheme: _naviRailTheme(darkScheme),
navigationBarTheme: _naviBarTheme(darkScheme),
appBarTheme: _appBarTheme(darkScheme),
snackBarTheme: _snackBarThemeData(darkScheme),
cardTheme: _cardTheme(darkScheme),
drawerTheme: _drawerTheme(darkScheme),
buttonHeight: buttonHeight,
buttonRadius: buttonRadius,
)
);
}

ThemeData _phoenixTheme({
required ColorScheme colorScheme,
double? buttonRadius,
double? buttonHeight,
}) {
final buttonShape = RoundedRectangleBorder(
borderRadius: BorderRadius.circular(buttonRadius ?? _kButtonRadius),
);

final buttonSize = Size(1, buttonHeight ?? _kButtonHeight);

return ThemeData(
colorScheme: colorScheme,
scaffoldBackgroundColor: colorScheme.surface,
splashFactory: NoSplash.splashFactory,
dividerColor: _dividerColor(colorScheme),
cardColor: _cardColor(colorScheme),
menuTheme: _menuTheme(colorScheme),
popupMenuTheme: _popupMenuTheme(colorScheme),
dialogTheme: _dialogTheme(colorScheme),
dialogBackgroundColor: _menuBg(colorScheme),
dropdownMenuTheme: _dropdownMenuTheme(colorScheme),
sliderTheme: _sliderTheme(colorScheme),
dividerTheme: _dividerTheme(colorScheme),
progressIndicatorTheme: _progressIndicatorTheme(colorScheme),
switchTheme: _switchTheme(colorScheme),
checkboxTheme: _checkBoxTheme(colorScheme),
floatingActionButtonTheme: _floatingActionButtonTheme(colorScheme),
elevatedButtonTheme: _elevatedButtonTheme(
colorScheme: colorScheme,
buttonShape: buttonShape,
buttonSize: buttonSize,
),
outlinedButtonTheme: _outlinedButtonThemeData(
colorScheme: colorScheme,
buttonShape: buttonShape,
buttonSize: buttonSize,
),
filledButtonTheme: _filledButtonThemeData(
colorScheme: colorScheme,
buttonShape: buttonShape,
buttonSize: buttonSize,
),
textButtonTheme: _textButtonThemeData(
colorScheme: colorScheme,
buttonShape: buttonShape,
buttonSize: buttonSize,
),
navigationRailTheme: _naviRailTheme(colorScheme),
navigationBarTheme: _naviBarTheme(colorScheme),
appBarTheme: _appBarTheme(colorScheme),
snackBarTheme: _snackBarThemeData(colorScheme),
cardTheme: _cardTheme(colorScheme),
drawerTheme: _drawerTheme(colorScheme),
inputDecorationTheme: _inputDecorationTheme(colorScheme),
);
}

ColorScheme _darkScheme(Color color) {
return ColorScheme.fromSeed(
seedColor: color,
Expand Down Expand Up @@ -113,7 +135,7 @@ DialogTheme _dialogTheme(ColorScheme colorScheme) {
backgroundColor: bgColor,
surfaceTintColor: bgColor,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(kContainerRadius),
borderRadius: BorderRadius.circular(_kContainerRadius),
side: colorScheme.isLight
? BorderSide.none
: BorderSide(
Expand Down Expand Up @@ -141,7 +163,7 @@ PopupMenuThemeData _popupMenuTheme(ColorScheme colorScheme) {
color: bgColor,
surfaceTintColor: bgColor,
shape: OutlineInputBorder(
borderRadius: BorderRadius.circular(kContainerRadius),
borderRadius: BorderRadius.circular(_kContainerRadius),
borderSide: BorderSide(
color: colorScheme.onSurface.withOpacity(
colorScheme.isLight ? 0.3 : 0.2,
Expand All @@ -165,7 +187,7 @@ MenuStyle _menuStyle(ColorScheme colorScheme) {
),
width: 1,
),
borderRadius: BorderRadius.circular(kMenuRadius),
borderRadius: BorderRadius.circular(_kMenuRadius),
),
),
side: WidgetStateBorderSide.resolveWith(
Expand Down Expand Up @@ -208,6 +230,42 @@ SliderThemeData _sliderTheme(ColorScheme colorScheme) {
);
}

InputDecorationTheme _inputDecorationTheme(ColorScheme colorScheme) {
return InputDecorationTheme(
isDense: isDesktop ? true : false,
filled: true,
fillColor: colorScheme.surface
.scale(lightness: colorScheme.isLight ? -0.07 : 0.03),
border: _inputBorder(colorScheme: colorScheme),
enabledBorder: _inputBorder(
colorScheme: colorScheme,
),
focusedBorder: _inputBorder(
colorScheme: colorScheme,
state: WidgetState.focused,
),
);
}

OutlineInputBorder _inputBorder({
required ColorScheme colorScheme,
WidgetState? state,
}) {
return OutlineInputBorder(
borderSide: BorderSide(
width: 1,
color: switch (state) {
WidgetState.focused => colorScheme.primary,
WidgetState.hovered => colorScheme.primary,
_ =>
colorScheme.outline.scale(lightness: colorScheme.isLight ? 0 : 0.1),
},
),
borderRadius:
const BorderRadius.all(Radius.circular(_kInputDecorationRadius)),
);
}

class CustomTrackShape extends RoundedRectSliderTrackShape {
@override
void paint(
Expand Down Expand Up @@ -308,21 +366,64 @@ FloatingActionButtonThemeData _floatingActionButtonTheme(
);
}

ElevatedButtonThemeData _elevatedButtonTheme(ColorScheme colorScheme) {
ElevatedButtonThemeData _elevatedButtonTheme({
required ColorScheme colorScheme,
required Size buttonSize,
required RoundedRectangleBorder buttonShape,
}) {
return ElevatedButtonThemeData(
style: ElevatedButton.styleFrom(
backgroundColor: colorScheme.isLight
? colorScheme.primaryFixed
: colorScheme.primaryContainer,
elevation: 0,
shadowColor: Colors.transparent,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(30),
shape: buttonShape,
backgroundColor: colorScheme.primary,
foregroundColor: colorScheme.primary.contrastColor,
minimumSize: buttonSize,
),
);
}

OutlinedButtonThemeData _outlinedButtonThemeData({
required ColorScheme colorScheme,
required Size buttonSize,
required RoundedRectangleBorder buttonShape,
}) {
return OutlinedButtonThemeData(
style: OutlinedButton.styleFrom(
shape: buttonShape,
minimumSize: buttonSize,
backgroundColor: colorScheme.primary.withOpacity(0.03),
side: BorderSide(
color: colorScheme.primary.withOpacity(0.4),
),
),
);
}

FilledButtonThemeData _filledButtonThemeData({
required ColorScheme colorScheme,
required Size buttonSize,
required RoundedRectangleBorder buttonShape,
}) {
return FilledButtonThemeData(
style: FilledButton.styleFrom(
shape: buttonShape,
minimumSize: buttonSize,
),
);
}

TextButtonThemeData _textButtonThemeData({
required ColorScheme colorScheme,
required Size buttonSize,
required RoundedRectangleBorder buttonShape,
}) {
return TextButtonThemeData(
style: TextButton.styleFrom(
shape: buttonShape,
minimumSize: buttonSize,
),
);
}

NavigationRailThemeData _naviRailTheme(ColorScheme colorScheme) {
return NavigationRailThemeData(
indicatorColor: _indicatorColor(colorScheme),
Expand Down Expand Up @@ -350,8 +451,8 @@ DrawerThemeData _drawerTheme(ColorScheme colorScheme) {
return DrawerThemeData(
shape: RoundedRectangleBorder(
borderRadius: const BorderRadiusDirectional.only(
topEnd: Radius.circular(kContainerRadius),
bottomEnd: Radius.circular(kContainerRadius),
topEnd: Radius.circular(_kContainerRadius),
bottomEnd: Radius.circular(_kContainerRadius),
),
side: colorScheme.isLight
? BorderSide.none
Expand All @@ -375,3 +476,6 @@ SnackBarThemeData _snackBarThemeData(ColorScheme colorScheme) {

bool get isMobile =>
!kIsWeb && Platform.isAndroid || Platform.isIOS || Platform.isFuchsia;

bool get isDesktop =>
!kIsWeb && (Platform.isLinux || Platform.isMacOS || Platform.isWindows);

0 comments on commit 61c5b11

Please sign in to comment.