unified components elevation

This commit is contained in:
Vadim 2024-05-07 20:07:16 +02:00
parent 2a518f0ace
commit 4a27c27270
5 changed files with 27 additions and 8 deletions

View file

@ -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;

View file

@ -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);
}

View file

@ -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,
),

View file

@ -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(

View file

@ -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),