Flutter Question posted in
The official Flutter documentation can be found here.

Flutter – How do I get the header of a NestedScrollView to appear immediately?

By default it seems that the header of a NestedScrollView only appears when you scroll all the way up. I’d like for it to start showing as soon as I start scrolling up (and it would show only by the amount of up scroll I’ve done). How can this be achieved ?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    This is the solution I managed to get working :

    floatHeaderSlivers: true,
headerSliverBuilder: (context, _) {
  return [
    SliverPersistentHeader(
      delegate: SliverPersistentFloatingHeader(
        size: 70+kToolbarHeight,
        child: Column(
          children: [
            appBar,
            buildHeader(),
          ],
        ),
      ),
    ),
  ];
},

    With :

    class SliverPersistentFloatingHeader extends SliverPersistentHeaderDelegate {

  SliverPersistentFloatingHeader({
    required this.child,
    required this.size,
  });

  final Widget child;
  final double size;

  @override
  double get minExtent => size;

  @override
  double get maxExtent => size;

  @override
  Widget build(BuildContext context, double shrinkOffset, bool overlapsContent) {
    return child;
  }

  @override
  bool shouldRebuild(SliverPersistentFloatingHeader oldDelegate) {
    return true;
  }
}

    Note that there's a lot of gotchas here. For example, if you set minExtent to 0 (which would make sense, intuitevely), you'll get overlap. SliverOverlapAbsorber does not fix that.


  2. 0

    Have you tried this?

    NestedScrollView(
  floatHeaderSlivers: true,
...
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search