Flutter Question posted in
The official Flutter documentation can be found here.

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

Tags:

2

Answers


  1. 0

    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!

    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search