flutterscrollviewflutter-layoutflutter-slivercustomscrollview

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.


Solution

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

    CustomScrollView(
                  slivers: <Widget>[
                    SliverAppBar(
                        // Your appbar goes here
                        ),
                    SliverPersistentHeader(
                      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;
    
      PersistentHeader({this.widget});
    
      @override
      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),
          ),
        );
      }
    
      @override
      double get maxExtent => 56.0;
    
      @override
      double get minExtent => 56.0;
    
      @override
      bool shouldRebuild(SliverPersistentHeaderDelegate oldDelegate) {
        return true;
      }
    }
    

    Let me know if you encounter any other issue.