Я пытаюсь динамически построить представление списка.Мне требуется отображать только 3 элемента списка в каждой строке.Но я получаю следующее сообщение об ошибке:
"RenderFlex переполнен на 807 пикселей внизу. Переполняющий RenderFlex имеет ориентацию Axis.vertical. Край переполняемого RenderFlex отмечен нарендеринг с желто-черным полосатым узором. Обычно это вызвано тем, что содержимое слишком велико для RenderFlex. "
Также попытался реализовать Expanded, Flex, но не смог.
Воткод, который я пытался
class ItemsList extends StatefulWidget{
@override
State createState() => _ItemsListState();
}
class _ItemsListState extends State<ItemsList> {
String totalprice, itemCount, quantity;
var itemcount = 0;
// final List<Map<String, dynamic>> items;
final List items = [
{
'title' : 'Appam',
'imageUrl' : 'images/Appam.png',
'itemprice' : 50,
'itemcount' : 0,
},
{
'title' : 'Bonda',
'imageUrl' : 'images/Bonda.png',
'itemprice' : 25,
'itemcount' : 0,
},
{
'title' : 'Dosa',
'imageUrl' : 'images/Dosa.png',
'itemprice' : 40,
'itemcount' : 0,
},
{
'title' : 'Idly',
'imageUrl' : 'images/Idly.png',
'itemprice' : 30,
'itemcount' : 0,
},
{
'title' : 'Onion Dosa',
'imageUrl' : 'images/Onion_Dosa.png',
'itemprice' : 50,
'itemcount' : 0,
},
{
'title' : 'Parotta',
'imageUrl' : 'images/Parotta.png',
'itemprice' : 50,
'itemcount' : 0,
},
{
'title' : 'Puri',
'imageUrl' : 'images/Puri.png',
'itemprice' : 40,
'itemcount' : 0,
},
{
'title' : 'Upma',
'imageUrl' : 'images/Upma.png',
'itemprice' : 30,
'itemcount' : 0,
},
{
'title' : 'Uttapam',
'imageUrl' : 'images/uttapam.png',
'itemprice' : 40,
'itemcount' : 0,
},
{
'title' : 'Vada',
'imageUrl' : 'images/vada.png',
'itemprice' : 30,
'itemcount' : 0,
},
];
Widget _buildItemsList() {
Widget itemCards;
List items = this.items;
if (items.length > 0) {
itemCards = GridView.count(
shrinkWrap: true,
scrollDirection: Axis.vertical,
crossAxisCount: 3,
children: List.generate(items.length, (index){
return GestureDetector(
child: Card(
margin: const EdgeInsets.all(5.0),
child: Container(
// width: 100.0,
// height: 110.0,
padding: const EdgeInsets.all(5.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Image(
image: AssetImage(items[index]['imageUrl']),
height: 80.0,
width: 80.0,
),
Text(items[index]['title'])
],
),
),
),
onTap: _updateCart,
);
}),
);
}
else {
itemCards = Container(
child: Text('No items'),
);
}
return itemCards;
}
Widget _buildOrderListBar(){
return Container(
color: Color.fromRGBO(37, 134, 16, 1.0),
padding: const EdgeInsets.symmetric(horizontal: 15.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text(itemcount>0?itemcount.toString(): '',
style: TextStyle(color: Colors.white),),
FlatButton(
child: Text('Checkout',
style: TextStyle(
color: Colors.white,
fontSize: 20.0),
),
onPressed: (){
var route = MaterialPageRoute(
builder: (BuildContext context) => OrderDetails()
);
Navigator.push(context, route);
},
),
Text('Rs. $totalprice', style: TextStyle(color: Colors.white),),
],
),
);
}
Widget _buildSearchItem() {
return Container(
padding: const EdgeInsets.symmetric(horizontal: 5.0),
margin: const EdgeInsets.all(10.0),
child: TextFormField(
decoration: InputDecoration(
hintText: 'Search for Item',
icon: Icon(Icons.search)
),
),
);
}
@override
void initState(){
super.initState();
}
_updateCart(){
setState(() {
itemcount = ++itemcount;
totalprice = (30 * itemcount).toString();
print(totalprice);
print(itemcount);
});
}
@override
Widget build(BuildContext context){
return Scaffold(
drawer: DrawerItems(),
appBar: AppBar(
title: Text('Ordering'),
),
body: Container(
child: Column(
children: <Widget>[
_buildOrderListBar(),
_buildSearchItem(),
Container(
padding: const EdgeInsets.symmetric(horizontal: 5.0),
child: _buildItemsList(),
),
],
),
),
bottomNavigationBar: BottomNavigatorItems(),
floatingActionButton: FloatingActionButton(
child: Icon(Icons.add_shopping_cart),
onPressed: (){},
),
);
}
}
введите описание изображения здесь