Dynamic height for StaggeredGridView is not working in flutter project

249

just check if this code works:

staggeredTileBuilder: (int index) {
    if (index == 0) {
      return StaggeredTile.fit(2);
    }
    return StaggeredTile.count(1,1);
  },
Share:
249
jess startdust
Author by

jess startdust

Updated on December 18, 2022

Comments

  • jess startdust
    jess startdust over 1 year

    I wanted to build a StaggeredGridView with a banner video at the 0th index and 2 cards at each row. But the video is not filling the screen width, because the height for every row is the same.

    Here is what I am doing.

    static final videoPlayerController = VideoPlayerController.network(
      "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4");
    
    static final chewieController = ChewieController(
    videoPlayerController: videoPlayerController,
    aspectRatio: 3 / 2,
    autoPlay: true,
    looping: true,
    allowMuting: true,
    allowFullScreen: false,);
    
    final playerWidget = Chewie(
    controller: chewieController,);
    

    Code for building Widget:

    Widget buildStaggeredListing(BuildContext context) {
    return StaggeredGridView.countBuilder(
      crossAxisCount: 2,
      crossAxisSpacing: 4.0,
      itemCount: 10,
      itemBuilder: (BuildContext buildContext, int index) {
        if (index == 0) {
          return playerWidget;
        }
        return Card(
          child: Padding(
            padding: EdgeInsets.all(16.0),
            child: Text(
              index.toString(),
              style: TextStyle(fontSize: 22.0),
            ),
          ),
        );
      },
      staggeredTileBuilder: (int index) {
        if (index == 0) {
          return StaggeredTile.count(2, 1);
        }
        return StaggeredTile.count(1, 1);
      },
    );
    

    }

    Screenshot: screenshot

    Update: according to sagar acharya's answer, I used

    if (index == 0) {
          return StaggeredTile.fit(1);
       }
        return StaggeredTile.fit(2);
    

    and this is what is happening: screenshot2

  • jess startdust
    jess startdust about 4 years
    no brother. I updated my question with what I have tried from your suggestion.
  • Sagar Acharya
    Sagar Acharya about 4 years
    can you just make StaggeredTile.fit(2) for index 0 , and use this if index is not 0 : return StaggeredTile.count(1, 1);
  • jess startdust
    jess startdust about 4 years
    That works. Thank you. Please edit your answer and I can approve it.