suprim
suprim

Reputation: 31

Fixing issue for CustomScrollView for flutter

When not scrolled When topbar is scrolled When bottom section is also scrolled

 @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: RefreshIndicator(
        onRefresh: () async => refreshControllers(),
        child: Stack(
          children: [
            Container(),
            AssetImageWidget(
              boxfit: BoxFit.cover,
              width: MediaQuery.of(context).size.width,
              imagePath: IconFactory()
                  .getIcon(ref, AppIconsKey.iconDashboardToolBar.name),
            ),
            const SizedBox(
                height: 110,
                width: double.infinity,
                child: FittedBox(child: DashboardUserDetailView())),
            Positioned(
              top: 110,
              child: SizedBox(
                height: MediaQuery.of(context).size.height -
                    110 -
                    kBottomNavigationBarHeight,
                width: MediaQuery.of(context).size.width,
                child: CustomScrollView(
                  slivers: [
                    const SliverToBoxAdapter(
                      child: NamasteUserView(),
                    ),
                    SliverPersistentHeader(
                      pinned: true,
                      delegate: _SliverHeaderDelegate(
                        minHeight: 52,
                        maxHeight: 52,
                        child: Container(
                          decoration: const BoxDecoration(
                            color: Colors.white,
                            borderRadius: BorderRadius.only(
                              topLeft: Radius.circular(52),
                              topRight: Radius.circular(52),
                            ),
                          ),
                        ),
                      ),
                    ),
                    SliverToBoxAdapter(
                      child: Container(
                        color: Colors.black,
                        height: 100000,
                        child: Column(
                          mainAxisSize: MainAxisSize.min,
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            //Childrens here
                          ],
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            )
          ],
        ),
      ),
    );
  }


class _SliverHeaderDelegate extends SliverPersistentHeaderDelegate {
  final double minHeight;
  final double maxHeight;
  final Widget child;

  _SliverHeaderDelegate(
      {required this.minHeight, required this.maxHeight, required this.child});

  @override
  double get minExtent => minHeight;

  @override
  double get maxExtent => maxHeight;

  @override
  Widget build(
      BuildContext context, double shrinkOffset, bool overlapsContent) {
    return child;
  }

  @override
  bool shouldRebuild(_SliverHeaderDelegate oldDelegate) {
    return oldDelegate.minHeight != minHeight ||
        oldDelegate.maxHeight != maxHeight ||
        oldDelegate.child != child;
  }
}

I have a top section border radius on a SliverPersistentHeader, and it is a container with a white color. Only the radius section has a stack background. However, when I scroll, the container below, which has an xyz color, causes the section to turn black due to overlapping. How can I solve this?

I want the sliver box below the SliverPersistentHeader to not cause the color to be visible when scrolled and overlapped with the SliverPersistentHeader.

Note: I have to specify the color for the sliver box as xyz due to design constraints.*

Upvotes: 0

Views: 51

Answers (0)

Related Questions