From 4a27c27270539f4a896ca41575bc15332df32085 Mon Sep 17 00:00:00 2001 From: Vadim <44135514+vodemn@users.noreply.github.com> Date: Tue, 7 May 2024 20:07:16 +0200 Subject: [PATCH] unified components elevation --- lib/res/dimens.dart | 5 +++++ lib/res/theme.dart | 21 ++++++++++++++----- .../widget_top_bar_metering.dart | 3 ++- .../widget_bottom_controls_bar.dart | 3 ++- .../widget_metering_config_timer.dart | 3 ++- 5 files changed, 27 insertions(+), 8 deletions(-) diff --git a/lib/res/dimens.dart b/lib/res/dimens.dart index 430d0d5..0e03b22 100644 --- a/lib/res/dimens.dart +++ b/lib/res/dimens.dart @@ -7,6 +7,11 @@ class Dimens { static const double borderRadiusL = 24; static const double borderRadiusXL = 32; + static const double elevationLevel0 = 0; + static const double elevationLevel1 = 1; + static const double elevationLevel2 = 3; + static const double elevationLevel3 = 6; + static const double grid4 = 4; static const double grid8 = 8; static const double grid16 = 16; diff --git a/lib/res/theme.dart b/lib/res/theme.dart index 99c44fd..ef79379 100644 --- a/lib/res/theme.dart +++ b/lib/res/theme.dart @@ -29,15 +29,16 @@ ThemeData themeFrom(Color primaryColor, Brightness brightness) { primaryColor: primaryColor, colorScheme: scheme, appBarTheme: AppBarTheme( - elevation: 4, - color: scheme.background, + elevation: Dimens.elevationLevel0, + scrolledUnderElevation: Dimens.elevationLevel2, + color: scheme.surface, foregroundColor: scheme.onBackground, surfaceTintColor: scheme.surfaceTint, ), cardTheme: CardTheme( clipBehavior: Clip.antiAlias, color: scheme.surface, - elevation: 4, + elevation: Dimens.elevationLevel1, margin: EdgeInsets.zero, shadowColor: Colors.transparent, shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(Dimens.borderRadiusL)), @@ -47,7 +48,7 @@ ThemeData themeFrom(Color primaryColor, Brightness brightness) { dialogTheme: DialogTheme( backgroundColor: scheme.surface, surfaceTintColor: scheme.surfaceTint, - elevation: 6, + elevation: Dimens.elevationLevel3, ), dividerColor: scheme.outlineVariant, dividerTheme: DividerThemeData( @@ -59,7 +60,7 @@ ThemeData themeFrom(Color primaryColor, Brightness brightness) { iconColor: scheme.onSurface, textColor: scheme.onSurface, ), - scaffoldBackgroundColor: scheme.background, + scaffoldBackgroundColor: scheme.surface, ); return theme.copyWith( listTileTheme: ListTileThemeData( @@ -102,3 +103,13 @@ ColorScheme _colorSchemeFromColor(Color primaryColor, Brightness brightness) { outlineVariant: Color(scheme.outlineVariant), ); } + +extension ElevatedSurfaceTheme on ColorScheme { + Color _surfaceWithElevation(double elevation) { + return ElevationOverlay.applySurfaceTint(surface, surfaceTint, elevation); + } + + Color get surfaceElevated1 => _surfaceWithElevation(Dimens.elevationLevel1); + Color get surfaceElevated2 => _surfaceWithElevation(Dimens.elevationLevel2); + Color get surfaceElevated3 => _surfaceWithElevation(Dimens.elevationLevel3); +} diff --git a/lib/screens/metering/components/shared/metering_top_bar/widget_top_bar_metering.dart b/lib/screens/metering/components/shared/metering_top_bar/widget_top_bar_metering.dart index f1fef15..adc3c67 100644 --- a/lib/screens/metering/components/shared/metering_top_bar/widget_top_bar_metering.dart +++ b/lib/screens/metering/components/shared/metering_top_bar/widget_top_bar_metering.dart @@ -1,5 +1,6 @@ import 'package:flutter/material.dart'; import 'package:lightmeter/res/dimens.dart'; +import 'package:lightmeter/res/theme.dart'; import 'package:lightmeter/screens/metering/components/shared/metering_top_bar/shape_top_bar_metering.dart'; import 'package:lightmeter/screens/metering/components/shared/readings_container/widget_container_readings.dart'; @@ -19,7 +20,7 @@ class MeteringTopBar extends StatelessWidget { Widget build(BuildContext context) { return CustomPaint( painter: MeteringTopBarShape( - color: Theme.of(context).colorScheme.surface, + color: Theme.of(context).colorScheme.surfaceElevated1, appendixWidth: MediaQuery.of(context).size.width / 2 - Dimens.grid8 / 2 + Dimens.paddingM, appendixHeight: appendixHeight, ), diff --git a/lib/screens/shared/bottom_controls_bar/widget_bottom_controls_bar.dart b/lib/screens/shared/bottom_controls_bar/widget_bottom_controls_bar.dart index bbe9c98..dc958c3 100644 --- a/lib/screens/shared/bottom_controls_bar/widget_bottom_controls_bar.dart +++ b/lib/screens/shared/bottom_controls_bar/widget_bottom_controls_bar.dart @@ -1,5 +1,6 @@ import 'package:flutter/material.dart'; import 'package:lightmeter/res/dimens.dart'; +import 'package:lightmeter/res/theme.dart'; class BottomControlsBar extends StatelessWidget { final Widget center; @@ -33,7 +34,7 @@ class BottomControlsBar extends StatelessWidget { topRight: Radius.circular(Dimens.borderRadiusL), ), child: ColoredBox( - color: Theme.of(context).colorScheme.surface, + color: Theme.of(context).colorScheme.surfaceElevated1, child: SafeArea( top: false, child: Padding( diff --git a/lib/screens/timer/components/metering_config/widget_metering_config_timer.dart b/lib/screens/timer/components/metering_config/widget_metering_config_timer.dart index 8d2e199..8eb91f0 100644 --- a/lib/screens/timer/components/metering_config/widget_metering_config_timer.dart +++ b/lib/screens/timer/components/metering_config/widget_metering_config_timer.dart @@ -2,6 +2,7 @@ import 'package:flutter/material.dart'; import 'package:lightmeter/data/models/exposure_pair.dart'; import 'package:lightmeter/generated/l10n.dart'; import 'package:lightmeter/res/dimens.dart'; +import 'package:lightmeter/res/theme.dart'; import 'package:lightmeter/screens/metering/components/shared/readings_container/components/shared/reading_value_container/widget_container_reading_value.dart'; import 'package:m3_lightmeter_resources/m3_lightmeter_resources.dart'; @@ -21,7 +22,7 @@ class TimerMeteringConfig extends StatelessWidget { Widget build(BuildContext context) { return Container( decoration: BoxDecoration( - color: Theme.of(context).colorScheme.surface, + color: Theme.of(context).colorScheme.surfaceElevated1, borderRadius: const BorderRadius.only( bottomLeft: Radius.circular(Dimens.borderRadiusL), bottomRight: Radius.circular(Dimens.borderRadiusL),