Home > Mobile >  Flutter GridView childAspectRatio dynamic content
Flutter GridView childAspectRatio dynamic content

Time:10-13

gridview / listview

Previously I used a ListView.builder to show my list, which respects the height of the content (image 3), however I need to show it in 2 columns with a GridView, unfortunately this no longer respects the height, that is why I made an exact calculation for the childAspectRatio (image 1), knowing only that the size of the letter of the system is in 1.0, but when enlarging it overflows out the container (image 2) and does not expand because the value of the Ratio is already static; for example:

final itemWidth = MediaQuery.of(context).size.width; 
double ratio;

if(isBigBox){
  ratio = (itemWidth / 117);
} else {
  ratio = (itemWidth / 50);
}

return GridView.count(
  crossAxisCount: 2,
  physics: NeverScrollableScrollPhysics(),
  crossAxisSpacing: 10.0,
  mainAxisSpacing: 10.0,
  childAspectRatio: ratio,
  shrinkWrap: true,
  children: list.map((dynamic item) {
    return Boxes(
      item: item,
    );
  }).toList(),
);

I need to know how to handle the Ratio of a GridView in this way. My goal is that the GridView element should take as little height as possible.

Thank you.

CodePudding user response:

Maybe GridView is not what you are looking for. Have you considered https://api.flutter.dev/flutter/widgets/Table-class.html or https://pub.dev/packages/flutter_staggered_grid_view (https://pub.dev/documentation/flutter_staggered_grid_view/latest/flutter_staggered_grid_view/StaggeredGridView/StaggeredGridView.count.html with shrinkWrap)?

  • Related