Fix styling of chips

This commit is contained in:
Dain Nilsson 2024-07-03 14:27:54 +02:00
parent 97d9f328ee
commit 3d1345577f
No known key found for this signature in database
GPG Key ID: F04367096FBA95E8
11 changed files with 75 additions and 76 deletions

View File

@ -155,7 +155,6 @@ class AboutPage extends ConsumerWidget {
ActionChip(
key: diagnosticsChip,
avatar: const Icon(Symbols.bug_report),
backgroundColor: Theme.of(context).colorScheme.surfaceVariant,
label: Text(l10n.s_run_diagnostics),
onPressed: () async {
_log.info('Running diagnostics...');
@ -188,7 +187,6 @@ class AboutPage extends ConsumerWidget {
FilterChip(
key: screenshotChip,
label: Text(l10n.s_allow_screenshots),
backgroundColor: Theme.of(context).colorScheme.surfaceVariant,
selected: ref.watch(androidAllowScreenshotsProvider),
onSelected: (value) async {
ref
@ -236,7 +234,6 @@ class LoggingPanel extends ConsumerWidget {
ActionChip(
key: logChip,
avatar: const Icon(Symbols.content_copy),
backgroundColor: Theme.of(context).colorScheme.surfaceVariant,
label: Text(l10n.s_copy_log),
onPressed: () async {
_log.info('Copying log to clipboard ($version)...');

View File

@ -384,7 +384,6 @@ class _HelperWaiterState extends ConsumerState<_HelperWaiter> {
actionsBuilder: (context, expanded) => [
ActionChip(
avatar: const Icon(Symbols.content_copy),
backgroundColor: Theme.of(context).colorScheme.surfaceVariant,
label: Text(l10n.s_copy_log),
onPressed: () async {
_log.info('Copying log to clipboard ($version)...');

View File

@ -358,13 +358,7 @@ class _HeroAvatar extends StatelessWidget {
),
),
padding: const EdgeInsets.all(12),
child: Theme(
// Give the avatar a transparent background
data: theme.copyWith(
colorScheme:
theme.colorScheme.copyWith(surfaceVariant: Colors.transparent)),
child: child,
),
);
}
}

View File

@ -61,7 +61,6 @@ class _CapabilityForm extends StatelessWidget {
.where((c) => capabilities & c.value != 0)
.map((c) => FilterChip(
label: Text(c.getDisplayName(l10n)),
backgroundColor: Theme.of(context).colorScheme.surfaceVariant,
key: Key('$keyPrefix.${c.name}'),
selected: enabled & c.value != 0,
onSelected: (_) {

View File

@ -202,7 +202,6 @@ class _ImportActionChip extends ConsumerWidget {
@override
Widget build(BuildContext context, WidgetRef ref) {
return ActionChip(
backgroundColor: Theme.of(context).colorScheme.surfaceVariant,
onPressed: !disabled
? () async {
_importAction(context, ref);

View File

@ -84,8 +84,6 @@ class _AddAccountDialogState extends ConsumerState<AddAccountDialog> {
children: [
ActionChip(
avatar: const Icon(Symbols.qr_code_scanner),
backgroundColor:
Theme.of(context).colorScheme.surfaceVariant,
label: Text(l10n.s_qr_scan),
onPressed: () async {
if (qrScanner != null) {
@ -107,8 +105,6 @@ class _AddAccountDialogState extends ConsumerState<AddAccountDialog> {
ActionChip(
key: addAccountManuallyButton,
avatar: const Icon(Symbols.edit),
backgroundColor:
Theme.of(context).colorScheme.surfaceVariant,
label: Text(l10n.s_add_manually),
onPressed: () async {
Navigator.of(context).pop();

View File

@ -470,8 +470,6 @@ class _OathAddAccountPageState extends ConsumerState<OathAddAccountPage> {
if (oathState?.version.isAtLeast(4, 2) ?? true)
FilterChip(
key: keys.requireTouchFilterChip,
backgroundColor:
Theme.of(context).colorScheme.surfaceVariant,
label: Text(l10n.s_require_touch),
selected: _touch,
onSelected: (value) {

View File

@ -221,8 +221,6 @@ class _GenerateKeyDialogState extends ConsumerState<GenerateKeyDialog> {
),
if (_generateType == GenerateType.certificate)
FilterChip(
backgroundColor:
Theme.of(context).colorScheme.surfaceVariant,
label: Text(dateFormatter.format(_validTo)),
onSelected: _generating
? null

View File

@ -346,8 +346,6 @@ class _ManageKeyDialogState extends ConsumerState<ManageKeyDialog> {
),
FilterChip(
key: keys.pinLockManagementKeyChip,
backgroundColor:
Theme.of(context).colorScheme.surfaceVariant,
label: Text(l10n.s_protect_key),
selected: _storeKey,
onSelected: (value) {

View File

@ -25,14 +25,28 @@ class AppTheme {
Brightness.dark => getDarkTheme(primaryColor),
};
static ThemeData getLightTheme(Color primaryColor) => ThemeData(
useMaterial3: true,
colorScheme: ColorScheme.fromSeed(
brightness: Brightness.light,
static ColorScheme _colorScheme(Brightness brightness, Color primaryColor) =>
switch (brightness) {
Brightness.dark => ColorScheme.fromSeed(
seedColor: primaryColor,
brightness: brightness,
background: const Color(0xff282828),
onSurface: const Color(0xeeffffff),
onSurfaceVariant: const Color(0xaaffffff),
),
Brightness.light => ColorScheme.fromSeed(
seedColor: primaryColor,
brightness: brightness,
onSurface: const Color(0xbb000000),
onSurfaceVariant: const Color(0x99000000),
),
)
};
static ThemeData getLightTheme(Color primaryColor) {
final colorScheme = _colorScheme(Brightness.light, primaryColor);
return ThemeData(
useMaterial3: true,
colorScheme: colorScheme,
fontFamily: 'Roboto',
appBarTheme: const AppBarTheme(
color: Colors.transparent,
@ -50,17 +64,19 @@ class AppTheme {
borderRadius: BorderRadius.all(Radius.circular(8.0)),
),
),
);
static ThemeData getDarkTheme(Color primaryColor) => ThemeData(
useMaterial3: true,
colorScheme: ColorScheme.fromSeed(
brightness: Brightness.dark,
seedColor: primaryColor,
background: const Color(0xff282828),
onSurface: const Color(0xeeffffff),
onSurfaceVariant: const Color(0xaaffffff),
chipTheme: ChipThemeData(
backgroundColor: colorScheme.surfaceContainerHighest,
labelStyle:
TextStyle(fontFamily: 'Roboto', color: colorScheme.onSurface),
),
);
}
static ThemeData getDarkTheme(Color primaryColor) {
final colorScheme = _colorScheme(Brightness.dark, primaryColor);
return ThemeData(
useMaterial3: true,
colorScheme: colorScheme,
fontFamily: 'Roboto',
appBarTheme: const AppBarTheme(
color: Colors.transparent,
@ -78,8 +94,14 @@ class AppTheme {
borderRadius: BorderRadius.all(Radius.circular(8.0)),
),
),
chipTheme: ChipThemeData(
backgroundColor: colorScheme.surfaceContainerHighest,
labelStyle:
TextStyle(fontFamily: 'Roboto', color: colorScheme.onSurface),
),
);
}
}
/* TODO: Remove this. It is left here as a reference as we adjust styles to work with Flutter 3.7.
/// This fixes the issue with FilterChip resizing vertically on toggle.

View File

@ -71,7 +71,7 @@ class _ChoiceFilterChipState<T> extends State<ChoiceFilterChip<T>> {
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(4)),
),
color: Theme.of(context).colorScheme.background,
color: Theme.of(context).colorScheme.surfaceContainerHighest,
popUpAnimationStyle: AnimationStyle(duration: Duration.zero),
items: widget.items
.map((e) => PopupMenuItem<T>(
@ -91,7 +91,6 @@ class _ChoiceFilterChipState<T> extends State<ChoiceFilterChip<T>> {
return FilterChip(
tooltip: widget.tooltip,
avatar: widget.avatar,
backgroundColor: Theme.of(context).colorScheme.surfaceVariant,
labelPadding: const EdgeInsets.only(left: 4),
label: Row(
mainAxisSize: MainAxisSize.min,
@ -102,7 +101,7 @@ class _ChoiceFilterChipState<T> extends State<ChoiceFilterChip<T>> {
child: Icon(
_showing ? Symbols.arrow_drop_up : Symbols.arrow_drop_down,
color: ChipTheme.of(context).checkmarkColor,
size: 18,
size: 16,
),
),
],