I'm new in Flutter, I'm working on an e-commerce website, I want to add a Grid in my welcome page showing recent products, I'm trying to use GridVeiw.builder, but I got an error
Failed assertion: line 551 pos 12: 'child.hasSize': is not true.
I don't understand why I'm seeing this error.
My Welcome Screen
import 'package:ecommerce_practice/components/carousel.dart';
import 'package:ecommerce_practice/components/horizontal_list.dart';
import 'package:ecommerce_practice/components/products.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class WelcomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('E-commerce'),
backgroundColor: Colors.red,
actions: [
IconButton(
icon: Icon(
Icons.search,
),
color: Colors.white,
onPressed: () {},
),
IconButton(
icon: Icon(Icons.shopping_cart),
color: Colors.white,
onPressed: () {},
)
],
),
drawer: Drawer(
child: ListView(
children: [
UserAccountsDrawerHeader(
accountName: Text("Aleem"),
accountEmail: Text('[email protected]'),
currentAccountPicture: GestureDetector(
child: CircleAvatar(
backgroundColor: Colors.grey,
child: Icon(
Icons.person,
color: Colors.white,
),
),
),
decoration: BoxDecoration(color: Colors.red),
),
DrawerMenuButton(
title: 'Home',
icon: Icon(
Icons.home,
color: Colors.red,
),
),
DrawerMenuButton(
title: 'My Account',
icon: Icon(
Icons.person,
color: Colors.red,
),
),
DrawerMenuButton(
title: 'My Order',
icon: Icon(
Icons.shopping_basket,
color: Colors.red,
),
),
DrawerMenuButton(
title: 'Category',
icon: Icon(
Icons.category,
color: Colors.red,
),
),
DrawerMenuButton(
title: 'Favourites',
icon: Icon(
Icons.favorite,
color: Colors.red,
),
),
Divider(),
DrawerMenuButton(
title: 'Settings',
icon: Icon(
Icons.settings,
color: Colors.blue,
),
),
DrawerMenuButton(
title: 'About Us',
icon: Icon(
Icons.help,
color: Colors.blue,
),
),
],
),
),
body: ListView(
children: [
ImageCarousel(),
Padding(
padding: EdgeInsets.all(10.0),
child: Text('Category'),
),
HorizontalList(),
Padding(
padding: EdgeInsets.all(10.0),
child: Text('Recent Product'),
),
Products(),
],
),
);
}
}
class DrawerMenuButton extends StatelessWidget {
DrawerMenuButton({this.title, this.icon});
final String title;
final Icon icon;
@override
Widget build(BuildContext context) {
return InkWell(
onTap: () {},
child: ListTile(
title: Text(title),
leading: icon,
),
);
}
}
products.dart
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class Products extends StatefulWidget {
@override
_ProductsState createState() => _ProductsState();
}
class _ProductsState extends State<Products> {
List<dynamic> products = [
{
'name': 'Shirt',
'image': 'images/category.jpg',
'old_price': 200,
'price': 140,
},
{
'name': 'Shirt',
'image': 'images/category.jpg',
'old_price': 200,
'price': 140,
}
];
@override
Widget build(BuildContext context) {
return GridView.builder(
itemCount: products.length,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
),
itemBuilder: (context, index) {
return Product(
name: products[index]['name'],
image: products[index]['image'],
oldPrice: products[index]['old_price'],
finalPrice: products[index]['price'],
);
},
);
}
}
class Product extends StatelessWidget {
Product({this.name, this.image, this.oldPrice, this.finalPrice});
final String name, image;
final int oldPrice, finalPrice;
@override
Widget build(BuildContext context) {
return Card(
child: Hero(
tag: name,
child: Material(
child: InkWell(
onTap: () {},
child: GridTile(
footer: Container(
color: Colors.white,
child: ListTile(
leading: Text(
name,
style: TextStyle(
fontWeight: FontWeight.bold,
),
),
),
),
child: Image.asset(
image,
fit: BoxFit.cover,
),
),
),
),
),
);
}
}
Try setting the shrinkWrap
property of the GridView
to true
so it takes only the space needed based on it's items:
I added a demo using your code as an example:
return GridView.builder(
itemCount: products.length,
shrinkWrap: true, // new line
physics: NeverScrollableScrollPhysics(), // new line
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
),
itemBuilder: (context, index) {
return Product(
name: products[index]['name'],
image: products[index]['image'],
oldPrice: products[index]['old_price'],
finalPrice: products[index]['price'],
);
},
);
EDIT: To prevent the GridView
from scrolling separately in your ListView
, set the physics
of the GridView
to NeverScrollablePhysics
.