feat: add pinned header, fade child animation

ice-blockchain · Mar 14, 2024 · 476006b · 476006b
1 parent 07e6b5a
commit 476006b
Showing 1 changed file with 20 additions and 2 deletions.
diff --git a/lib/app/router/components/floating_app_bar/floating_app_bar.dart b/lib/app/router/components/floating_app_bar/floating_app_bar.dart
@@ -21,17 +21,35 @@ class FloatingAppBar extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
+    final double safeAreaOffset = MediaQuery.paddingOf(context).top;
+    final double totalHeight =
+        height + topOffset + bottomOffset + safeAreaOffset;
+    final double fadeOffset = topOffset + safeAreaOffset / 2;
+
     return SliverAppBar(
       elevation: 50,
       floating: true,
+      pinned: true,
+      expandedHeight: height + topOffset + bottomOffset,
       shadowColor:
           context.theme.appColors.onTertararyBackground.withOpacity(0.05),
-      toolbarHeight: height + topOffset + bottomOffset,
+      toolbarHeight: 0,
       backgroundColor: context.theme.appColors.onPrimaryAccent,
       surfaceTintColor: context.theme.appColors.onPrimaryAccent,
       flexibleSpace: LayoutBuilder(
         builder: (BuildContext context, BoxConstraints constraints) {
-          return ScreenTopOffset(margin: topOffset, child: child);
+          final double opacity = 1 -
+              ((totalHeight - constraints.maxHeight) / fadeOffset).clamp(0, 1);
+          return Align(
+            alignment: Alignment.bottomCenter,
+            child: Opacity(
+              opacity: opacity,
+              child: Padding(
+                padding: EdgeInsets.only(bottom: bottomOffset),
+                child: child,
+              ),
+            ),
+          );
         },
       ),
     );