Flutter 如何在 Wrap 小部件中制作 Text 小部件，从前一个小部件的末尾开始，而不是从前一个小部件开始？

Question

I'm trying to make a complete the sentence user interface that may overflow to the next line like this example:

Here is my code:

 Wrap(
   spacing: 0.8,
   runSpacing: 4.0,
   children: <Widget>[
     new Text('Alpha '),
     new Container(
       width: 50,
       height: 19,
       child: new TextField(
          style: new TextStyle(
              fontSize: 16.0,
              color: Colors.blue,
          ),
       ),
     ),
     new Text(' charlie all the node in jank list is out of time all the node in jank list is out of time',)
   ],
 )

This is the current outcome:

How do I get the second string to start from the end of the TextField and overflow to the next line?

Thanks for the help!

Answer 1

Really interesting question and quite challenging, I found a solution by using Text rich and text span to achieve it. Hope it helps!

          Text.rich(
            TextSpan(
              text: 'Alpha ',
              style: TextStyle(color: Colors.black),
              children: <InlineSpan>[
                WidgetSpan(
                  alignment: PlaceholderAlignment.baseline,
                  baseline: TextBaseline.alphabetic,
                  child: Container(
                    width: 50,
                    height: 19,
                    child: TextField(
                      style: TextStyle(
                        fontSize: 16.0,
                        color: Colors.blue,
                      ),
                    ),
                  ),
                ),
                TextSpan(
                  text:
                      ' charlie all the node in jank list is out of time all the node in jank list is out of time',
                ),
              ],
            ),
          ),