Home > Blockchain >  Container does not get max width inside a Wrap widget?
Container does not get max width inside a Wrap widget?

Time:08-13

I have a Container widget inside a Wrap widget, and I want the Container to have the maximum width inside the Wrap, but when I use width: double.infinity for the width of the Container, it throws an error. How can I achieve my target? The code is below:

Container(
          width: 150,
          color: Colors.grey.shade300,
          child: Wrap(
            direction: Axis.vertical,
            children: [
              Text("Hi there!"),
              Text("This is a very long long string to show!"),
              Container(
                color: Colors.teal,
                height: 5,
                width: double.infinity,
              ),
              Text("The end."),
            ],
          ),
        ),

CodePudding user response:

Use a row to get full width

Container(
          width: 150,
          color: Colors.grey.shade300,
          child: Wrap(
            direction: Axis.vertical,
            children: [
              Text("Hi there!"),
              Text("This is a very long long string to show!"),
             Row(
               children: [
              Container(
                color: Colors.teal,
                height: 5,
              ),
             ]),
              Text("The end."),
            ],
          ),
        ),

CodePudding user response:

You've define the top level width, To have the same width, you can just put it inside the container instead of adding widgets. like

Container(
          width: 150, //from here
          color: Colors.grey.shade300,
          child: Wrap(
            direction: Axis.vertical,
            children: [
              Text("Hi there!"),
              Text("This is a very long long string to show!"),
              Container(
                color: Colors.teal,
                height: 5,
                width: 150, //to here
              ),
              Text("The end."),
            ],
          ),
        ),
  • Related