Search code examples
flutteroverflowflutter-sliver

Flutter SliverPersistentHeader is causing "bottom overflow when scroll"


i have a SliverPersistentHeader that causes bottom overflowed when user scrolls the screen.

Bottom overflowed

How can i fix it?

    return CustomScrollView(
      slivers: <Widget>[
        SliverPersistentHeader(
          pinned: false,
          delegate: DynamicSliverHeaderDelegate(
            maxHeight: 256,
            minHeight: 186,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.start,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                _topo(context, grupo),
                _infoGrupo(context, grupo),
              ],
            ),
          ),
        ),

        // TODO: Lista do grupo 
        SliverFillViewport(
          delegate: SliverChildListDelegate(
            [
              Container(
                padding: EdgeInsets.only(top: 100),
                color: Colors.green.withOpacity(0.2),
                child: Column(
                  children: <Widget>[
                    Text('TODO... A construir'),
                  ],
                ),
              ),
            ],
          ),
        ),
      ],
    );

// .....

class DynamicSliverHeaderDelegate extends SliverPersistentHeaderDelegate {
  final Widget child;
  final double maxHeight;
  final double minHeight;

  const DynamicSliverHeaderDelegate({
    @required this.child,
    this.maxHeight = 250,
    this.minHeight = 80,
  });

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

  // @override
  // bool shouldRebuild(DynamicSliverHeaderDelegate oldDelegate) => true;

  @override
  bool shouldRebuild(DynamicSliverHeaderDelegate oldDelegate) {
    return maxHeight != oldDelegate.maxHeight ||
        minHeight != oldDelegate.minHeight ||
        child != oldDelegate.child;
  }

  @override
  double get maxExtent => maxHeight;

  @override
  double get minExtent => minHeight;
}

Solution

  • Solved it by wrapping the DynamicSliverHeaderDelegate Column child with a SingleChildScrollView´ withNeverScrollableScrollPhysics` physics.

    return CustomScrollView(
      slivers: <Widget>[
        SliverPersistentHeader(
          pinned: false,
          delegate: DynamicSliverHeaderDelegate(
            maxHeight: 256,
            minHeight: 186,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.start,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                _topo(context, grupo),
                _infoGrupo(context, grupo),
              ],
            ),
          ),
        ),
        // TODO: Lista do grupo 
        // ...
      ],
    );