CODEWITHSUNDEEP
androidflutterflutter-layoutflutter-animationflutter-sliver
Faizan Kamal
Faizan Kamal

Reputation: 2162

How to keep “SliverPersistentHeader” pinned to the top until item one of “SliverList” is reached after scrolling down?

I am using SliverPersistentHeader with SliverList in CustomScrollView . I don't want my SliverPersistentHeader to come down until item one (index:0) of SliverList is reached. Even if I am at index 50 of sliverlist still header comes down as I scroll down. Is there any shortcut way to achieve this?

Here is what I am getting ==>> https://i.imgur.com/yl48Kx2.gif

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {

    return SafeArea(
      child: Material(
        child: CustomScrollView(
          slivers: [
            SliverPersistentHeader(
              delegate: MySliverAppBar(expandedHeight: 250),
              pinned: true,
              floating: true,
            ),
            SliverSafeArea(
              sliver: SliverAppBar(
                pinned: true,
                backgroundColor: Color(0xffA2B8A1),
              ),
            ),
            SliverList(
              delegate: SliverChildBuilderDelegate(
                (_, index) => ListTile(
                  title: Text("Index: $index"),
                ),
              ),
            )
          ],
        ),
      ),
    );
  }
}

Upvotes: 4

Views: 10194

Answers (2)

CALAMITY210
CALAMITY210

Reputation: 29

Try setting pinned to true and keeping floating as false. Heres what each one does.

Floating: Whether the header should immediately grow again if the user reverses the scroll direction.

Pinned: Whether to stick the header to the start of the viewport once it has reached its minimum size.

Upvotes: 1

Jordan Kotiadis
Jordan Kotiadis

Reputation: 566

Just set float to false.Otherwise please upload your AppBar class

Upvotes: 0

Related Questions