I want to create a widget that will underline a particular word in a sentence but have this issue: error: The element type 'List' can't be assigned to the list type 'InlineSpan'.
From screen:
UnderlineMe(sentence: 'I Love Stackoverflow', underline: 'Love'),
From Stateless Widget
class UnderlineMe extends StatelessWidget {
final String sentence;
final String underline;
const UnderlineMe(
{super.key, required this.sentence, required this.underline});
@override
Widget build(BuildContext context) {
var splitSentence = sentence.split(' ');
List<InlineSpan> childrenTextSpan = [];
for (var i = 0; i < splitSentence.length; i++) {
if (splitSentence[i] == underline) {
childrenTextSpan.add(TextSpan(
text: splitSentence[i],
style: const TextStyle(
decoration: TextDecoration.underline,
)));
} else {
TextSpan(
text: splitSentence[i],
);
}
}
return Text.rich(
TextSpan(
children: [
childrenTextSpan,
],
),
);
}
}
Please help. Thanks
You may give it a try to this code! It works fine!
class UnderlineMe extends StatelessWidget {
final String sentence;
final String underline;
const UnderlineMe({
super.key,
required this.sentence,
required this.underline,
});
@override
Widget build(BuildContext context) {
// Generate a list of TextSpans, handling spaces and underlining
final spans = <TextSpan>[];
int startIndex = 0;
while (startIndex < sentence.length) {
final index = sentence.indexOf(underline, startIndex);
if (index == -1) {
// If the word isn't found, add the remaining text as a single TextSpan
spans.add(TextSpan(text: sentence.substring(startIndex)));
break;
} else {
// Add the text before the word
spans.add(TextSpan(text: sentence.substring(startIndex, index)));
// Add the underlined word
spans.add(TextSpan(
text: underline,
style: TextStyle(decoration: TextDecoration.underline),
));
startIndex = index + underline.length;
// Add a space after the word (unless it's at the end of the sentence)
if (startIndex < sentence.length) {
spans.add(TextSpan(text: ' '));
startIndex++;
}
}
}
return RichText(
text: TextSpan(
style: DefaultTextStyle.of(context).style,
children: spans,
),
);
}
}
Thanks!