How can I prevent a multiline text widget from being trimmed when placed inside a string?

Question

I have a text widget in my Flutter application that contains a long text string. It fits inside a fixed width container. By default, a text string is wrapped in multiple lines.

However, when I try to insert this Text widget into the Row widget, the text line suddenly switches to one line and gets an anchor on the right side.

What is an easy way to preserve the original multi-line behavior of a text widget when it is inside a string?

Here is the code I used:

var container = new Container (
  child: new Row (
    children: [
      new Icon (Icons.navigate_before),
      new Text ("Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."),
      new Icon (Icons.navigate_next),
    ],
  ),
  decoration: new BoxDecoration (
    backgroundColor: Colors.grey[300],
  ),
  width: 400.0,
);

Answer 1

, , .

(/) / , . (, )

- , - . Row .

Expanded, , .

A Expandeds / .

, , Expanded :

var row = new Container(
  width: 400.0,
  height: 100.0,
  child: new Row(
    children: [
      // Red Bar
      // This will take up 50dp always, since it is not wrapped by a Expanded
      new Container(
        width: 50.0,
        decoration: new BoxDecoration(
          backgroundColor: Colors.red[500],
        )
      ),
      // Green Bar
      // This will take up 1/3 of the remaining space (1/3 of 350dp)
      new Expanded(
        flex: 1,
        child: new Container(
          decoration: new BoxDecoration(
            backgroundColor: Colors.green[500],
          )
        ),
      ),
      // Blue Bar
      // This will take up 2/3 of the remaining space (2/3 of 350dp)
      new Expanded(
        flex: 2,
        child: new Container(
          decoration: new BoxDecoration(
            backgroundColor: Colors.blue[500],
          )
        ),
      )
    ]
  ),
);

:

:

• 50dp , . 50dp, .

• 350dp (400-350), .

• flex Expanded, : 1 [] + 2 [] = 3

• Expanded flex Expanded flex Expandeds: Green = 1/3, Blue = 2/3.

• , 1/3 * 350 = 116.67dp

• 2/3 * 350 = 233.33dp

: , , - . Expandeds flex, 1. (1/1 = 100%), .

:

var container = new Container (
  child: new Row (
    children: [
      new Icon (Icons.navigate_before),
      new Expanded(
        child: new Text ("Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."),
      ),      
      new Icon (Icons.navigate_next),
    ],
  ),
  decoration: new BoxDecoration (
    backgroundColor: Colors.grey[300],
  ),
  width: 400.0,
);