Flutter : How to set container size to wrap_content in Wrap widget

Question

I want to set Container size to wrap_content instead of it taking the whole screen width. I can get the wrap_content size by changing Wrap widget with Row, but it will overflow if the children widget is bigger than the screen.

Below is the code I use with Wrap widget

@override
  Widget build(BuildContext context) {
    return Wrap(
      children: <Widget>[
        Container(
          height: 100.0,
          color: Colors.lightGreenAccent,
          child: const Center(
            child: Text('Container 1'),
          ),
        ),
        Container(
          height: 100.0,
          color: Colors.cyan,
          child: Center(
            child: Text('Container 2'),
          ),
        ),
      ],
    );
  }

I get this result with Wrap widget

When I change it to Row instead of Wrap, I get this result

How can I achieve this using Wrap widget? Or is there any other widget similar to Wrap where the overflowed widget will automatically build into a new line?

Answer 1

Wrap the containers with an UnconstrainedBox widget, this way the container will be free to size itself to its children’s size.