diff --git a/lib/components/appbar.dart b/lib/components/appbar.dart index 56f5dc4..c1dfebf 100644 --- a/lib/components/appbar.dart +++ b/lib/components/appbar.dart @@ -1,12 +1,14 @@ part of 'components.dart'; class Appbar extends StatefulWidget implements PreferredSizeWidget { - const Appbar( - {required this.title, - this.leading, - this.actions, - this.backgroundColor, - super.key}); + const Appbar({ + required this.title, + this.leading, + this.actions, + this.backgroundColor, + this.style = AppbarStyle.blur, + super.key, + }); final Widget title; @@ -16,6 +18,8 @@ class Appbar extends StatefulWidget implements PreferredSizeWidget { final Color? backgroundColor; + final AppbarStyle style; + @override State createState() => _AppbarState(); @@ -108,10 +112,18 @@ class _AppbarState extends State { ], ).paddingTop(context.padding.top), ); - return BlurEffect( - blur: _scrolledUnder ? 15 : 0, - child: content, - ); + if (widget.style == AppbarStyle.shadow) { + return Material( + color: context.colorScheme.surface, + elevation: _scrolledUnder ? 2 : 0, + child: content, + ); + } else { + return BlurEffect( + blur: _scrolledUnder ? 15 : 0, + child: content, + ); + } } } @@ -256,18 +268,18 @@ class _MySliverAppBarDelegate extends SliverPersistentHeaderDelegate { } } -class FilledTabBar extends StatefulWidget { - const FilledTabBar({super.key, this.controller, required this.tabs}); +class AppTabBar extends StatefulWidget { + const AppTabBar({super.key, this.controller, required this.tabs}); final TabController? controller; final List tabs; @override - State createState() => _FilledTabBarState(); + State createState() => _AppTabBarState(); } -class _FilledTabBarState extends State { +class _AppTabBarState extends State { late TabController _controller; late List keys; @@ -315,7 +327,7 @@ class _FilledTabBarState extends State { } @override - void didUpdateWidget(covariant FilledTabBar oldWidget) { + void didUpdateWidget(covariant AppTabBar oldWidget) { if (widget.controller != oldWidget.controller) { _controller = widget.controller ?? DefaultTabController.of(context); _controller.animation!.addListener(onTabChanged); @@ -544,7 +556,7 @@ class _IndicatorPainter extends CustomPainter { var rect = Rect.fromLTWH( tabLeft + padding.left + horizontalPadding, - _FilledTabBarState._kTabHeight - 3.6, + _AppTabBarState._kTabHeight - 3.6, tabRight - tabLeft - padding.horizontal - horizontalPadding * 2, 3, ); diff --git a/lib/components/gesture.dart b/lib/components/gesture.dart index 44fd07c..d8681f8 100644 --- a/lib/components/gesture.dart +++ b/lib/components/gesture.dart @@ -58,26 +58,12 @@ class _AnimatedTapRegionState extends State { }, child: GestureDetector( onTap: widget.onTap, - child: AnimatedContainer( + child: AnimatedPhysicalModel( duration: _fastAnimationDuration, - decoration: BoxDecoration( - borderRadius: BorderRadius.circular(widget.borderRadius), - boxShadow: isHovered - ? [ - BoxShadow( - color: context.colorScheme.outline, - blurRadius: 2, - offset: const Offset(0, 2), - ), - ] - : [ - BoxShadow( - color: context.colorScheme.outlineVariant, - blurRadius: 1, - offset: const Offset(0, 1), - ), - ], - ), + elevation: isHovered ? 3 : 1, + color: context.colorScheme.surface, + shadowColor: context.colorScheme.shadow, + borderRadius: BorderRadius.circular(widget.borderRadius), child: widget.child, ), ), diff --git a/lib/pages/categories_page.dart b/lib/pages/categories_page.dart index bb53b54..2b2c039 100644 --- a/lib/pages/categories_page.dart +++ b/lib/pages/categories_page.dart @@ -52,7 +52,7 @@ class CategoriesPage extends StatelessWidget { key: Key(categories.toString()), child: Column( children: [ - FilledTabBar( + AppTabBar( key: PageStorageKey(categories.toString()), tabs: categories.map((e) { String title = e; diff --git a/lib/pages/comic_page.dart b/lib/pages/comic_page.dart index 6fdc3e6..b7ad999 100644 --- a/lib/pages/comic_page.dart +++ b/lib/pages/comic_page.dart @@ -2000,6 +2000,7 @@ class _ComicPageLoadingPlaceHolder extends StatelessWidget { } return Shimmer( + color: context.isDarkMode ? Colors.grey.shade700 : Colors.white, child: Column( children: [ Appbar(title: Text(""), backgroundColor: context.colorScheme.surface), diff --git a/lib/pages/comments_page.dart b/lib/pages/comments_page.dart index ee8a091..5e9ce48 100644 --- a/lib/pages/comments_page.dart +++ b/lib/pages/comments_page.dart @@ -73,6 +73,7 @@ class _CommentsPageState extends State { resizeToAvoidBottomInset: false, appBar: Appbar( title: Text("Comments".tl), + style: AppbarStyle.shadow, ), body: buildBody(context), ); diff --git a/lib/pages/explore_page.dart b/lib/pages/explore_page.dart index 47866c5..9a0d63a 100644 --- a/lib/pages/explore_page.dart +++ b/lib/pages/explore_page.dart @@ -137,7 +137,7 @@ class _ExplorePageState extends State } Widget tabBar = Material( - child: FilledTabBar( + child: AppTabBar( key: PageStorageKey(pages.toString()), tabs: pages.map((e) => buildTab(e)).toList(), controller: controller, diff --git a/lib/pages/image_favorites_page/image_favorites_page.dart b/lib/pages/image_favorites_page/image_favorites_page.dart index ea1b7ac..83171c3 100644 --- a/lib/pages/image_favorites_page/image_favorites_page.dart +++ b/lib/pages/image_favorites_page/image_favorites_page.dart @@ -391,7 +391,7 @@ class _ImageFavoritesDialogState extends State<_ImageFavoritesDialog> { Widget build(BuildContext context) { Widget tabBar = Material( borderRadius: BorderRadius.circular(8), - child: FilledTabBar( + child: AppTabBar( key: PageStorageKey(optionTypes), tabs: optionTypes.map((e) => Tab(text: e.tl, key: Key(e))).toList(), ), diff --git a/lib/pages/settings/settings_page.dart b/lib/pages/settings/settings_page.dart index 3827206..ad1ae4c 100644 --- a/lib/pages/settings/settings_page.dart +++ b/lib/pages/settings/settings_page.dart @@ -170,7 +170,39 @@ class _SettingsPageState extends State implements PopEntry { ), ), ), - Expanded(child: buildRight()) + Expanded( + child: AnimatedSwitcher( + duration: const Duration(milliseconds: 200), + transitionBuilder: (child, animation) { + return LayoutBuilder( + builder: (context, constrains) { + return AnimatedBuilder( + animation: animation, + builder: (context, _) { + var width = constrains.maxWidth; + var value = animation.isForwardOrCompleted + ? 1 - animation.value + : 1; + var left = width * value; + return Stack( + children: [ + Positioned( + top: 0, + bottom: 0, + left: left, + width: width, + child: child, + ), + ], + ); + }, + ); + }, + ); + }, + child: buildRight(), + ), + ) ], ); } else { @@ -179,14 +211,13 @@ class _SettingsPageState extends State implements PopEntry { Positioned.fill(child: buildLeft()), Positioned( left: offset, - right: 0, + width: MediaQuery.of(context).size.width, top: 0, bottom: 0, child: Listener( onPointerDown: handlePointerDown, child: AnimatedSwitcher( - duration: const Duration(milliseconds: 300), - reverseDuration: const Duration(milliseconds: 300), + duration: const Duration(milliseconds: 200), switchInCurve: Curves.fastOutSlowIn, switchOutCurve: Curves.fastOutSlowIn, transitionBuilder: (child, animation) { @@ -198,11 +229,7 @@ class _SettingsPageState extends State implements PopEntry { child: child, ); }, - child: currentPage == -1 - ? const SizedBox( - key: Key("1"), - ) - : buildRight(), + child: buildRight(), ), ), ) @@ -307,7 +334,7 @@ class _SettingsPageState extends State implements PopEntry { } Widget buildRight() { - final Widget body = switch (currentPage) { + return switch (currentPage) { -1 => const SizedBox(), 0 => const ExploreSettings(), 1 => const ReaderSettings(), @@ -318,10 +345,6 @@ class _SettingsPageState extends State implements PopEntry { 6 => const AboutSettings(), _ => throw UnimplementedError() }; - - return Material( - child: body, - ); } var canPop = ValueNotifier(true);