'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"),
),
],
),
),
Solution 1:[1]
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
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | Mahendra Raj |