I'd like to list some components in a row and when a component reaches the end of the page it should just move to the next row. In this way I expect the page to be adjusted dynamically to the size of the screen. I don’t have a code example because it’s a theoretical question.

CodePudding user response：

You can use the screen width/height to calculate the size of the row widgets.

To get the screen size do the following:

final height = MediaQuery.of(context).size.height;
final width = MediaQuery.of(context).size.width;

CodePudding user response：

final height = MediaQuery.of(context).size.height; final width = MediaQuery.of(context).size.width;

// or you can use screen util package it make your screen responsive

and make your code inside SizedBox it will work

like this : SizedBox( height: 100, width: width * 0.85 // this mean width is 85% of screen width// child: //your code ),

CodePudding user response：

The obvious answer is Wrap. Give it some children, and it lays them out by default start to end horizontally, and when the next child doesn't fit, it starts a second line.

You don't even need to put it in a row, but you can certainly use it as part of a row or part of a column.