Limit wrapped Text to actual text

Question

I have a Row that consists of three equal parts. The code is below and the output (screenshot) is attached

Row(
    children:[
      Spacer(),
      Expanded(child: Container(color:Colors.orange, child: Text("The quick brown fox jumps over the lazy dog", style: TextStyle(fontSize: 24),))),
      Spacer()
    ]
  ),

I would like to Center the text horizontally in the orange box (while keeping the two lines left aligned to eachother). So I would like to move half of the space after "dog", to the left, in front of "The" and "jumps", if that makes sense.

How can I do this? I've played with IntrinsicWidth, Center, Row, textAlign but nothing seems to work

Answer 1

The trick is to use textWidthBasis: TextWidthBasis.longestLine

The following code results in what I want (see screenshot)

Row(
    children:[
      Spacer(),
      Expanded(child: Container(
        color:Colors.orange,
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Text(
                "The quick brown fox jumps over the lazy dog",
                textWidthBasis: TextWidthBasis.longestLine,
                style: TextStyle(fontSize: 24),),
          ],
        ),
      )),
      Spacer()
    ]

  ),