how to pinned body's widget in sliverappbar in flutter

Question

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())

              ],
            ),
          ),
        ),

      )

Could you please check this Md Yeasin Sheikh's answer? Hope it can help you. https://stackoverflow.com/a/68628859/12965265 Ensure me that is this okay or not. — Ashikul Islam Sawan, Aug 17 '23 at 07:35
Thats fine but here i want to solve with nested scrollview...there is a method SliverPersistentHeader..i thinks its fine to use..but dont know how.. — IMemon, Aug 17 '23 at 07:45

score 1 · Accepted Answer · answered Aug 17 '23 at 07:46

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 :

Thanks it solved....but now another problem...can u pls see my question : https://stackoverflow.com/questions/76920996/state-does-not-change-while-using-sliver-appbar-in-flutter — IMemon, Aug 17 '23 at 11:32

score 0 · Answer 2 · answered Aug 17 '23 at 07:22

try below code :

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.symmetric(vertical: 4, horizontal: 4),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Container(
                height: 50,
                color: Colors.grey,
                child: Center(child: Text('Pinned Widget')),
              ),
              Expanded(child: showListView())
            ],
          ),
        ),
      ),
    );
  }
}

can u pls sir..check this. https://stackoverflow.com/questions/76962693/failing-to-set-value-while-using-providers-constructor-in-flutter — IMemon, Aug 23 '23 at 19:56

how to pinned body's widget in sliverappbar in flutter

2 Answers2