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 borderRadiusL = 24;
static const double borderRadiusXL = 32; 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 grid4 = 4;
static const double grid8 = 8; static const double grid8 = 8;
static const double grid16 = 16; static const double grid16 = 16;

View file

@ -29,15 +29,16 @@ ThemeData themeFrom(Color primaryColor, Brightness brightness) {
primaryColor: primaryColor, primaryColor: primaryColor,
colorScheme: scheme, colorScheme: scheme,
appBarTheme: AppBarTheme( appBarTheme: AppBarTheme(
elevation: 4, elevation: Dimens.elevationLevel0,
color: scheme.background, scrolledUnderElevation: Dimens.elevationLevel2,
color: scheme.surface,
foregroundColor: scheme.onBackground, foregroundColor: scheme.onBackground,
surfaceTintColor: scheme.surfaceTint, surfaceTintColor: scheme.surfaceTint,
), ),
cardTheme: CardTheme( cardTheme: CardTheme(
clipBehavior: Clip.antiAlias, clipBehavior: Clip.antiAlias,
color: scheme.surface, color: scheme.surface,
elevation: 4, elevation: Dimens.elevationLevel1,
margin: EdgeInsets.zero, margin: EdgeInsets.zero,
shadowColor: Colors.transparent, shadowColor: Colors.transparent,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(Dimens.borderRadiusL)), shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(Dimens.borderRadiusL)),
@ -47,7 +48,7 @@ ThemeData themeFrom(Color primaryColor, Brightness brightness) {
dialogTheme: DialogTheme( dialogTheme: DialogTheme(
backgroundColor: scheme.surface, backgroundColor: scheme.surface,
surfaceTintColor: scheme.surfaceTint, surfaceTintColor: scheme.surfaceTint,
elevation: 6, elevation: Dimens.elevationLevel3,
), ),
dividerColor: scheme.outlineVariant, dividerColor: scheme.outlineVariant,
dividerTheme: DividerThemeData( dividerTheme: DividerThemeData(
@ -59,7 +60,7 @@ ThemeData themeFrom(Color primaryColor, Brightness brightness) {
iconColor: scheme.onSurface, iconColor: scheme.onSurface,
textColor: scheme.onSurface, textColor: scheme.onSurface,
), ),
scaffoldBackgroundColor: scheme.background, scaffoldBackgroundColor: scheme.surface,
); );
return theme.copyWith( return theme.copyWith(
listTileTheme: ListTileThemeData( listTileTheme: ListTileThemeData(
@ -102,3 +103,13 @@ ColorScheme _colorSchemeFromColor(Color primaryColor, Brightness brightness) {
outlineVariant: Color(scheme.outlineVariant), 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:flutter/material.dart';
import 'package:lightmeter/res/dimens.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/metering_top_bar/shape_top_bar_metering.dart';
import 'package:lightmeter/screens/metering/components/shared/readings_container/widget_container_readings.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) { Widget build(BuildContext context) {
return CustomPaint( return CustomPaint(
painter: MeteringTopBarShape( 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, appendixWidth: MediaQuery.of(context).size.width / 2 - Dimens.grid8 / 2 + Dimens.paddingM,
appendixHeight: appendixHeight, appendixHeight: appendixHeight,
), ),

View file

@ -1,5 +1,6 @@
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:lightmeter/res/dimens.dart'; import 'package:lightmeter/res/dimens.dart';
import 'package:lightmeter/res/theme.dart';
class BottomControlsBar extends StatelessWidget { class BottomControlsBar extends StatelessWidget {
final Widget center; final Widget center;
@ -33,7 +34,7 @@ class BottomControlsBar extends StatelessWidget {
topRight: Radius.circular(Dimens.borderRadiusL), topRight: Radius.circular(Dimens.borderRadiusL),
), ),
child: ColoredBox( child: ColoredBox(
color: Theme.of(context).colorScheme.surface, color: Theme.of(context).colorScheme.surfaceElevated1,
child: SafeArea( child: SafeArea(
top: false, top: false,
child: Padding( child: Padding(

View file

@ -2,6 +2,7 @@ import 'package:flutter/material.dart';
import 'package:lightmeter/data/models/exposure_pair.dart'; import 'package:lightmeter/data/models/exposure_pair.dart';
import 'package:lightmeter/generated/l10n.dart'; import 'package:lightmeter/generated/l10n.dart';
import 'package:lightmeter/res/dimens.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: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'; import 'package:m3_lightmeter_resources/m3_lightmeter_resources.dart';
@ -21,7 +22,7 @@ class TimerMeteringConfig extends StatelessWidget {
Widget build(BuildContext context) { Widget build(BuildContext context) {
return Container( return Container(
decoration: BoxDecoration( decoration: BoxDecoration(
color: Theme.of(context).colorScheme.surface, color: Theme.of(context).colorScheme.surfaceElevated1,
borderRadius: const BorderRadius.only( borderRadius: const BorderRadius.only(
bottomLeft: Radius.circular(Dimens.borderRadiusL), bottomLeft: Radius.circular(Dimens.borderRadiusL),
bottomRight: Radius.circular(Dimens.borderRadiusL), bottomRight: Radius.circular(Dimens.borderRadiusL),