fluttercommunity / flutter_sticky_headers

Flutter Sticky Headers - Lets you place "sticky headers" into any scrollable content in your Flutter app. No special wrappers or magic required. Maintainer: @slightfoot
https://pub.dev/packages/sticky_headers
MIT License
1.1k stars 129 forks source link

Headers are jumping while scroll in reverse direction #19

Closed TatsuUkraine closed 2 years ago

TatsuUkraine commented 5 years ago

So case here. I need to build infinite list in both directions (aka Schedule view in Google calendar app). Headers are positioning correctly when only forward or only reverse list is visible inside Viewport. But when both lists are shown - sticky header start to jumping during scroll. It seems that position is calculating with delay or calculating in a wrong way.

Code sample

              CustomScrollView(
                center: _centerKey, // UniqueKey()
                slivers: <Widget>[
                  SliverList(
                    delegate: SliverChildBuilderDelegate(
                      (BuildContext context, int index) {
                        return StickyHeader(
                          header: new Container(
                            height: 50.0,
                            color: Colors.blueGrey[700],
                            padding: new EdgeInsets.symmetric(horizontal: 16.0),
                            alignment: Alignment.centerLeft,
                            child: new Text('Header #$index',
                              style: const TextStyle(color: Colors.white),
                            ),
                          ),
                          content: new Container(
                            child: Text("Content #$index"),
                            color: Colors.orange,
                            height: 400,
                            width: double.infinity,
                          ),
                        );
                      },
                    ),
                  ),
                  SliverList(
                    key: _centerKey,
                    delegate: SliverChildBuilderDelegate(
                      (BuildContext context, int index) {
                        return StickyHeader(
                          header: new Container(
                            height: 50.0,
                            color: Colors.blueGrey[700],
                            padding: new EdgeInsets.symmetric(horizontal: 16.0),
                            alignment: Alignment.centerLeft,
                            child: new Text('Header #$index',
                              style: const TextStyle(color: Colors.white),
                            ),
                          ),
                          content: new Container(
                            child: Text("Content #$index"),
                            color: Colors.orange,
                            height: 400,
                            width: double.infinity,
                          ),
                        );
                      },
                    ),
                  )
                ],
              ),

And some issue visualization: https://i.ibb.co/ZLJvwsG/sticky-jump.gif

slightfoot commented 2 years ago

Please retest with sticky_headers 0.3.0