如何使小部件的宽度与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

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
    ),
);

Answer 2

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 "),
                              )
                            ],
                          ),
                        ),


                      ],
                    )
                ),
              ),
            ),