flutter Listview -> Container 'width' not working?

Viewed 530

flutter flutter Listview -> Container 'width' not working ?

/example/ ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

scaffold 
body : ListView
children : [
    Container (
        width: 100, // Not Working 
        height: 100, // Ok
        color: Colors.red.
    ),
]

!!! but !!!

scaffold 
body : ListView
children : [
    Stack(
      children : [
        Container (
          width: 100, // OK
          height: 100, // Ok
          color: Colors.red.
        ),
    ]

why ??

enter image description here

4 Answers

Try below code, Wrap your Container inside UnconstrainedBox()

Refer UnconstrainedBox

Refer Layout Constraints

ListView(
      shrinkWrap: true,
      children: [
        UnconstrainedBox(
          child: Container(
            width: 100, // OK
            height: 100, // OK
            color: Colors.red,
          ),
        )
      ],
    ),

Your result-> Image

When you are using stack Widget than it means that you are overlapping your Parent widget , so in your case you are not able to get the appropriate width due to your parents widget but when you use stack Container get enough space since it is overlapping .

Below Code Also will work. we can also use Align Widget.

ListView(
    shrinkWrap: true,
    children: [
      Align(
        alignment: Alignment.topLeft,
        child: Container(
          width: 100,
          height: 100,
          color: Colors.red,
        ),
      )
    ],
  )

Also check how constrain works in flutter.https://docs.flutter.dev/development/ui/layout/constraints

Use Row Widget. Works for me :)

ListView(
          children: <Widget>[
            Row(
              children: [
                Container(
                  height: 50,
                  width: 100,
                  color: Colors.amber[600],
                  child: const Center(child: Text('Entry A')),
                )
              ],
            )
          ],
        )

enter image description here

Related