Flutter, How to align text below the another container in when overflow-CodePudding

I want to show second text at below of container if Overflow, I am using row to display

        Row(children: [
            Text("test test"),
            Container(height: 50, width: 50, color: Colors.red),
            Text("test test test test test test test")
          ])

Problem : https://i.stack.imgur.com/fpVf1.png

Expected : img

CodePudding user response：

You should wrap your Container in a Flexible to let your Row know that it's ok for the Container to be narrower than its intrinsic width. Expanded will also work.

Flexible(
  child: Container(
.....

CodePudding user response：

Try this

 Row(crossAxisAlignment: CrossAxisAlignment.center, children: [                                       
  Text("test test"),                                                                                 
  Stack(                                                                                             
    children: [                                                                                      
      Container(height: 50, child: Center(child: Text("test1 test1 test1 test1 test1 test1 test1"))),
      Container(height: 50, width: 50, color: Colors.red),                                           
    ],                                                                                               
  ),

It looks like this

CodePudding user response：

I believe you can use a TextSpan for what you want, like

Text.rich(TextSpan(children: [
      const TextSpan(text: "test test"),
      WidgetSpan(child: Container(height: 50, width: 50, color: Colors.red)),
      const TextSpan(text: "test test test test test test test")
    ]))