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);
},
Author by
jess startdust
Updated on December 18, 2022Comments
-
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 about 4 yearsno brother. I updated my question with what I have tried from your suggestion.
-
Sagar Acharya about 4 yearscan you just make StaggeredTile.fit(2) for index 0 , and use this if index is not 0 : return StaggeredTile.count(1, 1);
-
jess startdust about 4 yearsThat works. Thank you. Please edit your answer and I can approve it.