floatHeaderSlivers: true

[comerc]

Please, release floatHeaderSlivers: true

https://github.com/flutter/flutter/pull/59187

[zmtzawqlp]

It seems that the change is not only in nested_scroll_view.dart.

[comerc]

I just checked. NestedScrollView works great!

Updated files: ~/flutter/packages/flutter/lib/src/widgets/nested_scroll_view.dart ~/flutter/packages/flutter/lib/src/rendering/sliver_persistent_header.dart ~/flutter/packages/flutter/lib/src/rendering/viewport.dart ~/flutter/packages/flutter/lib/src/widgets/viewport.dart

Demo:

Widget build(BuildContext context) {
  return Scaffold(
    body: NestedScrollView(
      // Setting floatHeaderSlivers to true is required in order to float
      // the outer slivers over the inner scrollable.
      floatHeaderSlivers: true,
      headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
        return <Widget>[
          SliverAppBar(
            title: const Text('Floating Nested SliverAppBar'),
            floating: true,
            expandedHeight: 200.0,
            forceElevated: innerBoxIsScrolled,
          ),
        ];
      },
      body: ListView.builder(
        padding: const EdgeInsets.all(8),
        itemCount: 30,
        itemBuilder: (BuildContext context, int index) {
          return Container(
            height: 50,
            child: Center(child: Text('Item $index')),
          );
        }
      )
    )
  );
}

[zmtzawqlp]

thanks, but I wonder if it works when it has multiple SliverPersistentHeader. i will do more testing for this

[comerc]

I checked it with SliverPersistentHeader. NestedScrollView works!

Demo:

import 'package:flutter/material.dart';

class NestedScrollViewScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final statusBarHeight = MediaQuery.of(context).padding.top;
    final tabBarHeight = 48.0;
    return Scaffold(
        body: NestedScrollView(
            // Setting floatHeaderSlivers to true is required in order to float
            // the outer slivers over the inner scrollable.
            floatHeaderSlivers: true,
            headerSliverBuilder:
                (BuildContext context, bool innerBoxIsScrolled) {
              return <Widget>[
                SliverPersistentHeader(
                  pinned: true,
                  delegate: _CommonSliverPersistentHeaderDelegate(
                    child: Container(),
                    height: statusBarHeight,
                  ),
                ),
                SliverPersistentHeader(
                  delegate: _CommonSliverPersistentHeaderDelegate(
                      child: Container(
                          color: Colors.orange[50],
                          child: Center(child: Text('Title'))),
                      height: kToolbarHeight),
                ),
                SliverPersistentHeader(
                  pinned: true,
                  delegate: _CommonSliverPersistentHeaderDelegate(
                    child: Container(
                        color: Colors.white,
                        child: Center(child: Text('TabBar'))),
                    height: tabBarHeight,
                  ),
                ),
                //   SliverAppBar(
                //     title: const Text('Floating Nested SliverAppBar'),
                //     floating: true,
                //     expandedHeight: 200.0,
                //     forceElevated: innerBoxIsScrolled,
                //   ),
              ];
            },
            body: ListView.builder(
                padding: const EdgeInsets.all(8),
                itemCount: 30,
                itemBuilder: (BuildContext context, int index) {
                  return Container(
                    height: 50,
                    child: Center(child: Text('Item $index')),
                  );
                })));
  }
}

class _CommonSliverPersistentHeaderDelegate
    extends SliverPersistentHeaderDelegate {
  _CommonSliverPersistentHeaderDelegate({this.child, this.height});

  final Widget child;
  final double height;

  @override
  double get minExtent => height;

  @override
  double get maxExtent => height;

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

  @override
  bool shouldRebuild(covariant SliverPersistentHeaderDelegate oldDelegate) {
    //print("shouldRebuild---------------");
    return oldDelegate != this;
  }
}

[comerc]

Please see demo-video:

https://youtu.be/MHfjBjoZypA

[zmtzawqlp]

does it work for multiple SliverPersistentHeader which floating: true?

[comerc]

Yes! Its works too.

[zmtzawqlp]

ready for pub, close this if it has no problem

[comerc]

I thank you for your cooperation!