flutter-如何给文本的一部分加上颜色（即在句子的中间）

Question

我是新手，我想看一下如何为文本的一部分上色的任何简单示例。即在句子中间。

让我感到困惑的是，文本的来源是动态，但是我有要为哪个文本/字母上色的数据。

例如：

这是我的文字，此文字应该是蓝色的，好的，[[此文字应该是绿色的，谢谢

注意：总字符长度：

94

彩色文本的数据：

• 蓝色：

  19至28

绿色：

58至84

任何想法？

Answer 1

您可以使用RichText

RichText(
  text: TextSpan(
    style: DefaultTextStyle.of(context).style,
    children: <TextSpan>[
      TextSpan(text: 'This is My Text and ',),
      TextSpan(text: 'this text', style: TextStyle(color: Colors.lightBlue)),
      TextSpan(text: ' should be in Blue Okay and ',),
      TextSpan(text: 'this text should be green', style: TextStyle(color: Colors.green)),
      TextSpan(text: ', thank you!'),
    ],
  ),
)

Answer 2

使用带有TextSpans的RichText小部件作为子代来使用不同的样式：

RichText(
          text: new TextSpan(
            style: new TextStyle(
              fontWeight: FontWeight.w300,
              fontSize: 20.0,
            ),
            children: [
              new TextSpan(text: 'This is My Text and '),
              new TextSpan(text: 'this text',
                  style: new TextStyle(
                      color: Colors.blue)),
              new TextSpan(text: ' should be in Blue Okay and '),
              new TextSpan(text: 'this text should be green',
                  style: new TextStyle(
                      color: Colors.green)),
              new TextSpan(text: ', thank you'),
            ],
          ),
        ),