title: How to generate List<TextSpan> dynamic?
body: <p>Good Morning everyone,</p>
  <p>I Have different words of different lengths and I Need to create a dynamic List of TextSpan with every letter from the current word.</p>
  <p>I have Example to  clear what i mean with screenshot</p>
  <pre><code>  var txtColor = 'a';
    var word = 'rate'.split('');
  
    levlup() {
      List&lt;TextSpan&gt; textSpans = &lt;TextSpan&gt;[
        TextSpan(text: word[0], style: TextStyle(color: txtColor == word[0] ? Colors.red: Colors.black)),
        TextSpan(text: word[1], style: TextStyle(color: txtColor == word[1] ? Colors.red: Colors.black)),
        TextSpan(text: word[2], style: TextStyle(color: txtColor == word[2] ? Colors.red: Colors.black)),
        TextSpan(text: word[3], style: TextStyle(color: txtColor == word[3] ? Colors.red: Colors.black)),
  
      ];
      return textSpans;
    }
  
    Widget build(BuildContext context) {
  
      return Scaffold(
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: &lt;Widget&gt;[
              RichText(
                text: TextSpan(
                  style: TextStyle(color: Colors.black, fontSize: 18),
                  children: levlup(),
                ),
              )
            ],
          ),
        ),
      );
    }
  }
  </code></pre>
  <p><a href="https://i.stack.imgur.com/eA0C9.png" rel="nofollow noreferrer">enter image description here</a></p>