Search code examples
flutterflutter-listviewflutter-gridview

BoxConstraints forces an infinite height: SizedBox.Expand()

Im building a List View for displaying videos.I'm using ListView to display 2 videos beside each other for each blog post. I've wrapped ListView inside a SizedBox of a custom height and width. For the first 2 blog posts the 2 videos display correctly, but when I scroll below to the third blog post one I get :

BoxConstraints forces an infinite height: The relevant error causing widget was SizedBox.Expand().

The Page rendering the blog posts itself freezes with an out of memory error and crashes. I have to run debug all over again.

Here is my code :

Widget _buildVideoPlayerListTwo(
      {List<PostMedia>? mediaItems,
      double? width,
      double? height,
      Post? post}) {
    return SizedBox(
      height: widget.height,
      width: widget.width,
      child: ListView.builder(
          scrollDirection: Axis.horizontal,
          physics: const PageScrollPhysics(),
          padding: EdgeInsets.zero,
          shrinkWrap: true,
          itemCount: mediaItems!.length,
          itemExtent: 186,
          itemBuilder: (context, index) {
            return Stack(
              children: <Widget>[
                Padding(
                  padding: const EdgeInsets.only(left: 2, right: 2),
                  child: ClipRRect(
                    borderRadius: const BorderRadius.only(
                        topLeft: Radius.circular(6),
                        topRight: Radius.circular(6),
                        bottomLeft: Radius.circular(6),
                        bottomRight: Radius.circular(6)),
                    child: SizedBox.expand(
                      child: FittedBox(
                        fit: BoxFit.cover,
                        child: SizedBox(
                          height: widget.height,
                          width: widget.width,
                          child: KNVideoPlayer(
                            videoUrl:
                                mediaItems[index].contentObject.file.toString(),
                            thumbnailUrl: mediaItems[index]
                                .contentObject
                                .thumbnail
                                .toString(),
                            isConstrained: widget.isConstrained,
                            controller: _knVideoPlayerController,
                          ),
                        ),
                      ),
                    ),
                  ),
                )
              ],
            );
          }),
    );
  }

Solution

  • You can't let the SizedBox expand while it's inside a scroll view.

    The parent SizedBox constraints:

    return SizedBox(
  height: widget.height,
  width: widget.width,
  child: ListView.builder(

    while the leaf of your tree videoPlayer contraints:

     child: SizedBox(
                          height: widget.height,
                          width: widget.width,
                          child: KNVideoPlayer(

    in all cases the video allocate the whole screen, what is the purpose of expanded sized box ?

    i think your problem is to make the video covers the screen, not to be contained!

    if so, try to remove Expnded SizedBox and wrap your video player with that fitted box:

     child: SizedBox
                 height: widget.height,
                 width: widget.width,
                          child: FittedBox -----> cover--> KNVideoPlayer(

    Hope it helps.