GirdView not showing. flutter

Question

I want to give gridview all remaining height of screen, so i tried to wrap the gridview inside a expanded widget and a flexible widget but grid view is not showing.

What i have done

 return Container(
  width: double.infinity,
  margin: EdgeInsets.symmetric(horizontal: 22.0, vertical: 50.0),
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      Text(
        'Most Popular Search',
        style: TextStyle(
          fontSize: 32.0,
          fontWeight: FontWeight.w700,
          color: Colors.black87,
        ),
      ),
      SizedBox(height: 30.0),
      _buildPopularItems(),
      SizedBox(height: 50.0),
      Text(
        'Find an online mentor',
        style: TextStyle(
          fontSize: 32.0,
          fontWeight: FontWeight.w700,
          color: Colors.black87,
        ),
      ),
      SizedBox(height: 30.0),
      Flexible(
        child: GridView.count(
          childAspectRatio: (itemWidth / itemHeight),
          crossAxisCount: 4,
          controller: new ScrollController(keepScrollOffset: false),
          shrinkWrap: true,
          scrollDirection: Axis.vertical,
          children: [
            ConsultantCard(),
            ConsultantCard(),
            ConsultantCard(),
            ConsultantCard(),
            ConsultantCard(),
            ConsultantCard(),
            ConsultantCard(),
          ],
        ),
      ),
    ],
  ),
);

_buildPopularItems() code below

  _buildPopularItems() {
List<Widget> itemsList = [];
popularSearchList.forEach((PopularSearch popularSearch) {
  itemsList.add(PopularSkillsCard(
      imageUrl: popularSearch.imageUrl, title: popularSearch.title));
});
return SingleChildScrollView(
  child: Row(children: itemsList),
  scrollDirection: Axis.horizontal,
);

}

It is showing me this error.

════════ Exception caught by rendering library ═════════════════════════════════
The following assertion was thrown during performLayout():
RenderFlex children have non-zero flex but incoming height constraints are unbounded.

Answer 1

Set the flex value when you use Expanded widget. Here's your code. change the flex value to get the UI you want.

return Container(
  width: double.infinity,
  margin: EdgeInsets.symmetric(horizontal: 22.0, vertical: 50.0),
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      Expanded(
        flex: 1,
              child: Text(
          'Most Popular Search',
          style: TextStyle(
            fontSize: 32.0,
            fontWeight: FontWeight.w700,
            color: Colors.black87,
          ),
        ),
      ),
      Expanded(
        flex: 1,
              child: Text(
          'Find an online mentor',
          style: TextStyle(
            fontSize: 32.0,
            fontWeight: FontWeight.w700,
            color: Colors.black87,
          ),
        ),
      ),

      Expanded(
        flex: 6,
        child: GridView.count(
          childAspectRatio: (itemWidth / itemHeight),
          crossAxisCount: 4,
          controller: new ScrollController(keepScrollOffset: false),
          shrinkWrap: true,
          scrollDirection: Axis.vertical,
          children: [
            ConsultantCard(),
            ConsultantCard(),
            ConsultantCard(),
            ConsultantCard(),
            ConsultantCard(),
            ConsultantCard(),
            ConsultantCard(),
          ],
        ),
      ),
    ],
  ),
);