Simplify styling code

This commit is contained in:
Ming Ming 2024-08-24 16:45:39 +08:00
parent efc57f12c2
commit f35860c7b6
11 changed files with 71 additions and 48 deletions

View file

@ -55,33 +55,6 @@ extension ThemeExtension on ThemeData {
tileMode: TileMode.clamp,
);
}
/// Apply surface tint to [color] based on the [elevation] level
///
/// This function is a temporary workaround for widgets not yet fully
/// supported Material 3
Color elevate(Color color, int elevation) {
final double tintOpacity;
switch (elevation) {
case 1:
tintOpacity = 0.05;
break;
case 2:
tintOpacity = 0.08;
break;
case 3:
tintOpacity = 0.11;
break;
case 4:
tintOpacity = 0.12;
break;
case 5:
default:
tintOpacity = 0.14;
break;
}
return Color.lerp(color, colorScheme.surfaceTint, tintOpacity)!;
}
}
class DarkModeSwitchTheme extends StatelessWidget {

View file

@ -1,8 +1,8 @@
import 'package:flutter/material.dart';
import 'package:logging/logging.dart';
import 'package:nc_photos/app_localizations.dart';
import 'package:nc_photos/theme.dart';
import 'package:np_codegen/np_codegen.dart';
import 'package:np_ui/np_ui.dart';
part 'changelog.g.dart';
part 'changelog/changelog_550.dart';

View file

@ -309,8 +309,10 @@ class _ScrollLabel extends StatelessWidget {
return Padding(
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
child: DefaultTextStyle(
style: Theme.of(context).textTheme.titleMedium!.copyWith(
color: Theme.of(context).colorScheme.onSecondaryContainer),
style: Theme.of(context).textStyleColored(
(textTheme) => textTheme.titleMedium,
(colorScheme) => colorScheme.onSecondaryContainer,
)!,
child: Text(text),
),
);

View file

@ -27,7 +27,6 @@ import 'package:nc_photos/np_api_util.dart';
import 'package:nc_photos/snack_bar_manager.dart';
import 'package:nc_photos/stream_extension.dart';
import 'package:nc_photos/stream_util.dart';
import 'package:nc_photos/theme.dart';
import 'package:nc_photos/theme/dimension.dart';
import 'package:nc_photos/widget/collection_browser.dart';
import 'package:nc_photos/widget/measure.dart';
@ -37,6 +36,7 @@ import 'package:np_codegen/np_codegen.dart';
import 'package:np_common/object_util.dart';
import 'package:np_datetime/np_datetime.dart';
import 'package:np_gps_map/np_gps_map.dart';
import 'package:np_ui/np_ui.dart';
import 'package:to_string/to_string.dart';
part 'map_browser.g.dart';

View file

@ -10,6 +10,7 @@ import 'package:nc_photos/k.dart' as k;
import 'package:np_codegen/np_codegen.dart';
import 'package:np_common/unique.dart';
import 'package:np_string/np_string.dart';
import 'package:np_ui/np_ui.dart';
import 'package:to_string/to_string.dart';
part 'protected_page_password_auth_dialog.g.dart';

View file

@ -100,8 +100,9 @@ class _ErrorNoticeState extends State<_ErrorNotice>
(t) => Offset(tremblingTransform(3, t) * .05, 0))),
child: Text(
widget.text,
style: Theme.of(context).textTheme.bodySmall!.copyWith(
color: Theme.of(context).colorScheme.error,
style: Theme.of(context).textStyleColored(
(textTheme) => textTheme.bodySmall,
(colorScheme) => colorScheme.error,
),
),
),

View file

@ -12,6 +12,7 @@ import 'package:nc_photos/widget/protected_page_password_auth_dialog.dart';
import 'package:nc_photos/widget/protected_page_pin_auth_dialog.dart';
import 'package:np_codegen/np_codegen.dart';
import 'package:np_string/np_string.dart';
import 'package:np_ui/np_ui.dart';
import 'package:to_string/to_string.dart';
part 'app_lock/bloc.dart';
@ -71,10 +72,11 @@ class _WrappedAppLockSettings extends StatelessWidget {
? L10n.global().disabledText
: L10n.global().enabledText,
textAlign: TextAlign.center,
style: Theme.of(context).textTheme.titleSmall!.copyWith(
color: appLockType == null
? Theme.of(context).colorScheme.error
: Theme.of(context).colorScheme.primary,
style: Theme.of(context).textStyleColored(
(textTheme) => textTheme.titleSmall,
(colorScheme) => appLockType == null
? colorScheme.error
: colorScheme.primary,
),
),
),

View file

@ -1,4 +1,5 @@
import 'package:flutter/material.dart';
import 'package:np_ui/np_ui.dart';
class SettingsListCaption extends StatelessWidget {
const SettingsListCaption({
@ -12,8 +13,9 @@ class SettingsListCaption extends StatelessWidget {
padding: const EdgeInsets.fromLTRB(16, 16, 16, 8),
child: Text(
label,
style: Theme.of(context).textTheme.titleMedium!.copyWith(
color: Theme.of(context).colorScheme.primary,
style: Theme.of(context).textStyleColored(
(textTheme) => textTheme.titleMedium,
(colorScheme) => colorScheme.primary,
),
),
);

View file

@ -211,8 +211,9 @@ class _VideoViewerState extends State<VideoViewer>
valueListenable: _controller,
builder: (context, VideoPlayerValue value, child) => Text(
_durationToString(value.position),
style: Theme.of(context).textTheme.labelLarge!.copyWith(
color: Theme.of(context).colorScheme.onSurface,
style: Theme.of(context).textStyleColored(
(textTheme) => textTheme.labelLarge,
(colorScheme) => colorScheme.onSurface,
),
),
),
@ -235,8 +236,9 @@ class _VideoViewerState extends State<VideoViewer>
if (_controller.value.duration != Duration.zero)
Text(
_durationToString(_controller.value.duration),
style: Theme.of(context).textTheme.labelLarge!.copyWith(
color: Theme.of(context).colorScheme.onSurface,
style: Theme.of(context).textStyleColored(
(textTheme) => textTheme.labelLarge,
(colorScheme) => colorScheme.onSurface,
),
),
const SizedBox(width: 4),

View file

@ -9,5 +9,6 @@ export 'src/pixel_image_provider.dart';
export 'src/shimmer.dart';
export 'src/stateful_slider.dart';
export 'src/switch_form_field.dart';
export 'src/theme_util.dart';
export 'src/translucent_sliver_app_bar.dart';
export 'src/unbounded_list_tile.dart';

View file

@ -0,0 +1,39 @@
import 'package:flutter/material.dart';
extension ThemeDataExtension on ThemeData {
/// Apply surface tint to [color] based on the [elevation] level
///
/// This function is a temporary workaround for widgets not yet fully
/// supported Material 3
Color elevate(Color color, int elevation) {
final double tintOpacity;
switch (elevation) {
case 1:
tintOpacity = 0.05;
break;
case 2:
tintOpacity = 0.08;
break;
case 3:
tintOpacity = 0.11;
break;
case 4:
tintOpacity = 0.12;
break;
case 5:
default:
tintOpacity = 0.14;
break;
}
return Color.lerp(color, colorScheme.surfaceTint, tintOpacity)!;
}
TextStyle? textStyleColored(
TextStyle? Function(TextTheme textTheme) textStyleBuilder,
Color? Function(ColorScheme colorScheme) colorBuilder,
) {
return textStyleBuilder(textTheme)?.copyWith(
color: colorBuilder(colorScheme),
);
}
}