Ad

GirdView Not Showing. Flutter

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.
Ad

Answer

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(),
          ],
        ),
      ),
    ],
  ),
);
Ad
source: stackoverflow.com
Ad