Reputation: 2792
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
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
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