1

I think I understood how the Custom Sticky Header work now, but I just can't find where can i add the functionality to stop the headers of Sticky Header from overlapping i would like to achieve something like in the picture below but without overlapping of the headers, i want each header to stick below each other. Any help on where to add additional functionalities would be a huge help, thanks in advance! image showing the overlapping sticky header

Edit: source link

Daniel Geuza
  • 15
  • 6

1 Answers1

2

Okay, The logic is simple. just add a header to your list and subitems of header to that list.

So, you can implement your requirements by using the code :

    List<Widget> _buildStickySliverListTest(ListCount sliverList) {
    var widgetList = List<Widget>();
    for (int index = 0; index < sliverList.data.length; index++) {
      widgetList
        ..add(
          SliverAppBar(
            automaticallyImplyLeading: false,
            title: Text("Header $index"),
            pinned: true,
          ),
        )
        ..add(
          SliverFixedExtentList(
            itemExtent: 50.0,
            delegate:
            SliverChildBuilderDelegate((BuildContext context, int index) {
              return Container(
                alignment: Alignment.center,
                color: Colors.lightBlue[100 * (index % 9)],
                child: Text('Sublist item $index'),
              );
            }, childCount: sliverList.data[index].length),
          ),
        );
    }

    return widgetList;
  }

  @override
  Widget build(BuildContext context) {
    var list1=["a","b","c"];
    var list2=["a","b","c","d","e"];
    var list3=["a","b"];
    var list4=["a","b","c","d"];
    var data=[list1,list2,list3,list4];
    var sliverList=ListCount(data);

    return Scaffold(
      appBar: AppBar(
        title: Text("Sticky Sliver List"),
      ),
      body: CustomScrollView(
      slivers: _buildStickySliverListTest(sliverList),
      ),
    );
  }

Also, Create a class for ListCount as below,

class ListCount{
  List<List<String>> data;

  ListCount(this.data);
}

This way you can easily build you header and sublist. implement your logic for listing and header as per your choice.

I hope this will work for your requirements.

Jay Mungara
  • 6,663
  • 2
  • 27
  • 49
  • Yes the desired output is achieved but when i tried to reduce the number of sliverListSize in the _buildStickySliverList function eg _buildStickySliverList(2, 2) the sublist items of the first header does not close up to the end,Secondly how can make the number of sublisted item of each header differently(not constant) – Daniel Geuza Aug 02 '19 at 06:24
  • I think this suits my requirements i appreciate your time and consideration – Daniel Geuza Aug 02 '19 at 08:11