Warp text on a row with an input

I have a situation where I need to wrap text with an input in Flutter. An example: 'The cat goes <TextField>, the dog goes bark.'

<TextField>

I'm using the Row class to format it this way, however, the row class doesn't wrap text.

Widget _buildQuestionText(String sentence) {
List splitSentence = sentence.split('$guess');

return new Container(
child: Row(
children: <Widget>[
new Text(splitSentence[0]),
new Expanded(child: new TextField()),
new Text(splitSentence[1]),
]
),
);
}


Which creates:

I have looked at using the Flex class but was unable to achieve the format I wanted. How can I achieve text wrapping with an input in the middle of text?

Just to be clear, are you trying to make multiple bits of text that each wrap, or do you want an entire sentence with an input in the middle of it with the entire thing wrapping?
– rmtmckenzie
Jun 29 at 22:46

Sentence with an input in the middle of it with the entire thing wrapping. Thanks!
– Matt Shirley
Jun 29 at 22:47

looks like you need a Wrap and not a Row
– Fallenreaper
Jun 29 at 23:41

1 Answer
1

Wrap accepts a list of children that wraps while row accepts a list of children that do not wrap.

return new Container(
child: new Wrap(
spacing: 8.0, // gap between adjacent chips
runSpacing: 4.0, // gap between lines
children: [
new Text(splitSentence[0]),
new Container(
width: 100.0,
child: new TextField(
style: new TextStyle(
fontSize: 16.0,
color: Colors.black
)
)
),
new Text(splitSentence[1]),
],
)
);


By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.