When using a CustomScrollView with the reverse property set to true it would make sense to reverse the SliverStickyHeader as well. In a reversed list, the header currently is at the bottom of the list. I suggest to add a reverse option to SliverStickyHeader as well, so it renders after the other sliver widgets, instead of before.

You can duplicate the issue by running the code as below.

import 'package:flutter/material.dart';
import 'package:flutter_sticky_header/flutter_sticky_header.dart';

class TabHeaderExample extends StatefulWidget {
  const TabHeaderExample({Key? key}) : super(key: key);

  @override
  State<TabHeaderExample> createState() => _TabHeaderExampleState();
}

class _TabHeaderExampleState extends State<TabHeaderExample> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Tab List Example'),),
      body: CustomScrollView(
        slivers: [
          _StickyHeaderList(index: 0),
          _StickyHeaderList(index: 1),
          _StickyHeaderList(index: 2),
          _StickyHeaderList(index: 3),
        ],
      ),
    );
  }
}

class _StickyHeaderList extends StatefulWidget  {
  final int index;
  const _StickyHeaderList({Key? key, required this.index}) : super(key: key);

  @override
  State<_StickyHeaderList> createState() => _StickyHeaderListState();
}

class _StickyHeaderListState extends State<_StickyHeaderList> with TickerProviderStateMixin {

  late TabController _tabController;

  @override
  void initState() {
    super.initState();
    _tabController = TabController(length: 10, vsync: this);
  }

  @override
  Widget build(BuildContext context) {
    return SliverStickyHeader(
      header: Container(
        color: Colors.white,
        height: 47,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Expanded(
              child: TabBar(
                isScrollable: true,
                controller: _tabController,
                indicatorColor: const Color(0xFF216DDF),
                indicatorSize: TabBarIndicatorSize.label,
                indicatorWeight: 2,
                indicatorPadding: EdgeInsets.only(bottom: 10),
                unselectedLabelColor: const Color(0xFF888888),
                unselectedLabelStyle: TextStyle(fontSize: 17),
                labelColor: const Color(0xFF216DDF),
                labelStyle: TextStyle(fontSize: 17, fontWeight: FontWeight.bold),
                tabs: _createTabs(),
                onTap: (index) { print(index);},
              ),
            ),
            InkWell(
              child: Container(
                decoration: BoxDecoration(
                  color: Colors.red,
                  boxShadow: [
                    BoxShadow(
                      color: Colors.white,
                      blurRadius: 8,
                      offset: Offset(-20, 0),
                    ),
                  ],
                ),
                padding: EdgeInsets.only(left: 5, right: 12),
                child: Row(
                  children: [
                    Text(
                      "全部",
                      style: TextStyle(color: const Color(0xFF101010), fontSize: 17),
                    ),
                  ],
                ),
              ),
              onTap: () {
                // Can not response
                print("1234567");
              },
            ),
          ],
        ),
      ),
      sliver: SliverList(
        delegate: SliverChildBuilderDelegate(
              (context, i) => ListTile(
            onTap: () {
              print('tile $i');
            },
            leading: CircleAvatar(
              child: Text('${widget.index}'),
            ),
            title: Text('List tile #$i'),
          ),
          childCount: 6,
        ),
      ),
    );
  }

  /// 创建Tabs
  List<Widget> _createTabs() {
    return ["我是tab", "我是tab","我是tab","我是tab","我是tab","我是tab","我是tab","我是tab","我是tab","我是tab"].map((e) => Tab(text: e)).toList();
  }
}

Thank you for your library, it's super useful. I have one question: Is it possible to achieve something like this:

