I'm trying to create a device's gallery grid view similar to that of Instagram but it only seems to work properly for images and not for videos. The video files are not constrained to their respective containers and shrink/cover and/or push other video containers. Is there a way to remedy this?

Expanded(
                  child: GridView.builder(
                      gridDelegate:
                          SliverGridDelegateWithFixedCrossAxisCount(
                              crossAxisCount: 3,
                              crossAxisSpacing: 1,
                              mainAxisSpacing: 1,
                              childAspectRatio: (1/1.75)
                              ),
                      itemBuilder: (_, i) {
                        var file = selectedModel.files[i];
                        return GestureDetector(
                          child: FlickMultiPlayer(
                            url: file.path,
                            flickMultiManager: flickMultiManager,
                            image: 'assets/images/video.png',
                          ),
                          onTap: () {
                            print("SELECTED Model*************");
                            print(video);
                            // Navigator.push(
                            //   context,
                            //   MaterialPageRoute(
                            //     builder: (context) => ProductDetailPage(
                            //       imagePath: file,
                            //     ),
                            //   ),
                            // );
                          },
                        );
                      },
                      itemCount: selectedModel.files.length),
                )

Video gallery Screen

CodePudding user response：

What you can do is generate a video thumbnail instead do display in the gallery rather than displaying the video itself in the grid. Clicking on the thumbnail should open the video on a full page to play the video.

CodePudding user response：

I think you can constrain the video size with a SizedBoxwidget. You can do this

SizedBox(
  width: some double,
  height: some double,
  child: your video widget
)

In your case, you might want to get a size relative to the screen size you MediaQuery.of(context).size if you want the size of the screen.

If you want the available space, you should use LayoutBuilder