using flutter ListView builder throwing error

Question

So i'm trying to create layouts but i'm facing error here is my script

  Column(
      children: <Widget>[
        Container(
          decoration: new BoxDecoration(boxShadow: [
            new BoxShadow(
              color: Colors.black,
              blurRadius: 10.0,
            ),
          ]),
          child:
          Card(
              child: CarouselSlider(
                autoPlay: true,
                height: 120.0,
                items: [1, 2, 3, 4, 5].map((i) {
                  return Builder(
                    builder: (BuildContext context) {
                      return Container(
                          width: MediaQuery.of(context).size.width,
                          margin: EdgeInsets.all(1),
                          decoration: BoxDecoration(color: Colors.brown),
                          child: Text(
                            'text $i',
                            style: TextStyle(fontSize: 16.0),
                          ));
                    },
                  );
                }).toList(),
              )),
        ),
        Row(
          children: <Widget>[
            Container(
              width: MediaQuery.of(context).size.width * 0.70,
              child: Card(
                color: null,
                child: Padding(
                    padding: const EdgeInsets.all(10.0),
                    child: Text(
                      "Your Points : ",
                      style: TextStyle(fontSize: 15),
                    )),
              ),
            ),
          ],
        ),
        Expanded(child: populateHotProduct(),),
        Expanded(child: populateHotProduct(),),
      ],

  );

when i run it i get this error

I/chatty ( 5867): uid=10080(com.tukangaplikasi.member_lf) Thread-2 identical 187 lines I/flutter ( 5867): Another exception was thrown: RenderBox was not laid out: RenderRepaintBoundary#46776 relayoutBoundary=up3 NEEDS-PAINT I/flutter ( 5867): ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════ I/flutter ( 5867): The following assertion was thrown during performLayout(): I/flutter ( 5867): BoxConstraints forces an infinite width. I/flutter ( 5867): These invalid constraints were provided to RenderPositionedBox's layout() function by the following I/flutter ( 5867): function, which probably computed the invalid constraints in question: I/flutter ( 5867): _RenderListTile._layoutBox (package:flutter/src/material/list_tile.dart:1300:9) I/flutter ( 5867): The offending constraints were: I/flutter ( 5867):
BoxConstraints(w=Infinity, 0.0<=h<=Infinity)

I already try to change my Expanded to Flexible but still no help.

So, inside of populateHotProduct is ListView.Builder

return  ListView.builder(
        itemCount: hotlist.length,
        shrinkWrap: true,
        scrollDirection: Axis.horizontal,
        itemBuilder: (BuildContext context, int index) {
          return GestureDetector(
              onTap: () {
                print("Product detail");
              },
              child: Card(
                child: Container(
                  child: Column(
                    mainAxisSize: MainAxisSize.min,
                    children: <Widget>[
                      Image.network(
                          Configuration.url +
                              "assets/app_assets/" +
                              hotlist[index].productImage,
                          width: 100,
                          height: 100,
                          filterQuality: FilterQuality.low),
                      ListTile(
                        title: Center(
                            child: Text(
                          hotlist[index].productName,
                          style: TextStyle(fontSize: 23),
                        )),
                        subtitle: Center(
                            child: Text(
                          formatCurrency
                              .format(int.parse(hotlist[index].productPrice)),
                          style: TextStyle(color: Colors.red, fontSize: 15),
                        )),
                      ),
                    ],
                  ),
                ),
              ));
        });

Btw i calling populateHotProduct() twice on purpose. How can i fix it thanks in advance.

Answer 1

This problem is solved when you give the card's sub-Container a width. My guess is that the list View slides horizontally, and when you don't set the width for the Container, the Container adapts to Max.

Column(
        children: <Widget>[
            Container(
                decoration: new BoxDecoration(boxShadow: [
                    new BoxShadow(
                        color: Colors.black,
                        blurRadius: 10.0,
                    ),
                ]),
                child:
                Card(
                    child: Text('kakaka')),
            ),
            Row(
                children: <Widget>[
                    Container(
                        width: MediaQuery.of(context).size.width * 0.70,
                        child: Card(
                            color: null,
                            child: Padding(
                                padding: const EdgeInsets.all(10.0),
                                child: Text(
                                    "Your Points : ",
                                    style: TextStyle(fontSize: 15),
                                )),
                        ),
                    ),
                ],
            ),
            Expanded(
                child: ListView.builder(
                    itemCount: 3,
                    shrinkWrap: true,
                    scrollDirection: Axis.horizontal,
                    itemBuilder: (BuildContext context, int index) {
                        return GestureDetector(
                            onTap: () {
                                print("Product detail");
                            },
                            child: Card(
                                child: Container(
                                    width: 300,
                                    child: Column(
                                        mainAxisSize: MainAxisSize.min,
                                        children: <Widget>[
                                            Image.network(
                                                'http://img1.juimg.com/151014/330555-151014213H140.jpg',
                                                width: 100,
                                                height: 100,
                                                filterQuality: FilterQuality.low),
                                            ListTile(
                                                title: Center(
                                                    child: Text(
                                                        '11111',
                                                        style: TextStyle(fontSize: 23),
                                                    )),
                                                subtitle: Center(
                                                    child: Text(
                                                        'jjjj',
                                                        style: TextStyle(color: Colors.red, fontSize: 15),
                                                    )),
                                            ),
                                        ],
                                    ),
                                ),
                            ));
                    }),),

            Expanded(
                child: ListView.builder(
                    itemCount: 3,
                    shrinkWrap: true,
                    scrollDirection: Axis.horizontal,
                    itemBuilder: (BuildContext context, int index) {
                        return GestureDetector(
                            onTap: () {
                                print("Product detail");
                            },
                            child: Card(
                                child: Container(
                                    width: 300,
                                    child: Column(
                                        mainAxisSize: MainAxisSize.min,
                                        children: <Widget>[
                                            Image.network(
                                                'http://img1.juimg.com/151014/330555-151014213H140.jpg',
                                                width: 100,
                                                height: 100,
                                                filterQuality: FilterQuality.low),
                                            ListTile(
                                                title: Center(
                                                    child: Text(
                                                        '11111',
                                                        style: TextStyle(fontSize: 23),
                                                    )),
                                                subtitle: Center(
                                                    child: Text(
                                                        'jjjj',
                                                        style: TextStyle(color: Colors.red, fontSize: 15),
                                                    )),
                                            ),
                                        ],
                                    ),
                                ),
                            ));
                    }),),
        ],

    )