Flutter: Incorrect use of ParentDataWidget

Issue

I'm trying to do a homepage where it will scrollable with 3 or 4 titles and a horizontal lists for products once i put the ListView.builder i get this error: Incorrect use of ParentDataWidget.

Can someone gives me the best solution of what I'm trying to do.

i already tried Expanded and Flexible for the ListView.builder nothing worked.

if i removed the Expanded the error will be: Horizontal viewport was given unbounded height.

My snippet code:

 Widget build(BuildContext context) {
return Scaffold(
  appBar: AppBar(
    leading: IconButton(
      icon: Icon(
        Icons.menu,
        color: Colors.black,
        size: 30,
      ),
    ),
    title: Text("Home"),
    actions: [
      IconButton(
        icon: Icon(
          Icons.search,
          color: Colors.black,
          size: 30,
        ),
        onPressed: () {},
      ),
    ],
  ),
  body: (_isLoading)
      ? ListView(
          children: [
            SizedBox(
              height: 10,
            ),
            TitleSlider(title: 'Category'),
            Expanded(
              child: ListView.builder(
                  scrollDirection: Axis.horizontal,
                  padding: EdgeInsets.all(0),
                  itemCount: thisTwoCategories.length,
                  itemBuilder: (context, int index) {
                    return _buildCategoryThumbnail(
                        thisTwoCategories[index], index);
                  }),
            )
          ],
        )
      
      : Center(
          child: CircularProgressIndicator(),
        ),
);

}

  Widget _buildCategoryThumbnail(Collection category, int index) {
return InkWell(
  onTap: () {
    _navigateToCollectionDetailScreen(
        thisTwoCategories[index].id, thisTwoCategories[index].title);
  },
  child: Container(
    alignment: Alignment.topCenter,
    width: MediaQuery.of(context).size.width / 2.1,
    height: displayHeight(context) * .10,
    decoration: category.image.originalSource != null
        ? BoxDecoration(
            borderRadius: BorderRadius.all(Radius.circular(15)),
            image: DecorationImage(
                fit: BoxFit.cover,
                image: NetworkImage(
                  category.image.originalSource,
                )))
        : BoxDecoration(),
    child: Container(
      width: MediaQuery.of(context).size.width,
      alignment: Alignment.bottomCenter,
      child: Text(
        category.title,
        overflow: TextOverflow.ellipsis,
        style: TextStyle(
            color: Colors.black, fontSize: 20, fontWeight: FontWeight.bold),
      ),
    ),
  ),
);

}

i solved the issue Thanks guys!

SingleChildScrollView(
          child: Container(
              child: Column(
            children: [
              SizedBox(
                height: 10,
              ),
              TitleSlider(title: 'Category'),
              Container(
                height: 200,
                child: ListView.builder(
                    scrollDirection: Axis.horizontal,
                    padding: EdgeInsets.all(0),
                    itemCount: thisTwoCategories.length,
                    itemBuilder: (context, int index) {
                      return _buildCategoryThumbnail(
                          thisTwoCategories[index], index);
                    }),
              ),
              SizedBox(
                height: 10,
              ),
              TitleSlider(title: 'Category'),
              Container(
                height: 200,
                child: ListView.builder(
                    scrollDirection: Axis.horizontal,
                    padding: EdgeInsets.all(0),
                    itemCount: thisTwoCategories.length,
                    itemBuilder: (context, int index) {
                      return _buildCategoryThumbnail(
                          thisTwoCategories[index], index);
                    }),
              ),
              SizedBox(
                height: 10,
              ),
              TitleSlider(title: 'Category'),
              Container(
                height: 200,
                child: ListView.builder(
                    scrollDirection: Axis.horizontal,
                    padding: EdgeInsets.all(0),
                    itemCount: thisTwoCategories.length,
                    itemBuilder: (context, int index) {
                      return _buildCategoryThumbnail(
                          thisTwoCategories[index], index);
                    }),
              ),

Solution

Try below code

return Scaffold(
  appBar: AppBar(
    leading: IconButton(
      icon: Icon(
        Icons.menu,
        color: Colors.black,
        size: 30,
      ),
    ),
    title: Text("Home"),
    actions: [
      IconButton(
        icon: Icon(
          Icons.search,
          color: Colors.black,
          size: 30,
        ),
        onPressed: () {},
      ),
    ],
  ),
  body: (_isLoading)
      ? Container(child:Column(
          children: [
            SizedBox(
              height: 10,
            ),
            TitleSlider(title: 'Category'),
            Expanded(
              child: ListView.builder(
                  scrollDirection: Axis.horizontal,
                  padding: EdgeInsets.all(0),
                  itemCount: thisTwoCategories.length,
                  itemBuilder: (context, int index) {
                    return _buildCategoryThumbnail(
                        thisTwoCategories[index], index);
                  }),
            )
          ],
        ))
      
      : Center(
          child: CircularProgressIndicator(),
        ),
);

Answered By - Sam