How to make nested scroll view to use parents scoll behaviour

Question

I am trying to have the content of my page inside a sliver list but when I scroll, the list of the page and the sliver list scroll behaviours are independent of each other. I want it so that both lists scroll together. I have included a gif of my problem below.

problem gif

I have tried using a customScrollView and NestedScrollViews and changing the physics to NeverScroll but when I do the content of the page is always cut off at the bottom.

I'll include my code and any help would be greatly appreciated.

Main sliver

return Scaffold(
      body: CustomScrollView(
        slivers: [
          SliverAppBar.medium(
            pinned: true,
            clipBehavior: Clip.none,
            backgroundColor: Theme.of(context).primaryColor,
            surfaceTintColor: Colors.transparent,
            title: FittedBox(
              fit: BoxFit.fitWidth,
              child: Text(
                widget.festival.name,
                style: Theme.of(context).textTheme.headlineSmall!.copyWith(color: Colors.white),
                softWrap: true,
                maxLines: 2,
              ),
            ),
            iconTheme: const IconThemeData(color: Colors.white),
            actions: [
              IconButton(
                icon: const Icon(Icons.more_vert),
                onPressed: () {},
              ),
            ],
          ),
          SliverToBoxAdapter(
            child: Stack(
              children: [
                if (widget.festival.banner != null)
                  Image(
                    image: NetworkImage('${config!.imageBaseUrl}${widget.festival.banner!}'),
                    errorBuilder: (BuildContext context, Object exception, StackTrace? stackTrace) {
                      // You can return an error image or a placeholder here
                      return const Center(child: Text('Image not found'));
                    },
                  ),
              ],
            ),
          ),
          SliverPinnedHeader(
            key: const ValueKey('navigation'),
            child: Container(
              width: double.infinity,
              height: 50,
              color: Theme.of(context).primaryColor,
              child: TabBar(
                tabs: _tabs,
                controller: _tabController,
                unselectedLabelColor: Colors.white,
                labelColor: Theme.of(context).colorScheme.primary,
              ),
            ),
          ),
          SliverFillRemaining(
            child: TabBarView(
              controller: _tabController,
              children: [
                Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: FestivalInfo(festival: widget.festival),
                ),
                Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: Text(widget.festival.longDescription!, style: Theme.of(context).textTheme.bodyLarge),
                ),
              ],
            ),
          ),
        ],
      ),
    );

Screen content for tab

return ListView(
      children: [
        Text(festival.startDateFormatted, style: Theme.of(context).textTheme.bodyLarge),
        const SizedBox(height: 20),
        BannerCarousel(
          banners: BannerImages.listBanners,
          customizedIndicators: const IndicatorModel.animation(width: 20, height: 5, spaceBetween: 2, widthAnimation: 50),
          height: 200,
          activeColor: Colors.amberAccent,
          disableColor: Colors.white,
          animation: true,
          borderRadius: 10,
          width: screenWidth,
          indicatorBottom: true,
        ),
        const SizedBox(height: 20),
        Padding(
          padding: const EdgeInsets.all(8.0),
          child: Text('About',
              style: Theme.of(context).textTheme.titleLarge!.copyWith(fontWeight: FontWeight.w500, color: Colors.white)),
        ),
        Padding(
          padding: const EdgeInsets.all(8.0),
          child: Text(festival.description!, style: Theme.of(context).textTheme.bodyLarge),
        ),
        if (festival.longDescription != null)
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Text(festival.longDescription!, style: Theme.of(context).textTheme.bodyLarge),
          ),
      ],
    );

When using primary = false and NeverScroll Physics, the content doesnt fit on the page. (image below) cut off when using NeverScroll physics

Hitarth Chhunchha · Accepted Answer · 2024-01-08 14:26:26Z

0

In your screen content for tab:

ListView will override the scroll of CustomScrollView, so to avoid that you can add this properties in ListView:

 primary: false,
 physics: const NeverScrollableScrollPhysics(), // disable scroll for listview

edited Jan 8, 2024 at 14:26

answered Jan 8, 2024 at 13:41

Hitarth Chhunchha

7183 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

BradDoesCode Over a year ago

When I do this I get the behaviour I want but the bottom of the second list if cut off.

Hitarth Chhunchha Over a year ago

Can you please edit question and add screenshot of how bottom is being cut off

BradDoesCode Over a year ago

I have added the screenshot requested

Collectives™ on Stack Overflow

How to make nested scroll view to use parents scoll behaviour

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related