RenderFlex children have non-zero flex but incoming width constraints are unbounded

I'm trying to show cart items horizontally using listview builder but it is throwing up following error

RenderFlex children have non-zero flex but incoming width constraints are unbounded (When a row is in a parent that does not provide a finite width constraint, for example if it is in a horizontal scrollable, it will try to shrink-wrap its children along the horizontal axis. Setting a flex on a child (e.g. using Expanded) indicates that the child is to expand to fill the remaining space in the horizontal direction.)

I already wrapped the list view builder with defined height but still throwing up the error

Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text('MY CART', style: GoogleFonts.oswald(color: Colors.black, fontSize: 18.0, fontWeight: FontWeight.w400)),
            const SizedBox(height: 20.0),
            SizedBox(
              height: 180.0,
              width: double.infinity,
              child: ListView.builder(
                itemCount: 2,
                scrollDirection: Axis.horizontal,
                itemBuilder: (context, index){
                  return Row(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Container(
                        height: 150.0,
                        width: 150.0,
                        decoration: const BoxDecoration(
                            image: DecorationImage(
                                image: AssetImage('assets/images/dress.jpg')
                            ),
                            borderRadius: BorderRadius.all(Radius.circular(15.0))
                        ),
                      ),
                      const SizedBox(width: 10.0),
                      Expanded(
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Text('PRODUCT TITLE',
                              style: GoogleFonts.oswald(
                                  textStyle: const TextStyle(
                                      color: Colors.black,
                                      fontSize: 14.0)), overflow: TextOverflow.visible,),
                            const SizedBox(height: 5.0),
                            Text('SIZE: M',
                                style: GoogleFonts.oswald(
                                    textStyle: const TextStyle(
                                        color: Colors.black45,
                                        fontSize: 16.0))),
                            const SizedBox(height: 10.0),
                            Text('10 DOLLARS',
                                style: GoogleFonts.oswald(
                                    textStyle: const TextStyle(
                                        color: Colors.black,
                                        fontSize: 16.0))),
                          ],
                        ),
                      )
                    ],
                  );
                },
              ),
            ),
],
)

CodePudding user response：

This was happened because you use expanded in row inside horizontal listview, you have two option :

One: remove the expanded widget inside Row inside itemBuilder.

Two: set width for item inside itemBuilder:

itemBuilder: (context, index){
   return SizedBox(
      width: 400.0, // <--- add this
      child: return Row(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
             Container(
                height: 150.0,
          ...        
   );
}