How to pin a container or any other widget below appbar in scroll view in flutter


I want a widget to be place below the app while scrolling the screen .
The screen contains a floating app bar with flexible space ( sliverappbar) and below it one conatiner which have any container or tab view .
The video in the link is the example of the effect i wanted.


Alright, I think I understand you now. You’ll need to implement a CustomScrollView

              slivers: <Widget>[
                    // Your appbar goes here
                  pinned: true,
                  delegate: PersistentHeader(
                    widget: Row(
                      // Format this to meet your need
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: <Widget>[
                        Text('Hello World'),
                        Text('Hello World'),
                        Text('Hello World'),

Create a new class for the Persistent header, which extends a SliverPersistentHeaderDelegate as shown:

class PersistentHeader extends SliverPersistentHeaderDelegate {
  final Widget widget;


  Widget build(
      BuildContext context, double shrinkOffset, bool overlapsContent) {
    return Container(
      width: double.infinity,
      height: 56.0,
      child: Card(
        margin: EdgeInsets.all(0),
        color: Colors.white,
        elevation: 5.0,
        child: Center(child: widget),

  double get maxExtent => 56.0;

  double get minExtent => 56.0;

  bool shouldRebuild(SliverPersistentHeaderDelegate oldDelegate) {
    return true;

Let me know if you encounter any other issue.

Answered By – Chichebe

Answer Checked By – Dawn Plyler (FlutterFixes Volunteer)

Leave a Reply

Your email address will not be published. Required fields are marked *