How to make a widget take as much width as the screen in Flutter?

Question

In my flutter project, I haved used a Row where I aligned two text horizontally, the first Text size is fixed but the I want the second one to have as much width as the screen size.

Here's is my code-

            Container(
              child: Padding(
                padding: const EdgeInsets.all(10.0),
                child: (
                  Row(
                    children: <Widget>[
                      Container(
                        width: 150,
                        color: Colors.blue,
                        child: Text("City: "),
                      ),
                      Container(

                        color: Colors.red,
                        child: Text("London"),
                      )
                    ],
                  )
                ),
              ),
            ),



            Container(
              child: Padding(
                padding: const EdgeInsets.all(10.0),
                child: (
                    Row(
                      children: <Widget>[
                        Container(
                          width: 150,
                          color: Colors.blue,
                          child: Text("Country: "),
                        ),
                        Container(

                          color: Colors.red,
                          child: Text("England "),
                        )
                      ],
                    )
                ),
              ),
            ),



            Container(
              child: Padding(
                padding: const EdgeInsets.all(10.0),
                child: (
                    Row(
                      mainAxisAlignment: MainAxisAlignment.start,
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: <Widget>[
                        Container(
                          width: 150,
                          color: Colors.blue,
                          child: Text("Address: "),
                        ),
                        Container(
                          color: Colors.red,
                          child: Text("aaaaa zzzzz wwwww qqqqqq rrrrr"),
                        )
                      ],
                    )
                ),
              ),
            ),

With the above code I got the following output-

The problem is the black marked section in the image.

So, I need help to know how the text will take as much width as the screen size & rest of the text will be shown in the next line.

Answer 1

This problem can be solved by a widget called Flexible. I had to write few more lines for solving these but it works perfectly for the problem mentioned in the question.

So, here's the code-

Container(
  child: Padding(
    padding: const EdgeInsets.all(10.0),
    child: (
      Row(
        children: <Widget>[
          Container(
            width: 150,
            color: Colors.blue,
            child: Text("City: "),
          ),
          Container(
            color: Colors.red,
            child: Text("London"),
          )
        ],
      )
    ),
  ),
),

Container(
  child: Padding(
    padding: const EdgeInsets.all(10.0),
    child: (
      Row(
        children: <Widget>[
          Container(
            width: 150,
              color: Colors.blue,
              child: Text("Country: "),
          ),
          Container(
            color: Colors.red,
            child: Text("England "),
          )
        ],
      )
    ),
  ),
),

Container(
  child: Padding(
    padding: const EdgeInsets.all(10.0),
    child: (
      Row(

        mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Container(
            width: 150,
            color: Colors.blue,
            child: Text("Address: "),
          ),
          new Flexible(
            child: new Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Container(

                  color: Colors.red,
                  child: Text("aaaaa zzzzz qqqqqq eeeeeeeeeeeeee "),
                )
              ],
            ),
          ),

        ],
      )
    ),
  ),
),

Answer 2

The text widget has a property called overflow you can use that to either clip the extra string or put ellipsis. You could try different types of TextOverflow like a clip, ellipsis, fade, etc. As for the putting it to the next line you could set maxLines property to any number you like.

example:

Container(
    width: MediaQuery.of(context).size.width / 2
    child: Text(
      "Hello world!!!!",
      maxLines: 2,
      overflow: TextOverflow.ellipsis
    ),
);