Flutter: Build a children of TextSpan

Question

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

Answer 1

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!

Answer 2

Solution for occurred error. Fix children type.

      TextSpan(
        children: [
          childrenTextSpan,
        ],
      ),

to

      TextSpan(
        children: childrenTextSpan,
      ),

But this solution doesn't solve all the problems. It's just the answer to the error you asked.

Please refer to this for codes that have solved other errors.