Gbenga B Ayannuga
Gbenga B Ayannuga

Reputation: 2792

how to disable scrolling NestedScrollView

I tried to use physics: NeverScrollableScrollPhysics() in NestedScrollView but still yet is still scrolling.

How can disable scrolling in NestedScrollView if the content is not exceeding.

NestedScrollView(
        physics: NeverScrollableScrollPhysics(),
        //
        //AlwaysScrollableScrollPhysics(),
        headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
          return <Widget>[
            SliverAppBar(
              pinned: true,
              centerTitle: false,
              floating: true,
              stretch: false,
              expandedHeight: 300.0,
              leadingWidth: 100,
              collapsedHeight: 300,
              leading: Padding(
                padding: const EdgeInsets.only(left: 10.0),
                child: Row(
                  children: [
                    Padding(
                      padding: EdgeInsets.only(right: 15.0),
                      child: PopupMenuButton(
                        color: Colors.black,
                        offset: Offset(0, 40),
                        itemBuilder: (_) => <PopupMenuItem<String>>[
                          new PopupMenuItem<String>(
                            child: Center(
                              child: Text(
                                'My Event',
                                style: TextStyle(
                                  color: Colors.white,
                                ),
                              ),
                            ),
                          ),
                          
                  ],
                ),
              ),
              actions: [
                Padding(
                  padding:
                      EdgeInsets.symmetric(horizontal: 10.0, vertical: 10.0),
                  child: AnimatedContainer(
                    width: 160,
                    duration: const Duration(milliseconds: 150),
                    curve: Curves.easeIn,
                    child: TextField(
                      textAlign: TextAlign.center,
                      onTap: () {},
                      decoration: InputDecoration(
                        border: OutlineInputBorder(
                          borderRadius: BorderRadius.circular(25.0),
                        ),
                        contentPadding:
                            EdgeInsets.symmetric(vertical: 8, horizontal: 8),
                        suffixIcon: Icon(Icons.search),
                        filled: true,
                        hintStyle: TextStyle(color: Colors.grey[800]),
                        hintText: "Search",
                        fillColor: Colors.grey[100],
                      ),
                    ),
                  ),
                ),
              ],
              flexibleSpace: FlexibleSpaceBar(
                centerTitle: true,
                title: Align(
                  alignment: Alignment.bottomRight,
                  child: Image.asset(
                    'assets/eventLogo.png',
                  ),
                ),
                background: Image.asset(
                  'assets/newEvent.png',
                  fit: BoxFit.cover,
                ),
              ),
            ),
            SliverPersistentHeader(
              delegate: _SliverAppBarDelegate(
                TabBar(
                  labelColor: Colors.black87,
                  unselectedLabelColor: Colors.grey,
                  tabs: [
                    Tab(text: "Popular"),
                    Tab(text: "Music"),
                    Tab(text: "Sport"),
                    Tab(text: "Movie"),
                    Tab(text: "Other"),
                  ],
                ),
              ),
              pinned: true,
            ),
          ];
        },
        body: TabBarView(
          children: [
            Container(
              padding: EdgeInsets.symmetric(horizontal: 20),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  SizedBox(
                    height: 20,
                  ),
                  Text("This Week"),
                  SizedBox(
                    height: 20,
                  ),
                  Container(
                    height: 300,
                    width: 300,
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(20),
                      color: Colors.red,
                    ),
                  ),
                ],
              ),
            ),
            Icon(Icons.directions_transit),
            Icon(Icons.directions_bike),
            Center(
              child: Text("Sample text"),
            ),
            Center(
              child: Text("Sample text"),
            ),
          ],
        ),
      ),

Upvotes: 2

Views: 4273

Answers (2)

Sayid
Sayid

Reputation: 443

If you are looking for a solution, you can add scroll behavior to NestedScrollView like this.

NestedScrollView(
   scrollBehavior: const MaterialScrollBehavior().copyWith(
        physics: const NeverScrollableScrollPhysics(),
        dragDevices: {}, // no drag devices
   )
...

and it can't scroll

Upvotes: 2

Mahendra Raj
Mahendra Raj

Reputation: 455

I didn't find any solution to disable the scrolling in the body of the NestedScrollView. Instead I came across the solution which makes the less content in the body not to scroll below the headerSliverBuilder slivers list.

The solution is that using the combination of SliverOverlapAbsorber and SliverSafeArea for the headerSliverBuilder slivers list and set handle property of SliverOverlapAbsorber with

NestedScrollView.sliverOverlapAbsorberHandleFor(context)

Note: In a single NestedScrollView we can use only one SliverOverlapAbsorber. If you have multiple slivers in headerSliverBuilder then try adding them in SliverList or MultiSliver(from sliver_tools package) which considers dynamic height for its children. and wrapping it with SliverOverlapAbsorber and SliverSafeArea.

For example:

SliverOverlapAbsorber(
 handle:NestedScrollView.sliverOverlapAbsorberHandleFor(context),
 sliver: SliverSafeArea(
            sliver: MultiSliver(
                        [
                         SliverAppBar(),
                         SliverAppBar(),
                         SliverToBoxAdapter(),
                        ],
                     ),//end of MultiSliver
                    ),//end of SliverSafeArea
               ),//end of SliverOverlapAbsorber   

Upvotes: 2

Related Questions