Container same width as parent

Question

How to create container width same width as parent?

return Container(
  height:
      100, //when ListView has no constrained height; it gets an infinite height https://stackoverflow.com/questions/67778027/error-renderbox-was-not-laid-out-failed-assertion-line-1940-pos-12-hassize
  child: ListView.builder(
      //https://api.flutter.dev/flutter/widgets/ListView-class.html
      padding: const EdgeInsets.all(8),
      //shrinkWrap: true,
      itemCount: entries.length,
      itemBuilder: (BuildContext context, int index) {
         return(Container(
            height: 50,
            color: Colors.amber[colorCodes[index % 2]],
            child: Row(children: [
              //Center(child: Text(entries[index])),
                Positioned(
                    bottom: 0,
                    left: 0,
                    right: 0,
                  child: Container( //<-- make this container same width as parent
                      width: double.infinity, //doesn't work
                      child: Column(children: [
                        Text("hello"),
                        Expanded(child:
                        
                        Align(alignment: Alignment.bottomLeft,
                          child:
                          LinearProgressIndicator(
                            minHeight: 5,
                              backgroundColor: Colors.redAccent,
                              value: 0.50)))
                        
                      ],
    ))),
             ])
            //child: Center(child: LinearProgressIndicator(backgroundColor: Colors.greenAccent,value: 20))
            ));
      }),
);

Terminal: Another exception was thrown: BoxConstraints forces an infinite width.

Question: how to make width row(or at least it's children) same as screenwidth? Same with columnheight?

score 1 · Accepted Answer · answered Jul 29 '23 at 16:15

The problem is the Positioned that only works with the Stack parent. You need to make Container a direct child of Row which in the end will fill the width of its parent.

If the requirement is to use Positioned, then the solution is simply to put it inside Stack widget as previously stated.

If the requirement is, also, to make the child Container to be at the bottom of the Row, set MainAxisAlignment.spaceBetween to mainAxisAlignment in Row to force the child Container to the bottom.

I would suggest something like this:

return Container(
  height: 100,
  child: ListView.builder(
    padding: const EdgeInsets.all(8),
    itemCount: entries.length,
    itemBuilder: (BuildContext context, int index) {
      return Container(
        height: 50,
        color: Colors.amber[colorCodes[index%2]],
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Text(entries[index]),
            Container(
              child: Column(
                children:[
                  Text("hello"),
                  Expanded(
                    child: Align(
                      alignment: Alignment.bottomLeft,
                      child: LinearProgressIndicator(
                        minHeight: 5,
                        backgroundColor: Colors.redAccent,
                        value: 0.50,
                      ),),),],),
            ),],),);
    },),
);

score 0 · Answer 2 · answered Jul 29 '23 at 16:06

There are a couple issues here:

Positioned can only be a child of the Stack widget. You'll need to remove that widget.
You can't have a Row with a child of infinite width (this is what is causing your "BoxConstraints forces an infinite width" error. A Row already has an unconstrained width and will fill (or even overflow) its parent if it needs to. To make the child of a Row use up the entire available screen width, wrap the child in an Expanded widget.
I'm not exactly sure how you want the Column to take up the full screen height. It is currently wrapped in a Container with the height set to 50. If you mean the ListView, removing the outermost Container's height should do the trick. I don't see any children (at least those that aren't commented out) that should cause your ListView to overflow.

The video and explanations on this page may be helpful.

Container same width as parent

2 Answers2