Improve ui

lib/components/appbar.dart

@@ -1,12 +1,14 @@
 part of 'components.dart';
 
 class Appbar extends StatefulWidget implements PreferredSizeWidget {
-  const Appbar(
+  const Appbar({
-      {required this.title,
+    required this.title,
-      this.leading,
+    this.leading,
-      this.actions,
+    this.actions,
-      this.backgroundColor,
+    this.backgroundColor,
-      super.key});
+    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<Appbar> createState() => _AppbarState();
 
@@ -108,10 +112,18 @@ class _AppbarState extends State<Appbar> {
         ],
       ).paddingTop(context.padding.top),
     );
-    return BlurEffect(
+    if (widget.style == AppbarStyle.shadow) {
-      blur: _scrolledUnder ? 15 : 0,
+      return Material(
-      child: content,
+        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 {
+class AppTabBar extends StatefulWidget {
-  const FilledTabBar({super.key, this.controller, required this.tabs});
+  const AppTabBar({super.key, this.controller, required this.tabs});
 
   final TabController? controller;
 
   final List<Tab> tabs;
 
   @override
-  State<FilledTabBar> createState() => _FilledTabBarState();
+  State<AppTabBar> createState() => _AppTabBarState();
 }
 
-class _FilledTabBarState extends State<FilledTabBar> {
+class _AppTabBarState extends State<AppTabBar> {
   late TabController _controller;
 
   late List<GlobalKey> keys;
@@ -315,7 +327,7 @@ class _FilledTabBarState extends State<FilledTabBar> {
   }
 
   @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,
     );

lib/components/gesture.dart

@@ -58,26 +58,12 @@ class _AnimatedTapRegionState extends State<AnimatedTapRegion> {
       },
       child: GestureDetector(
         onTap: widget.onTap,
-        child: AnimatedContainer(
+        child: AnimatedPhysicalModel(
           duration: _fastAnimationDuration,
-          decoration: BoxDecoration(
+          elevation: isHovered ? 3 : 1,
-            borderRadius: BorderRadius.circular(widget.borderRadius),
+          color: context.colorScheme.surface,
-            boxShadow: isHovered
+          shadowColor: context.colorScheme.shadow,
-                ? [
+          borderRadius: BorderRadius.circular(widget.borderRadius),
-                    BoxShadow(
-                      color: context.colorScheme.outline,
-                      blurRadius: 2,
-                      offset: const Offset(0, 2),
-                    ),
-                  ]
-                : [
-                    BoxShadow(
-                      color: context.colorScheme.outlineVariant,
-                      blurRadius: 1,
-                      offset: const Offset(0, 1),
-                    ),
-                  ],
-          ),
           child: widget.child,
         ),
       ),

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;

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

lib/pages/comments_page.dart

@@ -73,6 +73,7 @@ class _CommentsPageState extends State<CommentsPage> {
       resizeToAvoidBottomInset: false,
       appBar: Appbar(
         title: Text("Comments".tl),
+        style: AppbarStyle.shadow,
       ),
       body: buildBody(context),
     );

lib/pages/explore_page.dart

@@ -137,7 +137,7 @@ class _ExplorePageState extends State<ExplorePage>
     }
 
     Widget tabBar = Material(
-      child: FilledTabBar(
+      child: AppTabBar(
         key: PageStorageKey(pages.toString()),
         tabs: pages.map((e) => buildTab(e)).toList(),
         controller: controller,

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

lib/pages/settings/settings_page.dart

@@ -170,7 +170,39 @@ class _SettingsPageState extends State<SettingsPage> 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<SettingsPage> 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),
+                duration: const Duration(milliseconds: 200),
-                reverseDuration: const Duration(milliseconds: 300),
                 switchInCurve: Curves.fastOutSlowIn,
                 switchOutCurve: Curves.fastOutSlowIn,
                 transitionBuilder: (child, animation) {
@@ -198,11 +229,7 @@ class _SettingsPageState extends State<SettingsPage> implements PopEntry {
                     child: child,
                   );
                 },
-                child: currentPage == -1
+                child: buildRight(),
-                    ? const SizedBox(
-                        key: Key("1"),
-                      )
-                    : buildRight(),
               ),
             ),
           )
@@ -307,7 +334,7 @@ class _SettingsPageState extends State<SettingsPage> 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<SettingsPage> implements PopEntry {
       6 => const AboutSettings(),
       _ => throw UnimplementedError()
     };
-
-    return Material(
-      child: body,
-    );
   }
 
   var canPop = ValueNotifier(true);