Nested StickyHeaders

[Skogsfrae]

It would be nice to be able to nest multiple StickyHeaders and keep the inner ones visible under the outer ones. With the current version of the library the inner ones will go under the outer ones and stick on the top corner of the list making them not visible.

Current behaviour:

Desired behaviour:

Use case:

ListView.builder(
  primary: controller == null,
  controller: controller,
  itemBuilder: (context, index) {
    return StickyHeader(
      controller: controller, // Optional
      header: Container(
        height: 50.0,
        color: Colors.blueGrey[700]?.withOpacity(.7),
        padding: const EdgeInsets.symmetric(horizontal: 16.0),
        alignment: Alignment.centerLeft,
        child: Text(
          'Header #$index',
          style: const TextStyle(color: Colors.white),
        ),
      ),
      content: Column(
        children: [1, 2, 3]
            .map(
              (index) => StickyHeaderBuilder(
                controller: controller,
                builder: (context, stuckAmount) {
                  return Container(
                    height: 30.0,
                    color: Colors.red[700]?.withOpacity(1),
                    padding: const EdgeInsets.symmetric(horizontal: 16.0),
                    alignment: Alignment.centerLeft,
                    child: Text(
                      'Subheader #$index',
                      style: const TextStyle(color: Colors.white),
                    ),
                  );
                },
                content: Container(
                  color: Colors.grey[300],
                  child: Image.network(
                    imageForIndex(index),
                    fit: BoxFit.cover,
                    width: double.infinity,
                    height: 200.0,
                  ),
                ),
              ),
            )
            .toList(),
      ),
    );
  },
);