Menu
i'm new in flutter and i want to draw a image grid in a row. i used this example Flutter - Layout a Grid but it show me every time a error
Widget buildView(){
return new Container(
color: Colors.white,
child:
new Padding(
padding: EdgeInsets.all(8.0),
child: new Column(
children: <Widget>[
new Row(
children: <Widget>[
Flexible(
child: new GridView.count(
crossAxisCount: 4,
childAspectRatio: 1.0,
padding: const EdgeInsets.all(4.0),
mainAxisSpacing: 4.0,
crossAxisSpacing: 4.0,
children: <String>[
'https://via.placeholder.com/150',
'https://via.placeholder.com/150',
'https://via.placeholder.com/150',
'https://via.placeholder.com/150',
'https://via.placeholder.com/150',
'https://via.placeholder.com/150',
].map((String url) {
return new GridTile(
child: new Image.network(url, fit: BoxFit.cover));
}).toList()),
),
],
),
],
),
],
),
),
);
}
i becode every time this error "Vertical viewport was given unbounded height"
434
SliverGridDelegateWithFixedCrossAxisCount class Null safety. Creates grid layouts with a fixed number of tiles in the cross axis. For example, if the grid is vertical, this delegate will create a layout with a fixed number of columns.
child aspect ratio is basically width/height of the grid. So let's say you want the width of each grid to be 30 and the height to be 20, you would set the aspect ratio to be 3/2.
Set it like this => padding: EdgeInsets. zero. This will eliminate all the unwanted spaces around your gridview. Actually, this is the correct answer among all the other answers.
You can provide physics: NeverScrollableScrollPhysics() on GridView to disable scroll effect. If you want scrollable as secondary widget use primary: false, To have Full Page scrollable, you can use body:SingleChildScrollView(..) or better using body:CustomScrollView(..) Save this answer.
You don't need to wrap GridView in a Row unless you are trying to divide the row. You can just use GridView.
new GridView.count(
crossAxisCount: 4,
childAspectRatio: 1.0,
padding: const EdgeInsets.all(4.0),
mainAxisSpacing: 4.0,
crossAxisSpacing: 4.0,
children: <String>[
'https://via.placeholder.com/150',
'https://via.placeholder.com/150',
'https://via.placeholder.com/150',
'https://via.placeholder.com/150',
'https://via.placeholder.com/150',
'https://via.placeholder.com/150',
].map((String url) {
return new GridTile(
child: new Image.network(url, fit: BoxFit.cover));
}).toList()),
If you really want to wrap it inside a row you need wrap GridView with a container and define a width or wrap in a flexible
Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Flexible(
child: new GridView.count(
crossAxisCount: 4,
childAspectRatio: 1.0,
padding: const EdgeInsets.all(4.0),
mainAxisSpacing: 4.0,
crossAxisSpacing: 4.0,
children: <String>[
'https://via.placeholder.com/150',
'https://via.placeholder.com/150',
'https://via.placeholder.com/150',
'https://via.placeholder.com/150',
'https://via.placeholder.com/150',
'https://via.placeholder.com/150',
].map((String url) {
return new GridTile(
child: new Image.network(url, fit: BoxFit.cover));
}).toList()),
),
],
),
If you get unbounded height error just wrap it with a container or sizedbox and define a height
70
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With