flutterrichtext

Flutter: Build a children of TextSpan


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


Solution

  • 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!