title: How to build a dynamic list view with 3 items in row in flutter
body: <p>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:</p>
  
  <p>"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."</p>
  
  <p>Also tried by implementing Expanded, Flex but could not.</p>
  
  <p>Here is the code I was trying</p>
  
  <pre><code>    class ItemsList extends StatefulWidget{
        @override
        State createState() =&gt; _ItemsListState();
       }
  
  class _ItemsListState extends State&lt;ItemsList&gt; {
  
    String totalprice, itemCount, quantity;
    var itemcount = 0;
  
    // final List&lt;Map&lt;String, dynamic&gt;&gt; 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 &gt; 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: &lt;Widget&gt;[
                        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: &lt;Widget&gt;[
            Text(itemcount&gt;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) =&gt; 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: &lt;Widget&gt;[
              _buildOrderListBar(),
              _buildSearchItem(),
              Container(
                padding: const EdgeInsets.symmetric(horizontal: 5.0),
                child: _buildItemsList(),
              ),
            ],
          ),
        ),
        bottomNavigationBar: BottomNavigatorItems(),
        floatingActionButton: FloatingActionButton(
          child: Icon(Icons.add_shopping_cart),
          onPressed: (){},
        ),
      );
    }
  }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/0dU3V.png" rel="nofollow noreferrer">enter image description here</a></p>