flutter - How to build a dynamic list view with 3 items in row in flutter

Question

I'm trying to dynamically build a list view. I require to display only 3 list items in each row . But I'm getting the below error:

"A RenderFlex overflowed by 807 pixels on the bottom. The overflowing RenderFlex has an orientation of Axis.vertical. The edge of the RenderFlex that is overflowing has been marked in the rendering with a yellow and black striped pattern. This is usually caused by the contents being too big for the RenderFlex."

Also tried by implementing Expanded, Flex but could not.

Here is the code I was trying

    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: (){},
      ),
    );
  }
}

enter image description here

标签： flutter

Answer 1

Update the Scaffold Body:

body: Column(
        children: <Widget>[
          _buildOrderListBar(),
          _buildSearchItem(),
          Expanded(child: _buildItemsList()),
        ],
      ),