Git-Mirrors/veilidchat
1
0
Fork 0
mirror of https://gitlab.com/veilid/veilidchat.git synced 2025-07-23 22:51:00 -04:00
Code Issues Projects Releases Packages Wiki Activity

ui cleanup

Browse source
This commit is contained in:
Christien Rioux 2025-03-17 00:51:16 -04:00
parent d460a0388c
commit 77c68aa45f
57 changed files with 1158 additions and 914 deletions
Download patch file Download diff file Expand all files Collapse all files

2
lib/theme/models/chat_theme.dart
View file

@ -14,7 +14,7 @@ ChatTheme makeChatTheme(
secondaryColor: scaleConfig.preferBorders
? scale.secondaryScale.calloutText
: scale.secondaryScale.calloutBackground,
backgroundColor: scale.grayScale.appBackground,
backgroundColor: scale.grayScale.appBackground.withAlpha(192),
messageBorderRadius: scaleConfig.borderRadiusScale * 16,
bubbleBorderSide: scaleConfig.preferBorders
? BorderSide(

94
lib/theme/models/contrast_generator.dart
View file

@ -1,9 +1,6 @@
import 'package:flutter/material.dart';
import 'radix_generator.dart';
import 'scale_theme/scale_color.dart';
import 'scale_theme/scale_input_decorator_theme.dart';
import 'scale_theme/scale_scheme.dart';
import 'scale_theme/scale_theme.dart';
ScaleColor _contrastScaleColor(
@ -29,6 +26,7 @@ ScaleColor _contrastScaleColor(
primaryText: front,
borderText: back,
dialogBorder: front,
dialogBorderText: back,
calloutBackground: front,
calloutText: back,
);
@ -246,7 +244,7 @@ ThemeData contrastGenerator({
TextTheme? customTextTheme,
}) {
final textTheme = customTextTheme ?? makeRadixTextTheme(brightness);
final scaleScheme = _contrastScaleScheme(
final scheme = _contrastScaleScheme(
brightness: brightness,
primaryFront: primaryFront,
primaryBack: primaryBack,
@ -259,55 +257,51 @@ ThemeData contrastGenerator({
errorFront: errorFront,
errorBack: errorBack,
);
final colorScheme = scaleScheme.toColorScheme(
brightness,
);
final scaleTheme = ScaleTheme(
textTheme: textTheme, scheme: scaleScheme, config: scaleConfig);
final baseThemeData = ThemeData.from(
colorScheme: colorScheme, textTheme: textTheme, useMaterial3: true);
final scaleTheme =
ScaleTheme(textTheme: textTheme, scheme: scheme, config: scaleConfig);
final baseThemeData = scaleTheme.toThemeData(brightness);
final elevatedButtonTheme = ElevatedButtonThemeData(
style: ElevatedButton.styleFrom(
backgroundColor: scheme.primaryScale.elementBackground,
foregroundColor: scheme.primaryScale.appText,
disabledBackgroundColor:
scheme.grayScale.elementBackground.withAlpha(0x7F),
disabledForegroundColor: scheme.grayScale.appText.withAlpha(0x7F),
shape: RoundedRectangleBorder(
side: BorderSide(color: scheme.primaryScale.border),
borderRadius:
BorderRadius.circular(8 * scaleConfig.borderRadiusScale)))
.copyWith(side: WidgetStateProperty.resolveWith((states) {
if (states.contains(WidgetState.disabled)) {
return BorderSide(color: scheme.grayScale.border.withAlpha(0x7F));
} else if (states.contains(WidgetState.pressed)) {
return BorderSide(
color: scheme.primaryScale.border,
strokeAlign: BorderSide.strokeAlignOutside);
} else if (states.contains(WidgetState.hovered)) {
return BorderSide(color: scheme.primaryScale.hoverBorder);
} else if (states.contains(WidgetState.focused)) {
return BorderSide(color: scheme.primaryScale.hoverBorder, width: 2);
}
return BorderSide(color: scheme.primaryScale.border);
})));
final themeData = baseThemeData.copyWith(
appBarTheme: baseThemeData.appBarTheme.copyWith(
backgroundColor: scaleScheme.primaryScale.border,
foregroundColor: scaleScheme.primaryScale.borderText),
bottomSheetTheme: baseThemeData.bottomSheetTheme.copyWith(
elevation: 0,
modalElevation: 0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(16 * scaleConfig.borderRadiusScale),
topRight:
Radius.circular(16 * scaleConfig.borderRadiusScale)))),
canvasColor: scaleScheme.primaryScale.subtleBackground,
chipTheme: baseThemeData.chipTheme.copyWith(
backgroundColor: scaleScheme.primaryScale.elementBackground,
selectedColor: scaleScheme.primaryScale.activeElementBackground,
surfaceTintColor: scaleScheme.primaryScale.hoverElementBackground,
checkmarkColor: scaleScheme.primaryScale.border,
side: BorderSide(color: scaleScheme.primaryScale.border)),
elevatedButtonTheme: ElevatedButtonThemeData(
style: ElevatedButton.styleFrom(
backgroundColor: scaleScheme.primaryScale.elementBackground,
foregroundColor: scaleScheme.primaryScale.appText,
disabledBackgroundColor: scaleScheme.grayScale.elementBackground,
disabledForegroundColor: scaleScheme.grayScale.appText,
shape: RoundedRectangleBorder(
side: BorderSide(color: scaleScheme.primaryScale.border),
borderRadius:
BorderRadius.circular(8 * scaleConfig.borderRadiusScale))),
),
// chipTheme: baseThemeData.chipTheme.copyWith(
// backgroundColor: scaleScheme.primaryScale.elementBackground,
// selectedColor: scaleScheme.primaryScale.activeElementBackground,
// surfaceTintColor: scaleScheme.primaryScale.hoverElementBackground,
// checkmarkColor: scaleScheme.primaryScale.border,
// side: BorderSide(color: scaleScheme.primaryScale.border)),
elevatedButtonTheme: elevatedButtonTheme,
textSelectionTheme: TextSelectionThemeData(
cursorColor: scaleScheme.primaryScale.appText,
selectionColor: scaleScheme.primaryScale.appText.withAlpha(0x7F),
selectionHandleColor: scaleScheme.primaryScale.appText),
inputDecorationTheme:
ScaleInputDecoratorTheme(scaleScheme, scaleConfig, textTheme),
extensions: <ThemeExtension<dynamic>>[
scaleScheme,
scaleConfig,
scaleTheme
]);
cursorColor: scheme.primaryScale.appText,
selectionColor: scheme.primaryScale.appText.withAlpha(0x7F),
selectionHandleColor: scheme.primaryScale.appText),
extensions: <ThemeExtension<dynamic>>[scheme, scaleConfig, scaleTheme]);
return themeData;
}

68
lib/theme/models/radix_generator.dart
View file

@ -5,9 +5,6 @@ import 'package:flutter/material.dart';
import 'package:radix_colors/radix_colors.dart';
import '../../tools/tools.dart';
import 'scale_theme/scale_color.dart';
import 'scale_theme/scale_input_decorator_theme.dart';
import 'scale_theme/scale_scheme.dart';
import 'scale_theme/scale_theme.dart';
enum RadixThemeColor {
@ -291,6 +288,7 @@ extension ToScaleColor on RadixColor {
primaryText: scaleExtra.foregroundText,
borderText: step12,
dialogBorder: step9,
dialogBorderText: scaleExtra.foregroundText,
calloutBackground: step9,
calloutText: scaleExtra.foregroundText,
);
@ -609,7 +607,6 @@ ThemeData radixGenerator(Brightness brightness, RadixThemeColor themeColor) {
final textTheme = makeRadixTextTheme(brightness);
final radix = _radixScheme(brightness, themeColor);
final scaleScheme = radix.toScale();
final colorScheme = scaleScheme.toColorScheme(brightness);
final scaleConfig = ScaleConfig(
useVisualIndicators: false,
preferBorders: false,
@ -619,68 +616,7 @@ ThemeData radixGenerator(Brightness brightness, RadixThemeColor themeColor) {
final scaleTheme = ScaleTheme(
textTheme: textTheme, scheme: scaleScheme, config: scaleConfig);
final baseThemeData = ThemeData.from(
colorScheme: colorScheme, textTheme: textTheme, useMaterial3: true);
final themeData = baseThemeData.copyWith(
scrollbarTheme: baseThemeData.scrollbarTheme.copyWith(
thumbColor: WidgetStateProperty.resolveWith((states) {
if (states.contains(WidgetState.pressed)) {
return scaleScheme.primaryScale.border;
} else if (states.contains(WidgetState.hovered)) {
return scaleScheme.primaryScale.hoverBorder;
}
return scaleScheme.primaryScale.subtleBorder;
}), trackColor: WidgetStateProperty.resolveWith((states) {
if (states.contains(WidgetState.pressed)) {
return scaleScheme.primaryScale.activeElementBackground;
} else if (states.contains(WidgetState.hovered)) {
return scaleScheme.primaryScale.hoverElementBackground;
}
return scaleScheme.primaryScale.elementBackground;
}), trackBorderColor: WidgetStateProperty.resolveWith((states) {
if (states.contains(WidgetState.pressed)) {
return scaleScheme.primaryScale.subtleBorder;
} else if (states.contains(WidgetState.hovered)) {
return scaleScheme.primaryScale.subtleBorder;
}
return scaleScheme.primaryScale.subtleBorder;
})),
appBarTheme: baseThemeData.appBarTheme.copyWith(
backgroundColor: scaleScheme.primaryScale.border,
foregroundColor: scaleScheme.primaryScale.borderText),
bottomSheetTheme: baseThemeData.bottomSheetTheme.copyWith(
elevation: 0,
modalElevation: 0,
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(16),
topRight: Radius.circular(16)))),
canvasColor: scaleScheme.primaryScale.subtleBackground,
chipTheme: baseThemeData.chipTheme.copyWith(
backgroundColor: scaleScheme.primaryScale.elementBackground,
selectedColor: scaleScheme.primaryScale.activeElementBackground,
surfaceTintColor: scaleScheme.primaryScale.hoverElementBackground,
checkmarkColor: scaleScheme.primaryScale.primary,
side: BorderSide(color: scaleScheme.primaryScale.border)),
elevatedButtonTheme: ElevatedButtonThemeData(
style: ElevatedButton.styleFrom(
backgroundColor: scaleScheme.primaryScale.elementBackground,
foregroundColor: scaleScheme.primaryScale.primary,
disabledBackgroundColor: scaleScheme.grayScale.elementBackground,
disabledForegroundColor: scaleScheme.grayScale.primary,
shape: RoundedRectangleBorder(
side: BorderSide(color: scaleScheme.primaryScale.border),
borderRadius:
BorderRadius.circular(8 * scaleConfig.borderRadiusScale))),
),
inputDecorationTheme:
ScaleInputDecoratorTheme(scaleScheme, scaleConfig, textTheme),
extensions: <ThemeExtension<dynamic>>[
scaleScheme,
scaleConfig,
scaleTheme
]);
final themeData = scaleTheme.toThemeData(brightness);
return themeData;
}

7
lib/theme/models/scale_theme/scale_color.dart
View file

@ -17,6 +17,7 @@ class ScaleColor {
required this.primaryText,
required this.borderText,
required this.dialogBorder,
required this.dialogBorderText,
required this.calloutBackground,
required this.calloutText,
});
@ -36,6 +37,7 @@ class ScaleColor {
Color primaryText;
Color borderText;
Color dialogBorder;
Color dialogBorderText;
Color calloutBackground;
Color calloutText;
@ -55,6 +57,7 @@ class ScaleColor {
Color? foregroundText,
Color? borderText,
Color? dialogBorder,
Color? dialogBorderText,
Color? calloutBackground,
Color? calloutText,
}) =>
@ -76,6 +79,7 @@ class ScaleColor {
primaryText: foregroundText ?? this.primaryText,
borderText: borderText ?? this.borderText,
dialogBorder: dialogBorder ?? this.dialogBorder,
dialogBorderText: dialogBorderText ?? this.dialogBorderText,
calloutBackground: calloutBackground ?? this.calloutBackground,
calloutText: calloutText ?? this.calloutText);
@ -112,6 +116,9 @@ class ScaleColor {
const Color(0x00000000),
dialogBorder: Color.lerp(a.dialogBorder, b.dialogBorder, t) ??
const Color(0x00000000),
dialogBorderText:
Color.lerp(a.dialogBorderText, b.dialogBorderText, t) ??
const Color(0x00000000),
calloutBackground:
Color.lerp(a.calloutBackground, b.calloutBackground, t) ??
const Color(0x00000000),

1
lib/theme/models/scale_theme/scale_custom_dropdown_theme.dart
View file

@ -1,7 +1,6 @@
import 'package:animated_custom_dropdown/custom_dropdown.dart';
import 'package:flutter/material.dart';
import 'scale_scheme.dart';
import 'scale_theme.dart';
class ScaleCustomDropdownTheme {

117
lib/theme/models/scale_theme/scale_input_decorator_theme.dart
View file

@ -1,36 +1,61 @@
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'scale_scheme.dart';
import 'scale_theme.dart';
class ScaleInputDecoratorTheme extends InputDecorationTheme {
ScaleInputDecoratorTheme(
this._scaleScheme, ScaleConfig scaleConfig, this._textTheme)
: super(
border: OutlineInputBorder(
borderSide: BorderSide(color: _scaleScheme.primaryScale.border),
borderRadius:
BorderRadius.circular(8 * scaleConfig.borderRadiusScale)),
contentPadding: const EdgeInsets.all(8),
labelStyle: TextStyle(
color: _scaleScheme.primaryScale.subtleText.withAlpha(127)),
floatingLabelStyle:
TextStyle(color: _scaleScheme.primaryScale.subtleText),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(
color: _scaleScheme.primaryScale.hoverBorder, width: 2),
borderRadius:
BorderRadius.circular(8 * scaleConfig.borderRadiusScale)));
: hintAlpha = scaleConfig.preferBorders ? 127 : 255,
super(
contentPadding: const EdgeInsets.all(8),
labelStyle: TextStyle(color: _scaleScheme.primaryScale.subtleText),
floatingLabelStyle:
TextStyle(color: _scaleScheme.primaryScale.subtleText),
border: OutlineInputBorder(
borderSide: BorderSide(color: _scaleScheme.primaryScale.border),
borderRadius:
BorderRadius.circular(8 * scaleConfig.borderRadiusScale)),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(color: _scaleScheme.primaryScale.border),
borderRadius:
BorderRadius.circular(8 * scaleConfig.borderRadiusScale)),
disabledBorder: OutlineInputBorder(
borderSide: BorderSide(
color: _scaleScheme.grayScale.border.withAlpha(0x7F)),
borderRadius:
BorderRadius.circular(8 * scaleConfig.borderRadiusScale)),
errorBorder: OutlineInputBorder(
borderSide: BorderSide(color: _scaleScheme.errorScale.border),
borderRadius:
BorderRadius.circular(8 * scaleConfig.borderRadiusScale)),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(
color: _scaleScheme.primaryScale.hoverBorder, width: 2),
borderRadius:
BorderRadius.circular(8 * scaleConfig.borderRadiusScale)),
hoverColor:
_scaleScheme.primaryScale.hoverElementBackground.withAlpha(0x7F),
filled: true,
focusedErrorBorder: OutlineInputBorder(
borderSide:
BorderSide(color: _scaleScheme.errorScale.border, width: 2),
borderRadius:
BorderRadius.circular(8 * scaleConfig.borderRadiusScale)),
);
final ScaleScheme _scaleScheme;
final TextTheme _textTheme;
final int hintAlpha;
final int disabledAlpha = 127;
@override
TextStyle? get hintStyle => WidgetStateTextStyle.resolveWith((states) {
if (states.contains(WidgetState.disabled)) {
return TextStyle(color: _scaleScheme.grayScale.border);
}
return TextStyle(color: _scaleScheme.primaryScale.border);
return TextStyle(
color: _scaleScheme.primaryScale.border.withAlpha(hintAlpha));
});
@override
@ -46,7 +71,7 @@ class ScaleInputDecoratorTheme extends InputDecorationTheme {
WidgetStateBorderSide.resolveWith((states) {
if (states.contains(WidgetState.disabled)) {
return BorderSide(
color: _scaleScheme.grayScale.border.withAlpha(127));
color: _scaleScheme.grayScale.border.withAlpha(disabledAlpha));
}
if (states.contains(WidgetState.error)) {
if (states.contains(WidgetState.hovered)) {
@ -71,7 +96,7 @@ class ScaleInputDecoratorTheme extends InputDecorationTheme {
BorderSide? get outlineBorder => WidgetStateBorderSide.resolveWith((states) {
if (states.contains(WidgetState.disabled)) {
return BorderSide(
color: _scaleScheme.grayScale.border.withAlpha(127));
color: _scaleScheme.grayScale.border.withAlpha(disabledAlpha));
}
if (states.contains(WidgetState.error)) {
if (states.contains(WidgetState.hovered)) {
@ -97,7 +122,7 @@ class ScaleInputDecoratorTheme extends InputDecorationTheme {
@override
Color? get prefixIconColor => WidgetStateColor.resolveWith((states) {
if (states.contains(WidgetState.disabled)) {
return _scaleScheme.primaryScale.primary.withAlpha(127);
return _scaleScheme.primaryScale.primary.withAlpha(disabledAlpha);
}
if (states.contains(WidgetState.error)) {
return _scaleScheme.errorScale.primary;
@ -108,7 +133,7 @@ class ScaleInputDecoratorTheme extends InputDecorationTheme {
@override
Color? get suffixIconColor => WidgetStateColor.resolveWith((states) {
if (states.contains(WidgetState.disabled)) {
return _scaleScheme.primaryScale.primary.withAlpha(127);
return _scaleScheme.primaryScale.primary.withAlpha(disabledAlpha);
}
if (states.contains(WidgetState.error)) {
return _scaleScheme.errorScale.primary;
@ -121,7 +146,39 @@ class ScaleInputDecoratorTheme extends InputDecorationTheme {
final textStyle = _textTheme.bodyLarge ?? const TextStyle();
if (states.contains(WidgetState.disabled)) {
return textStyle.copyWith(
color: _scaleScheme.grayScale.border.withAlpha(127));
color: _scaleScheme.grayScale.border.withAlpha(disabledAlpha));
}
if (states.contains(WidgetState.error)) {
if (states.contains(WidgetState.hovered)) {
return textStyle.copyWith(
color: _scaleScheme.errorScale.hoverBorder);
}
if (states.contains(WidgetState.focused)) {
return textStyle.copyWith(
color: _scaleScheme.errorScale.hoverBorder);
}
return textStyle.copyWith(
color: _scaleScheme.errorScale.subtleBorder);
}
if (states.contains(WidgetState.hovered)) {
return textStyle.copyWith(
color: _scaleScheme.primaryScale.hoverBorder);
}
if (states.contains(WidgetState.focused)) {
return textStyle.copyWith(
color: _scaleScheme.primaryScale.hoverBorder);
}
return textStyle.copyWith(
color: _scaleScheme.primaryScale.border.withAlpha(hintAlpha));
});
@override
TextStyle? get floatingLabelStyle =>
WidgetStateTextStyle.resolveWith((states) {
final textStyle = _textTheme.bodyLarge ?? const TextStyle();
if (states.contains(WidgetState.disabled)) {
return textStyle.copyWith(
color: _scaleScheme.grayScale.border.withAlpha(disabledAlpha));
}
if (states.contains(WidgetState.error)) {
if (states.contains(WidgetState.hovered)) {
@ -146,18 +203,14 @@ class ScaleInputDecoratorTheme extends InputDecorationTheme {
return textStyle.copyWith(color: _scaleScheme.primaryScale.border);
});
@override
TextStyle? get floatingLabelStyle => labelStyle;
@override
TextStyle? get helperStyle => WidgetStateTextStyle.resolveWith((states) {
final textStyle = _textTheme.bodySmall ?? const TextStyle();
if (states.contains(WidgetState.disabled)) {
return textStyle.copyWith(
color: _scaleScheme.grayScale.border.withAlpha(127));
return textStyle.copyWith(color: _scaleScheme.grayScale.border);
}
return textStyle.copyWith(
color: _scaleScheme.secondaryScale.border.withAlpha(127));
color: _scaleScheme.primaryScale.border.withAlpha(hintAlpha));
});
@override
@ -165,6 +218,14 @@ class ScaleInputDecoratorTheme extends InputDecorationTheme {
final textStyle = _textTheme.bodySmall ?? const TextStyle();
return textStyle.copyWith(color: _scaleScheme.errorScale.primary);
});
@override
void debugFillProperties(DiagnosticPropertiesBuilder properties) {
super.debugFillProperties(properties);
properties
..add(IntProperty('disabledAlpha', disabledAlpha))
..add(IntProperty('hintAlpha', hintAlpha));
}
}
extension ScaleInputDecoratorThemeExt on ScaleTheme {

13
lib/theme/models/scale_theme/scale_scheme.dart
View file

@ -76,8 +76,8 @@ class ScaleScheme extends ThemeExtension<ScaleScheme> {
ColorScheme toColorScheme(Brightness brightness) => ColorScheme(
brightness: brightness,
primary: primaryScale.primary, // reviewed
onPrimary: primaryScale.primaryText, // reviewed
primary: primaryScale.primary,
onPrimary: primaryScale.primaryText,
// primaryContainer: primaryScale.hoverElementBackground,
// onPrimaryContainer: primaryScale.subtleText,
secondary: secondaryScale.primary,
@ -92,15 +92,12 @@ class ScaleScheme extends ThemeExtension<ScaleScheme> {
onError: errorScale.primaryText,
// errorContainer: errorScale.hoverElementBackground,
// onErrorContainer: errorScale.subtleText,
background: grayScale.appBackground, // reviewed
onBackground: grayScale.appText, // reviewed
surface: primaryScale.appBackground, // reviewed
onSurface: primaryScale.appText, // reviewed
surfaceVariant: secondaryScale.appBackground,
surface: primaryScale.appBackground,
onSurface: primaryScale.appText,
onSurfaceVariant: secondaryScale.appText,
outline: primaryScale.border,
outlineVariant: secondaryScale.border,
shadow: primaryScale.primary.darken(80),
shadow: primaryScale.appBackground.darken(60),
//scrim: primaryScale.background,
// inverseSurface: primaryScale.subtleText,
// onInverseSurface: primaryScale.subtleBackground,

83
lib/theme/models/scale_theme/scale_theme.dart
View file

@ -1,5 +1,6 @@
import 'package:flutter/material.dart';
import 'scale_input_decorator_theme.dart';
import 'scale_scheme.dart';
export 'scale_color.dart';
@ -41,4 +42,86 @@ class ScaleTheme extends ThemeExtension<ScaleTheme> {
scheme: scheme.lerp(other.scheme, t),
config: config.lerp(other.config, t));
}
ThemeData toThemeData(Brightness brightness) {
final colorScheme = scheme.toColorScheme(brightness);
final baseThemeData = ThemeData.from(
colorScheme: colorScheme, textTheme: textTheme, useMaterial3: true);
final elevatedButtonTheme = ElevatedButtonThemeData(
style: ElevatedButton.styleFrom(
backgroundColor: scheme.primaryScale.elementBackground,
foregroundColor: scheme.primaryScale.appText,
disabledBackgroundColor:
scheme.grayScale.elementBackground.withAlpha(0x7F),
disabledForegroundColor:
scheme.grayScale.primary.withAlpha(0x7F),
shape: RoundedRectangleBorder(
side: BorderSide(color: scheme.primaryScale.border),
borderRadius:
BorderRadius.circular(8 * config.borderRadiusScale)))
.copyWith(side: WidgetStateProperty.resolveWith((states) {
if (states.contains(WidgetState.disabled)) {
return BorderSide(color: scheme.grayScale.border.withAlpha(0x7F));
} else if (states.contains(WidgetState.pressed)) {
return BorderSide(
color: scheme.primaryScale.border,
strokeAlign: BorderSide.strokeAlignOutside);
} else if (states.contains(WidgetState.hovered)) {
return BorderSide(color: scheme.primaryScale.hoverBorder);
} else if (states.contains(WidgetState.focused)) {
return BorderSide(color: scheme.primaryScale.hoverBorder, width: 2);
}
return BorderSide(color: scheme.primaryScale.border);
})));
final themeData = baseThemeData.copyWith(
scrollbarTheme: baseThemeData.scrollbarTheme.copyWith(
thumbColor: WidgetStateProperty.resolveWith((states) {
if (states.contains(WidgetState.pressed)) {
return scheme.primaryScale.border;
} else if (states.contains(WidgetState.hovered)) {
return scheme.primaryScale.hoverBorder;
}
return scheme.primaryScale.subtleBorder;
}), trackColor: WidgetStateProperty.resolveWith((states) {
if (states.contains(WidgetState.pressed)) {
return scheme.primaryScale.activeElementBackground;
} else if (states.contains(WidgetState.hovered)) {
return scheme.primaryScale.hoverElementBackground;
}
return scheme.primaryScale.elementBackground;
}), trackBorderColor: WidgetStateProperty.resolveWith((states) {
if (states.contains(WidgetState.pressed)) {
return scheme.primaryScale.subtleBorder;
} else if (states.contains(WidgetState.hovered)) {
return scheme.primaryScale.subtleBorder;
}
return scheme.primaryScale.subtleBorder;
})),
appBarTheme: baseThemeData.appBarTheme.copyWith(
backgroundColor: scheme.primaryScale.border,
foregroundColor: scheme.primaryScale.borderText),
bottomSheetTheme: baseThemeData.bottomSheetTheme.copyWith(
elevation: 0,
modalElevation: 0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(16 * config.borderRadiusScale),
topRight: Radius.circular(16 * config.borderRadiusScale)))),
canvasColor: scheme.primaryScale.subtleBackground,
chipTheme: baseThemeData.chipTheme.copyWith(
backgroundColor: scheme.primaryScale.elementBackground,
selectedColor: scheme.primaryScale.activeElementBackground,
surfaceTintColor: scheme.primaryScale.hoverElementBackground,
checkmarkColor: scheme.primaryScale.primary,
side: BorderSide(color: scheme.primaryScale.border)),
elevatedButtonTheme: elevatedButtonTheme,
inputDecorationTheme:
ScaleInputDecoratorTheme(scheme, config, textTheme),
extensions: <ThemeExtension<dynamic>>[scheme, config, this]);
return themeData;
}
}

5
lib/theme/models/scale_theme/scale_tile_theme.dart
View file

@ -40,7 +40,10 @@ extension ScaleTileThemeExt on ScaleTheme {
final shapeBorder = RoundedRectangleBorder(
side: config.useVisualIndicators
? BorderSide(width: 2, color: borderColor, strokeAlign: 0)
? BorderSide(
width: 2,
color: borderColor,
)
: BorderSide.none,
borderRadius: BorderRadius.circular(8 * config.borderRadiusScale));

16
lib/theme/models/scale_theme/scale_toast_theme.dart
View file

@ -1,6 +1,5 @@
import 'package:flutter/material.dart';
import 'scale_scheme.dart';
import 'scale_theme.dart';
enum ScaleToastKind {
@ -35,14 +34,6 @@ extension ScaleToastThemeExt on ScaleTheme {
ScaleToastTheme toastTheme(ScaleToastKind kind) {
final toastScaleColor = scheme.scale(ScaleKind.tertiary);
Icon icon;
switch (kind) {
case ScaleToastKind.info:
icon = const Icon(Icons.info, size: 32);
case ScaleToastKind.error:
icon = const Icon(Icons.dangerous, size: 32);
}
final primaryColor = toastScaleColor.calloutText;
final borderColor = toastScaleColor.border;
final backgroundColor = config.useVisualIndicators
@ -54,6 +45,13 @@ extension ScaleToastThemeExt on ScaleTheme {
final titleColor = config.useVisualIndicators
? toastScaleColor.calloutBackground
: toastScaleColor.calloutText;
Icon icon;
switch (kind) {
case ScaleToastKind.info:
icon = Icon(Icons.info, size: 32, color: primaryColor);
case ScaleToastKind.error:
icon = Icon(Icons.dangerous, size: 32, color: primaryColor);
}
return ScaleToastTheme(
primaryColor: primaryColor,

21
lib/theme/views/avatar_widget.dart
View file

@ -5,7 +5,7 @@ import 'package:flutter/widgets.dart';
import '../theme.dart';
class AvatarWidget extends StatelessWidget {
AvatarWidget({
const AvatarWidget({
required String name,
required double size,
required Color borderColor,
@ -38,15 +38,11 @@ class AvatarWidget extends StatelessWidget {
height: _size,
width: _size,
decoration: BoxDecoration(
shape: BoxShape.circle,
border: _scaleConfig.useVisualIndicators
? Border.all(
color: _borderColor,
width: 1 * (_size ~/ 32 + 1),
strokeAlign: BorderSide.strokeAlignOutside)
: null,
color: _borderColor,
),
shape: BoxShape.circle,
border: Border.all(
color: _borderColor,
width: 1 * (_size ~/ 32 + 1),
strokeAlign: BorderSide.strokeAlignOutside)),
child: AvatarImage(
//size: 32,
backgroundImage: _imageProvider,
@ -55,14 +51,15 @@ class AvatarWidget extends StatelessWidget {
? _foregroundColor
: _backgroundColor,
child: Text(
shortname,
shortname.isNotEmpty ? shortname : '?',
softWrap: false,
style: _textStyle.copyWith(
color: _scaleConfig.useVisualIndicators &&
!_scaleConfig.preferBorders
? _backgroundColor
: _foregroundColor,
),
)));
).fit().paddingAll(_size / 16)));
}
////////////////////////////////////////////////////////////////////////////

11
lib/theme/views/slider_tile.dart
View file

@ -125,16 +125,21 @@ class SliderTile extends StatelessWidget {
child: ListTile(
onTap: onTap,
dense: true,
visualDensity: const VisualDensity(vertical: -4),
visualDensity:
const VisualDensity(horizontal: -4, vertical: -4),
title: Text(
title,
overflow: TextOverflow.fade,
softWrap: false,
),
subtitle: subtitle.isNotEmpty ? Text(subtitle) : null,
minTileHeight: 48,
iconColor: scaleTileTheme.textColor,
textColor: scaleTileTheme.textColor,
leading: FittedBox(child: leading),
trailing: FittedBox(child: trailing))))));
leading:
leading != null ? FittedBox(child: leading) : null,
trailing: trailing != null
? FittedBox(child: trailing)
: null)))));
}
}

35
lib/theme/views/styled_alert.dart
View file

@ -94,16 +94,11 @@ Future<void> showErrorModal(
{required BuildContext context,
required String title,
required String text}) async {
// final theme = Theme.of(context);
// final scale = theme.extension<ScaleScheme>()!;
// final scaleConfig = theme.extension<ScaleConfig>()!;
await Alert(
context: context,
style: _alertStyle(context),
useRootNavigator: false,
type: AlertType.error,
//style: AlertStyle(),
title: title,
desc: text,
buttons: [
@ -122,10 +117,6 @@ Future<void> showErrorModal(
),
)
],
//backgroundColor: Colors.black,
//titleColor: Colors.white,
//textColor: Colors.white,
).show();
}
@ -144,16 +135,11 @@ Future<void> showWarningModal(
{required BuildContext context,
required String title,
required String text}) async {
// final theme = Theme.of(context);
// final scale = theme.extension<ScaleScheme>()!;
// final scaleConfig = theme.extension<ScaleConfig>()!;
await Alert(
context: context,
style: _alertStyle(context),
useRootNavigator: false,
type: AlertType.warning,
//style: AlertStyle(),
title: title,
desc: text,
buttons: [
@ -172,10 +158,6 @@ Future<void> showWarningModal(
),
)
],
//backgroundColor: Colors.black,
//titleColor: Colors.white,
//textColor: Colors.white,
).show();
}
@ -183,16 +165,11 @@ Future<void> showWarningWidgetModal(
{required BuildContext context,
required String title,
required Widget child}) async {
// final theme = Theme.of(context);
// final scale = theme.extension<ScaleScheme>()!;
// final scaleConfig = theme.extension<ScaleConfig>()!;
await Alert(
context: context,
style: _alertStyle(context),
useRootNavigator: false,
type: AlertType.warning,
//style: AlertStyle(),
title: title,
content: child,
buttons: [
@ -211,10 +188,6 @@ Future<void> showWarningWidgetModal(
),
)
],
//backgroundColor: Colors.black,
//titleColor: Colors.white,
//textColor: Colors.white,
).show();
}
@ -222,10 +195,6 @@ Future<bool> showConfirmModal(
{required BuildContext context,
required String title,
required String text}) async {
// final theme = Theme.of(context);
// final scale = theme.extension<ScaleScheme>()!;
// final scaleConfig = theme.extension<ScaleConfig>()!;
var confirm = false;
await Alert(
@ -266,10 +235,6 @@ Future<bool> showConfirmModal(
),
)
],
//backgroundColor: Colors.black,
//titleColor: Colors.white,
//textColor: Colors.white,
).show();
return confirm;

2
lib/theme/views/styled_dialog.dart
View file

@ -21,7 +21,7 @@ class StyledDialog extends StatelessWidget {
Radius.circular(16 * scaleConfig.borderRadiusScale)),
),
contentPadding: const EdgeInsets.all(4),
backgroundColor: scale.primaryScale.dialogBorder,
backgroundColor: scale.primaryScale.border,
title: Text(
title,
style: textTheme.titleMedium!

61
lib/theme/views/widget_helpers.dart
View file

@ -114,14 +114,13 @@ extension LabelExt on Widget {
{ScaleColor? scale}) {
final theme = Theme.of(context);
final scaleScheme = theme.extension<ScaleScheme>()!;
// final scaleConfig = theme.extension<ScaleConfig>()!;
scale = scale ?? scaleScheme.primaryScale;
return Wrap(crossAxisAlignment: WrapCrossAlignment.center, children: [
return Wrap(crossAxisAlignment: WrapCrossAlignment.end, children: [
Text(
'$label:',
style: theme.textTheme.titleLarge!.copyWith(color: scale.border),
).paddingLTRB(0, 0, 8, 8),
style: theme.textTheme.bodyLarge!.copyWith(color: scale.hoverBorder),
).paddingLTRB(0, 0, 8, 0),
this
]);
}
@ -431,6 +430,31 @@ Widget styledTitleContainer({
]));
}
Widget styledCard({
required BuildContext context,
required Widget child,
Color? borderColor,
Color? backgroundColor,
Color? titleColor,
}) {
final theme = Theme.of(context);
final scale = theme.extension<ScaleScheme>()!;
final scaleConfig = theme.extension<ScaleConfig>()!;
return DecoratedBox(
decoration: ShapeDecoration(
color: backgroundColor ?? scale.primaryScale.elementBackground,
shape: RoundedRectangleBorder(
side: (scaleConfig.useVisualIndicators || scaleConfig.preferBorders)
? BorderSide(
color: borderColor ?? scale.primaryScale.border, width: 2)
: BorderSide.none,
borderRadius:
BorderRadius.circular(12 * scaleConfig.borderRadiusScale),
)),
child: child.paddingAll(4));
}
Widget styledBottomSheet({
required BuildContext context,
required String title,
@ -500,6 +524,12 @@ const grayColorFilter = ColorFilter.matrix(<double>[
0,
]);
const dodgeFilter =
ColorFilter.mode(Color.fromARGB(96, 255, 255, 255), BlendMode.srcIn);
const overlayFilter =
ColorFilter.mode(Color.fromARGB(127, 255, 255, 255), BlendMode.dstIn);
Container clipBorder({
required bool clipEnabled,
required bool borderEnabled,
@ -510,16 +540,17 @@ Container clipBorder({
// ignore: avoid_unnecessary_containers, use_decorated_box
Container(
decoration: ShapeDecoration(
color: borderColor,
shape: RoundedRectangleBorder(
borderRadius: clipEnabled
? BorderRadius.circular(borderRadius)
: BorderRadius.zero,
)),
side: borderEnabled && clipEnabled
? BorderSide(color: borderColor, width: 2)
: BorderSide.none,
borderRadius: clipEnabled
? BorderRadius.circular(borderRadius)
: BorderRadius.zero,
)),
child: ClipRRect(
clipBehavior: Clip.hardEdge,
borderRadius: clipEnabled
? BorderRadius.circular(borderRadius)
: BorderRadius.zero,
child: child)
.paddingAll(clipEnabled && borderEnabled ? 2 : 0));
clipBehavior: Clip.antiAliasWithSaveLayer,
borderRadius: clipEnabled
? BorderRadius.circular(borderRadius - 2)
: BorderRadius.zero,
child: child));