如何在Flutter中动态改变文本的颜色？

Question

这是我的应用程序的一小部分

我通过对每个细节进行硬编码来做到这一点。但我想动态地实现这一点。

问题是 - 如果我编码一段时间，我将输入我编码的小时数，如果我实现了里程碑，里程碑文本必须变为红色，下一个里程碑必须变为绿色。

这是我到目前为止的代码

我的里程碑清单

List milestoneList = [10, 25, 50, 100, 250, 500, 750, 1000];

将列表映射到小部件

Row(
     mainAxisAlignment: MainAxisAlignment.center,
     children: milestoneList.map((item) {
       return Padding(
       padding: const EdgeInsets.all(8.0),
       child: Text(
       item.toString(),
       style: TextStyle(
       fontWeight: FontWeight.bold,),
    ),
   );
 }).toList(),

到目前为止，我能够破解我需要将值传递给color的参数TextStyle。我无法思考超出这一点的事情。

Answer 1

编辑：如果你想要每个项目有不同的颜色，你可以使用这样的功能，

Color getColor(number) {
   if (number > 0 && number < 100) return Colors.red;
   if (number >= 100 && number < 200) return Colors.blue;
   ...
}

并更新颜色属性，

color: getColor(item),

将其添加到里程碑列表下方

Color textColor = Colors.black; // Default color

像这样改变你的文字样式，

TextStyle(
  fontWeight: FontWeight.bold,
  color: textColor,
),

这样做是为了更新颜色，

FlatButton(
  onPressed: () {
    setState(() => textColor =
        Color((Random().nextDouble() * 0xFFFFFF).toInt() << 0)
            .withOpacity(1.0)); // this is generate random color, u can use your own..
  },
  child: Text("change color"),
),