In sliver Appbar how to fix body’s one child pinned…
failing to explain exactly i am sharing image what i want….
Like in almost app. while scrolling up…appbar pinned and body’s one widget like search bar filterpanel etc..remails pinned and does not scroll with listview…
here are images that i want and what i am getting..
Thanks…
Scaffold(
body: NestedScrollView(
headerSliverBuilder: (context, innerBoxIsSelected) => [
SliverAppBar(
leading: InkWell(
onTap: (){
Navigator.of(context).pop();
},
child: Icon(Icons.arrow_back_ios_new)),
expandedHeight: 300,
flexibleSpace: FlexibleSpaceBar(
title: Text('All Transactions'),
),
//floating: true,
pinned: true,
floating: true,
),
],
body: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
height: 50,
color: Colors.grey,
child: Center(child: Text('Pinned Widget')),),
Expanded(child: showListView())
],
),
),
),
)
>Solution :
To achieve a layout where a widget remains pinned at the top along with SliverAppBar, and the rest of the content is scrollable, you can use a combination of CustomScrollView, SliverAppBar, SliverPersistentHeader, and SliverList components.
Create _PinnedHeaderDelegate class
class _PinnedHeaderDelegate extends SliverPersistentHeaderDelegate {
@override
Widget build(BuildContext context, double shrinkOffset, bool overlapsContent) {
return Container(
height: 50,
color: Colors.grey,
child: Center(child: Text('Pinned Widget')),
);
}
@override
double get maxExtent => 50; // Height of the pinned widget
@override
double get minExtent => 50; // Height of the pinned widget
@override
bool shouldRebuild(covariant SliverPersistentHeaderDelegate oldDelegate) {
return false;
}
}
Usage
Scaffold(
body: CustomScrollView(
slivers: [
SliverAppBar(
leading: InkWell(
onTap: () {
Navigator.of(context).pop();
},
child: Icon(Icons.arrow_back_ios_new)),
expandedHeight: 300,
flexibleSpace: FlexibleSpaceBar(
title: Text('All Transactions'),
),
pinned: true,
floating: true,
),
SliverPersistentHeader(
delegate: _PinnedHeaderDelegate(),
pinned: true,
),
SliverList(
delegate: SliverChildBuilderDelegate(
(BuildContext context, int index) {
return ListTile(
title: Text('List Item $index'),
);
},
childCount: 100,
),
),
],
),
)
Output :
Before Scroll
After Scroll :
