how to pinned body's widget in sliverappbar in flutter

IMemon
August 17, 2023
107 views
0 votes
2 Answers

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

              ],
            ),
          ),
        ),

      )

Tags: flutter

Answers

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())
            ],
          ),
        ),
      ),
    );
  }
}

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, 
        ),
      ),
    ],
  ),
)