As you can see header with dates sticks to the screen as well as the side header with time (it is a https://github.com/google/iosched app). Example app have great section with side headers, but i tried to nest SliverStickyHeader and it doesn't work. Second Header doesn't stick to screen.

Code

// code from example app
class MainScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    List<Widget> slivers = new List<Widget>();

    // App Bar
    slivers.add(getAppBar());

    slivers.add( new SliverStickyHeader(
      // Tabs header
      header:_buildHeader(1, text: 'Tabs'),
      // Side header
      sliver: SliverStickyHeader(
       overlapsContent: true,
       header: _buildSideHeader(1),
       sliver: new SliverPadding(
       // other code is same, create grid

  }

  Widget getAppBar() {
    return SliverAppBar(
      expandedHeight: 60.0,
      floating: true,
      brightness: Brightness.light,
      title: Text('Main AppBar',
          style: TextStyle(color: Colors.black.withOpacity(1.0))),
      elevation: 0.0,
      centerTitle: true,
      backgroundColor: Color.fromRGBO(255, 255, 255, 1.0),
    );
  }

I'm noticing a one pixel difference at the top when I use a CustomScrollView containing a SliverList, and a CustomScrollView using SliverStickyHeader.

To reproduce, clone https://github.com/SteveAlexander/one_pixel_bug then tap in the text area at the top of the screen so that it gets focus.

Notice that the 2px blue border on the TextField is covered by the SliverStickyHeader by 1px.

This does not happen when using regular Slivers in a CustomScrollView.

I could not manage to use sticky header with sliver app bar when pinned set to true. The sliver sticky header scrolled below sliver app bar.

slivers.add(
      SliverAppBar(
        expandedHeight: 60.0,
        floating: true,
        pinned: true, // <-- Setting this to true make the header not sticky on scroll
        title: Text(
          'Main AppBar',
          style: TextStyle(color: Colors.black.withOpacity(1.0)),
        ),
        bottom: PreferredSize(
          preferredSize: Size.fromHeight(20.0),
          child: Text("Bottom Text"),
        ),
        elevation: 0.0,
        centerTitle: true,
      ),
    );

    slivers.add(_buildBuilderExample());
    int i = 0;
    slivers.addAll(_buildHeaderBuilderLists(context, i, i),
);

Thank you.

Fixes https://github.com/letsar/flutter_sticky_header/issues/80

Issue:

Fix:

@letsar let me know if you have any comments about this, I'm open to spend time solving them.

I'm currently needing this to finish a functionality, so having this packed in a future ^0.6.5 (or sth like that) would be awesome!

Hi, I was trying to add some interaction to elements inside SliverStickyHeader and floating SliverAppBar. Noticed that when you scroll the list down till the SliverAppBar disappears and then scroll up a little bit until SliverAppBar appears again, the onTap event won't fire any more.

Below I'm adding the code that reproduces the issue. I have added a clickable element "Sometimes I'm not clickable" and a "Shop" title. To reproduce the issue you need to scroll the list down till the SliverAppBar disappears and then scroll up a little bit until SliverAppBar appears again. You should see that hit test moves from "Sometimes I'm not clickable" element to the "Shop" title, and "Sometimes I'm not clickable" becomes not clickable until you scroll all the way to the top of the list.

import 'package:flutter/material.dart';
import 'package:flutter_sticky_header/flutter_sticky_header.dart';

class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: CustomScrollView(
          slivers: [
            const SliverAppBar(title: Text('Example'), titleSpacing: 0, floating: true),
            SliverStickyHeader(
              header: Column(
                children: [
                  Container(
                    alignment: Alignment.center,
                    height: 60.0,
                    width: double.infinity,
                    color: Colors.white,
                    child: const Text('Shop', style: TextStyle(fontSize: 20.0)),
                  ),
                  InkWell(
                    onTap: () => print('111111'),
                    child: Container(
                        alignment: Alignment.center,
                        height: 60,
                        width: double.infinity,
                        color: Colors.red,
                        child: const Text('Sometimes I\'m not clickable')),
                  ),
                ],
              ),
              sliver: SliverList(
                delegate: SliverChildBuilderDelegate(
                  (BuildContext context, int index) {
                    return Card(
                      margin: const EdgeInsets.all(8.0),
                      child: Container(
                        color: Colors.blue[100 * (index % 9 + 1)],
                        height: 80,
                        alignment: Alignment.center,
                        child: Text("Item $index", style: const TextStyle(fontSize: 20)),
                      ),
                    );
                  },
                  childCount: 100,
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

This is a request to add support for null safety to package:flutter_sticky_header. We depend on your awesome package, so would be great to have null safety enabled.

The Dart/Flutter team already encourages publishing the migrated packages: See this blog post.

See the migration guide for details about enabling null safety.

Hello can this component be used inside ListView.builder ?

ListView.builder(
         itemBuilder: (BuildContext context, int index) =>
SliverStickyHeader(
                header: ...

                sliver: SliverList(delegate: SliverChildBuilderDelegate(
                      (context, rowIndex) => ...                  
               childCount: ... ,
)

Checking out the performance it seems that the memory allocation is retained longer than needed so how can we build an " infinite list ".

So case here. I want to build infinite both-direction list and split sections with sticky headers. How I can do this with your plugin (if it's possible in general)?

P.S. To make both-direction infinite list I used Viewport with 2 SliverList instances, and "center" key, that points to positive direction list

With this pr you can have multiple slivers as child what would make it possible for instance to have multiple sticky headers as child, or 2 lists.

Also solves #62

environment： Flutter 3.3.8 • channel stable • https://github.com/flutter/flutter.git Framework • revision 52b3dc25f6 (7 weeks ago) • 2022-11-09 12:09:26 +0800 Engine • revision 857bd6b74c Tools • Dart 2.18.4 • DevTools 2.15.0

error info:

======== Exception caught by rendering library =====================================================
The following assertion was thrown during performLayout():
'package:flutter/src/rendering/sliver_list.dart': Failed assertion: line 315 pos 14: 'estimatedMaxScrollOffset >= endScrollOffset - childScrollOffset(firstChild!)!': is not true.


Either the assertion indicates an error in the framework itself, or we should provide substantially more information in this error message to help you determine and fix the underlying cause.
In either case, please report this assertion by filing a bug on GitHub:
  https://github.com/flutter/flutter/issues/new?template=2_bug.md

Before I ask my question... the explanation of what I'm trying to achieve...

• IM BUILDING a custom contact picker

I have headers for each section A, B, etc...

I have the ability to scroll to a particular section because I know the height of . the headers . and how many items are in each section (all the contacts are of the same size)

At the moment I am using a CustomScrollView with a SliverFixedExtentList with a SliverChildBuilderDelegate

• THE QUESTION Will using this plugin to make my headers sticky affect performance by essentially shrinking wrapping each of my SliverFixedExtentList? will performance be affected any other way? If so, by how much?

When using center key, the header gets stuck on the bottom. I wondering if there is a way to simply display headers for months and years indefinitely starting at a certain date in the center. There seems to be no easy way to solve this problem in Flutter.

return CustomScrollView(
        cacheExtent: 300.0,
        center: centerKey,
        anchor: 0.5,
        slivers: <Widget>[
          _rowBuilder(context, date, -1),
          SliverList(
            key: centerKey,
            delegate: SliverChildListDelegate([
              Column(
                children: [
                  Divider(),
                  Container(
                    color: Color.fromARGB(255, 174, 12, 0),
                    child: Text('data'),
                  ),
                  Divider(),
                ],
              ) 
            ]),
          ),
          _rowBuilder(context, date, 1),
        ],
      );