Flutter: Incorrect use of ParentDataWidget

Question

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

score 2 · Answer 1 · answered Apr 07 '21 at 13:50

2

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

answered Apr 07 '21 at 13:50

theundercoverartist

161
1
8

I think ListView can be a child of Expanded and doesn't have to necessarily be one. I'm not sure right now though. Try both ways. but I think making it a child of expanded is the safe way. – theundercoverartist Apr 07 '21 at 13:52

score 1 · Accepted Answer · answered Apr 07 '21 at 13:49

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

if i added SingleChildScrollView top of the container i will get this error: RenderFlex children have non-zero flex but incoming height constraints are unbounded. — Dahleh, Apr 07 '21 at 15:27
can you wrap listview with a container and provide a height to it and check? — Sam, Apr 07 '21 at 17:41

score 0 · Answer 3 · answered Apr 07 '21 at 13:39

0

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

answered Apr 07 '21 at 13:39

Eray

724
1
9
21

score 0 · Answer 4 · answered Apr 29 '22 at 15:03

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

score -1 · Answer 5 · answered Mar 30 '22 at 06:01

-1

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

answered Mar 30 '22 at 06:01

Rishita Joshi

203
2
3

This does not provide an answer to the question. Once you have sufficient [reputation](https://stackoverflow.com/help/whats-reputation) you will be able to [comment on any post](https://stackoverflow.com/help/privileges/comment); instead, [provide answers that don't require clarification from the asker](https://meta.stackexchange.com/questions/214173/why-do-i-need-50-reputation-to-comment-what-can-i-do-instead). - [From Review](/review/late-answers/31408808) – Muhammad Mohsin Khan Apr 05 '22 at 09:42

Flutter: Incorrect use of ParentDataWidget

5 Answers5

Linked