'flutter how to give height to the childrens of GridView.Builder
I am tring to give height to the childrens of gridview.builder but it's not accepting. I tried by using container but its not working...
please help
GridView.builder(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
),
itemCount: snapshot.data.length,
itemBuilder: (BuildContext context, int index) {
return Container(
height: 280.0,
child: Column(
children: <Widget>[
Padding(
padding:
EdgeInsets.fromLTRB(10.0, 10.0, 10.0, 10.0),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
height: 208.5,
width: 138.75,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10.0),
image: DecorationImage(
image: NetworkImage(
"${snapshot.data[index].url}"),
fit: BoxFit.fill)),
),
),
Text(
snapshot.data[index].title,
style: TextStyle(fontSize: 17.0),
),
],
),
);
},
),`
Solution 1:[1]
You want to use the childAspectRatio property of the SliverGridDelegate preferably with MediaQuery:
class HomePage extends StatelessWidget {
final List<String> items = <String>[
"Item 1",
"Item 2",
"Item 3",
"Item 4",
"Item 5",
"Item 6",
];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Home')),
body: GridView.builder(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
childAspectRatio: MediaQuery.of(context).size.width /
(MediaQuery.of(context).size.height / 4),
),
itemCount: items.length,
itemBuilder: (context, index) {
return GridTile(child: Text(items[index]));
},
),
);
}
}
Solution 2:[2]
You can use mainAxisExtent instead of childAspectRatio
GridView.builder(
physics: BouncingScrollPhysics(),
itemCount: resumes.length,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
mainAxisExtent: 256,
),
itemBuilder: (_, index) => Container(),
),
Solution 3:[3]
By changing childAspectRatio 0 to 1 you can change hight of item
Solution 4:[4]
to make the container bigger, aspect ration should be less than 1 but greater than 0. e.g 0.4
Solution 5:[5]
remove childAspectRatio and use this mainAxisExtent: 256,
Solution 6:[6]
import 'package:flutter/material.dart';
class AllCategories extends StatelessWidget {
AllCategories({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
appBar: AppBar(
backgroundColor: Colors.white,
title: Text('All Categories'),
leading: IconButton(
icon: Icon(
EvaIcons.arrowIosBack,
color: Colors.black,
),
onPressed: () {
Navigator.pop(context);
},
),
),
body: GridView.builder(
shrinkWrap: true,
itemCount: 6,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2, childAspectRatio: 2 / 3),
itemBuilder: (context, index) {
return Container(
margin: EdgeInsets.all(8),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(2),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Flexible(
child: Container(
decoration: BoxDecoration(
image: DecorationImage(
fit: BoxFit.cover,
image: NetworkImage(
'https://t3.ftcdn.net/jpg/03/15/59/88/360_F_315598844_WbT1Ix5HL17KN6sDzTBhu1zE4nb7Ry3o.jpg'))),
),
),
Padding(
padding: const EdgeInsets.fromLTRB(8, 10, 0, 0),
child: Text(
'Nike',
style: TextStyle(
fontSize: 18, fontWeight: FontWeight.w900),
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Text("Just Do It",
style: TextStyle(fontSize: 15, color:
Colors.grey)),
)
],
));
}),
);
}
}
Solution 7:[7]
My workaround was to use a Wrap and then use list.map() to list data in the children. This also gives more control on how you want your list to display.
class MoviesList extends StatelessWidget {
const MoviesList({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: SingleChildScrollView(
padding: const EdgeInsets.symmetric(vertical: 20),
child: SizedBox(
width: MediaQuery.of(context).size.width,
child: Wrap(
alignment: WrapAlignment.spaceEvenly,
spacing: 10,
runSpacing: 10,
direction: Axis.horizontal,
children: _data.map((item) {
return Column(
children: [
Container(
height: MediaQuery.of(context).size.width * 0.6,
width: MediaQuery.of(context).size.width * 0.4,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(14),
image: DecorationImage(
fit: BoxFit.fitHeight,
image: NetworkImage(item['Poster']))),
),
Text(item['Title'])
],
);
}).toList())))));
}
}
List _data = [
{
"Title": "Batman",
"Poster":
"https://images-na.ssl-images-amazon.com/images/M/MV5BMTYwNjAyODIyMF5BMl5BanBnXkFtZTYwNDMwMDk2._V1_.jpg"
},
{
"Title": "The Dark Knight",
"Poster":
"https://ia.media-imdb.com/images/M/MV5BMTMxNTMwODM0NF5BMl5BanBnXkFtZTcwODAyMTk2Mw@@._V1_UX182_CR0,0,182,268_AL_.jpg"
},
{
"Title": "Dawn of Justice",
"Poster":
"https://ia.media-imdb.com/images/M/MV5BYThjYzcyYzItNTVjNy00NDk0LTgwMWQtYjMwNmNlNWJhMzMyXkEyXkFqcGdeQXVyMTQxNzMzNDI@._V1_UX182_CR0,0,182,268_AL_.jpg"
},
{
"Title": "The Dark Knight Rises",
"Poster":
"https://ia.media-imdb.com/images/M/MV5BMTk4ODQzNDY3Ml5BMl5BanBnXkFtZTcwODA0NTM4Nw@@._V1_UX182_CR0,0,182,268_AL_.jpg"
},
{
"Title": "The LEGO Batman Movie",
"Poster":
"https://ia.media-imdb.com/images/M/MV5BMTcyNTEyOTY0M15BMl5BanBnXkFtZTgwOTAyNzU3MDI@._V1_UX182_CR0,0,182,268_AL_.jpg"
},
{
"Title": "Batman & Robin",
"Poster":
"https://ia.media-imdb.com/images/M/MV5BMGQ5YTM1NmMtYmIxYy00N2VmLWJhZTYtN2EwYTY3MWFhOTczXkEyXkFqcGdeQXVyNTA2NTI0MTY@._V1_UX182_CR0,0,182,268_AL_.jpg"
},
{
"Title": "Batman Returns",
"Poster":
"https://ia.media-imdb.com/images/M/MV5BOGZmYzVkMmItM2NiOS00MDI3LWI4ZWQtMTg0YWZkODRkMmViXkEyXkFqcGdeQXVyODY0NzcxNw@@._V1_UX182_CR0,0,182,268_AL_.jpg"
}
];
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | soupjake |
| Solution 2 | Furlan |
| Solution 3 | harsha.kuruwita |
| Solution 4 | Samson Austin Dumelo |
| Solution 5 | mohammed Sedky |
| Solution 6 | Suraj Rao |
| Solution 7 | MosesAyo |