Sliver type of Header

page.dart

Scaffold(
                      backgroundColor: backgroundColor,
                      body: Stack(
                        children: [
                        // Image bg...

                          AnimatedBuilder(
                            animation: effectiveScrollController,
                            builder: (context, child) {
                              double effectiveImageHeight = 0;

                              if (effectiveScrollController.hasClients) {
                                effectiveImageHeight =
                                    (coverImgHeight - effectiveScrollController.offset).clamp(0, context.height);
                              }

                              return Positioned(
                                top: 0,
                                right: 0,
                                left: 0,
                                child: NetworkImageUi(
                                  imageUrl: coverImg,
                                  height: effectiveImageHeight,
                                  width: context.width,
                                  borderRadius: BorderRadius.zero,
                                  placeholderWidget: const DecoratedBox(
                                    decoration: BoxDecoration(
                                      gradient: LinearGradient(
                                        colors: professionalGradientColors,
                                      ),
                                    ),
                                  ),
                                ),
                              );
                            },
                          ),

                        // actual page content...
                          Positioned.fill(
                            child: ...
                          ),

                        // app bar with scroll-controlled animations
                          Positioned(
                            top: 0,
                            right: 0,
                            left: 0,
                            child: AnimatedBuilder(
                              animation: effectiveScrollController,
                              builder: (context, child) {
                                var scrollOffsetRatio = 0.0;

                                if (effectiveScrollController.hasClients) {
                                  scrollOffsetRatio =
                                      effectiveScrollController.offset.clamp(0, coverImgHeight) / coverImgHeight;
                                }

                                final appbarBgColorOpacity = scrollOffsetRatio < minScrollOffsetRatio
                                    ? 0.0
                                    : ((scrollOffsetRatio - minScrollOffsetRatio) /
                                            (maxScrollOffsetRatio - minScrollOffsetRatio))
                                        .clamp(0.0, 1.0);

                                return AppBarUi(
                                  leadingWidth: 50.r,
                                  backgroundColor: backgroundColor.withValues(
                                    alpha: appbarBgColorOpacity,
                                  ),
                                  titleSpacing: 16.r,
                                  leading: Align(
                                    alignment: Alignment.centerRight,
                                    child: ButtonPressAnimation(
                                      onTap: navigationService.goBack,
                                      child: Container(
                                        height: 34.r,
                                        width: 34.r,
                                        alignment: Alignment.center,
                                        decoration: BoxDecoration(
                                          shape: BoxShape.circle,
                                          color: Color.lerp(
                                            black,
                                            context.backgroundDefault,
                                            appbarBgColorOpacity,
                                          )?.withValues(alpha: (1 - appbarBgColorOpacity) * .3),
                                        ),
                                        child: Transform.rotate(
                                          angle: (pi / 2) * (widget.isDownwardExitTransition ? -1 : 1),
                                          child: SvgIconUi(
                                            arrowBackIcon,
                                            color: Color.lerp(
                                              white,
                                              swappTileForegroundColor,
                                              appbarBgColorOpacity,
                                            ),
                                            height: 34.r,
                                            width: 34.r,
                                          ),
                                        ),
                                      ),
                                    ),
                                  ),
                                  actions: [
                                    UserListener(
                                      builder: (currentUser, _) {
                                        return Align(
                                          child: ButtonPressAnimation(
                                            onTap: currentUser.uid == card.ownerId
                                                ? controller.openCardOptionsModal
                                                : controller.openContactActionsModal,
                                            child: Container(
                                              height: 34.r,
                                              width: 34.r,
                                              alignment: Alignment.center,
                                              padding: const EdgeInsets.all(2).r,
                                              decoration: BoxDecoration(
                                                shape: BoxShape.circle,
                                                color: Color.lerp(
                                                  black,
                                                  context.backgroundDefault,
                                                  appbarBgColorOpacity,
                                                )?.withValues(alpha: (1 - appbarBgColorOpacity) * .3),
                                              ),
                                              child: SvgIconUi(
                                                verticalEllipsisIcon,
                                                color: Color.lerp(
                                                  white,
                                                  swappTileForegroundColor,
                                                  appbarBgColorOpacity,
                                                ),
                                                height: 20.r,
                                                width: 20.r,
                                              ),
                                            ),
                                          ),
                                        );
                                      },
                                    ),
                                    const Gap.x16(),
                                  ],
                                  titleWidget: (card.isJobSeeker && appbarBgColorOpacity < 0.2)
                                      ? FaderUi(
                                          opacity: 1 - appbarBgColorOpacity,
                                          child: const JobSeekerCardTagUi(),
                                        )
                                      : FaderUi(
                                          opacity: appbarBgColorOpacity,
                                          child: Row(
                                            children: [
                                              ButtonPressAnimation(
                                                onTap: () {
                                                  if (appbarBgColorOpacity == 1) {
                                                    effectiveScrollController.animateTo(
                                                      0,
                                                      duration: const Duration(milliseconds: 200),
                                                      curve: Curves.easeOut,
                                                    );
                                                    HapticFeedback.lightImpact();
                                                  }
                                                },
                                                child: NetworkImageUi(
                                                  imageUrl: coverImg,
                                                  height: 35.r,
                                                  width: 35.r,
                                                  isCircle: true,
                                                  gradient: LinearGradient(
                                                    colors: card.gradientColors,
                                                  ),
                                                  placeholderWidget: DecoratedBox(
                                                    decoration: BoxDecoration(
                                                      shape: BoxShape.circle,
                                                      gradient: LinearGradient(
                                                        colors: card.gradientColors,
                                                      ),
                                                    ),
                                                  ),
                                                ),
                                              ),
                                              const Gap(10),
                                              Padding(
                                                padding: const EdgeInsets.only(top: 5).r,
                                                child: TextUi(
                                                  card.displayName ?? '',
                                                  localizeText: false,
                                                  style: title3.copyWith(
                                                    fontSize: 18,
                                                    height: 1.r,
                                                    fontFamily: mediumText,
                                                    color: swappTileForegroundColor,
                                                  ),
                                                ),
                                              ),
                                            ],
                                          ),
                                        ),
                                );
                              },
                            ),
                          ),
                        ],
                      ),
                    ),