CODEWITHSUNDEEP
flutterdartflutter-layout
fhabers21
fhabers21

Reputation: 39

Flutter horizontal ListView BoxConstraints forces an infinite width

currently I try to show a horizontal ListView Builder within a Card. But I always get an error saying "BoxConstraints forces an infinite width."

If I build a List View with a vertical List everything works fine. As soon as I change to a horizontal list the list disappears.

I will attach a Screenshoot where I mark the area in which the horizontal List View should be. Screnshoot of the current View

This is my last attempt for the second card: (I removed the code for the first card so the code isn't too long)

Expanded(
child: Container(
height: 250.0,
child: Card(
color: Color(_colors.getBackgroundColor()),
elevation: 10.0,
shadowColor: Colors.black54,
margin: EdgeInsets.all(8.0),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0),
side: BorderSide(
color: Color(_colors.getLightMainColor()))),
     child: Padding(
         padding: const EdgeInsets.all(8.0),
            child: Container(
              width: 250.0,
               child: ListView.builder(
               scrollDirection: Axis.horizontal,
               itemCount: 1,
               itemBuilder: (context, index) {
               return ListTile(
               title: Text('Test'),
                  );
                 }),
               )),
              ),
             ),
   ),

Upvotes: 1

Views: 1952

Answers (1)

littleironical
littleironical

Reputation: 1914

I've updated your code so that it could run properly.

Remember, you can't have horizontal ListTile

And let me know if you want something else

Container(
  height: 250.0,
  width: double.infinity,
  child: Card(
    color: Colors.red,
    elevation: 10.0,
    shadowColor: Colors.black54,
    margin: EdgeInsets.all(8.0),
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(10.0),
      side: BorderSide(
        color: Colors.blue,
      ),
    ),
    child: Padding(
      padding: const EdgeInsets.all(8.0),
      child: Container(
        width: 250.0,
        child: ListView.builder(
          scrollDirection: Axis.horizontal,
          itemCount: 5,
          itemBuilder: (context, index) {
            return Container(
              width: 250.0,
              child: Text('Test')
            );
          }
        ),
      ),
    ),
  ),
),

It may help you

Upvotes: 7

Related Questions