'Flutter: Incorrect use of ParentDataWidget

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 1:^[1]

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

Solution 2:^[2]

ListView must be a child of Expanded and Expanded has to be a child of Column.

Solution 3:^[3]

You cannot use Expanded as ListView's child. If you use something like below code, it'll be work. You need to give height or/and width when you use ListView.

Container(
width: something,
child: aWidget,
)

Solution 4:^[4]

ListView should not be used inside Expanded or Flexible. Only row, column or flex is allowed.

A Container of fixed width/height or ConstrainedBox can be used

Ex:

ConstrainedBox(
  constraints: BoxConstraints(minHeight: 50, maxHeight: 500),
  child: ListView.builder(...),
)

Solution 5:^[5]

To solve this problem you have to remove Expanded widget or Flex widget.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Sam
Solution 2	theundercoverartist
Solution 3	Eray
Solution 4	Sanjay Chakrapani
Solution 5	Rishita Joshi

'Flutter: Incorrect use of ParentDataWidget

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]