Tweak top & bottom app bar style

This commit is contained in:
Ming Ming 2022-11-19 11:32:38 +08:00
parent cd77ffc8de
commit 0e31d2fb66
5 changed files with 15 additions and 6 deletions

View file

@ -1,3 +1,5 @@
import 'dart:ui';
import 'package:flutter/material.dart';
import 'package:logging/logging.dart';
import 'package:nc_photos/material3.dart';
@ -13,7 +15,7 @@ extension ThemeExtension on ThemeData {
colorScheme.onSecondaryContainer.withOpacity(.7);
Color get homeNavigationBarBackgroundColor =>
elevate(colorScheme.surface, 2).withOpacity(.77);
elevate(colorScheme.surface, 2).withOpacity(.55);
Color get onDarkSurface {
return brightness == Brightness.light
@ -21,6 +23,12 @@ extension ThemeExtension on ThemeData {
: colorScheme.onSurface;
}
ImageFilter get appBarBlurFilter => ImageFilter.blur(
sigmaX: 12,
sigmaY: 12,
tileMode: TileMode.mirror,
);
/// Apply surface tint to [color] based on the [elevation] level
///
/// This function is a temporary workaround for widgets not yet fully

View file

@ -21,6 +21,7 @@ import 'package:nc_photos/object_extension.dart';
import 'package:nc_photos/platform/features.dart' as features;
import 'package:nc_photos/pref.dart';
import 'package:nc_photos/snack_bar_manager.dart';
import 'package:nc_photos/theme.dart';
import 'package:nc_photos/use_case/remove_album.dart';
import 'package:nc_photos/use_case/unimport_shared_album.dart';
import 'package:nc_photos/widget/album_browser_util.dart' as album_browser_util;
@ -147,7 +148,7 @@ class _HomeAlbumsState extends State<HomeAlbums>
height: _calcBottomAppBarExtent(context),
child: ClipRect(
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 4, sigmaY: 4),
filter: Theme.of(context).appBarBlurFilter,
child: const ColoredBox(
color: Colors.transparent,
),

View file

@ -210,7 +210,7 @@ class _HomePhotosState extends State<HomePhotos>
height: _calcBottomAppBarExtent(context),
child: ClipRect(
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 4, sigmaY: 4),
filter: Theme.of(context).appBarBlurFilter,
child: const ColoredBox(
color: Colors.transparent,
),

View file

@ -194,7 +194,7 @@ class _HomeSearchState extends State<HomeSearch>
height: _calcBottomAppBarExtent(context),
child: ClipRect(
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 4, sigmaY: 4),
filter: Theme.of(context).appBarBlurFilter,
child: const ColoredBox(
color: Colors.transparent,
),

View file

@ -1,12 +1,12 @@
// ignore_for_file: deprecated_member_use, unnecessary_null_comparison, curly_braces_in_flow_control_structures, deprecated_member_use_from_same_package
import 'dart:math' as math;
import 'dart:ui';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:flutter/services.dart';
import 'package:nc_photos/theme.dart';
/// A translucent sliver app bar used in home pages
///
@ -607,7 +607,7 @@ class _SliverAppBarDelegate extends SliverPersistentHeaderDelegate {
height: math.max(minExtent, maxExtent - shrinkOffset),
child: ClipRect(
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 4, sigmaY: 4),
filter: Theme.of(context).appBarBlurFilter,
child: const ColoredBox(
color: Colors.transparent,
),