Flutter CustomScrollView scrolls when there are not enough items

Question

Having an issue with scrolling when using slivers and a sliver appbar. How can I prevent the scrollview from scrolling when no scroll is needed like in the video. And if there are enough items for scrolling it should scroll (That works perfectly)

I followed this medium post. And you can see that he has the same problem. https://medium.com/@diegoveloper/flutter-collapsing-toolbar-sliver-app-bar-14b858e87abe

https://youtu.be/l1EwM9GAfxw

class HomeScreen extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: NestedScrollView(
        headerSliverBuilder: (context, innerBoxIsScrolled) => [
          SliverAppBar(
            brightness: Brightness.dark,
            backgroundColor: Colors.amber.withOpacity(0.5),
            expandedHeight: 166,
            flexibleSpace: FlexibleSpaceBar(
              collapseMode: CollapseMode.pin,
              background: SafeArea(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Container(
                      height: 80,
                      width: 80,
                      child: Placeholder(),
                    ),
                    Row(
                      children: [
                        Text(
                          'sdalkf',
                        ),
                      ],
                    ),
                  ],
                ),
              ),
            ),
          ),
          SliverPersistentHeader(
            delegate: SliverAppBarDelegate(
              MediaQuery.of(context).padding.top,
              Container(
                color: Colors.amber.withOpacity(0.5),
                child: SafeArea(
                  bottom: false,
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text('sdfaklladsjfkladslkf\nsadjflkasjklfs\nsdkjlfjlkadslfjk'),
                    ],
                  ),
                ),
              ),
            ),
            pinned: true,
          ),
        ],
        body: GridView.builder(
          itemCount: 3,
          padding: EdgeInsets.zero,
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3, childAspectRatio: 0.68),
          itemBuilder: (context, index) => Padding(
            padding: const EdgeInsets.symmetric(horizontal: 8),
            child: Container(
              color: Colors.black54,
            ),
          ),
        ),
      ),
    );
  }
}

class SliverAppBarDelegate extends SliverPersistentHeaderDelegate {
  final Widget child;
  final double topSafeArea;

  _SliverAppBarDelegate(this.topSafeArea, this.child);

  @override
  double get minExtent => 105 + topSafeArea;

  @override
  double get maxExtent => 105 + topSafeArea;

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

  @override
  bool shouldRebuild(_SliverAppBarDelegate oldDelegate) {
    return false;
  }
}

Related to:

Flutter SliverAppBar with Tabs overlays content

The above link is not a sollution but a temp fix

Answer 1

Set physics behavior of ScrollView to AlwaysScrollableScrollPhysics

from documentation:

/// Scroll physics that always lets the user scroll.
///
/// This overrides the default behavior which is to disable scrolling
/// when there is no content to scroll. It does not override the
/// handling of overscrolling.