Flutter: How to handle Renderflex overflow in SliverPersistentHeader

Viewed 146

I have a SliverPersistentHeader which contains a video. The desired behavior of this view is that as a user scrolls upward, the view should cover or minimize the size of the video. The video header is a widget containing a Chewie video player. The desired behavior works up to a certain point at which I get a pixel overflow as shown in this animation:

enter image description here

When the scroll reaches a certain point, the video can no longer resize and it results in a render overflow. The desired behavior would be for the video to continue to resize until it's gone, or to catch the error and hide or remove the video from the view. The code rendering this scroll view is:

  Widget buildScollView(GenericScreenModel model) {
    return CustomScrollView(
      slivers: [
        StandardHeader(),
        SliverFillRemaining(
          child: Container(
            // color: Colors.transparent,
              decoration: BoxDecoration(
                  border: Border.all(
                    color: Colors.white,
                  ),
                  borderRadius: BorderRadius.only(topRight: radius, topLeft: radius)),
              child: Padding(
                padding: const EdgeInsets.all(20.0),
                child: Text(model.model?.getContentText ?? 'Empty'),
              )),
        )
      ],
    );
  }

The StandardHeader class is a simple widget containing a Chewie video.

class _StandardHeaderState extends State<StandardHeader> {
  @override
  Widget build(BuildContext context) {
    return SliverPersistentHeader(
      floating: true,
      delegate: Delegate(
        Colors.blue,
        'Header Title',
      ),
      pinned: true,
    );
  }
}

Is there a way to catch this error and hide the video player? Can anyone help with this or point me to a resource? Thanks!

0 Answers
Related