如何在 Flutter 中为文本着色

Question

我试图用红色为我的超重和体重不足添加颜色。你能帮我告诉我该怎么做吗？

代码如下：

import 'dart:math';

class CalculatorBrain {
   CalculatorBrain({this.height, this.weight});

  final int height;
  final int weight;

  double _bmi;

  String calculateBMI() {
    _bmi = weight / pow(height / 100, 2);
    return _bmi.toStringAsFixed(1);
  }

  String getResults(){
    if (_bmi >= 25) {
      return 'Overweight';
    } else if (_bmi > 18.5) {
      return 'Normal';
    } else {
      return 'Underweight';
    }
  }

  String getInterpretation () {
    if (_bmi >= 25) {
      return 'You have a higher than normal weight. Try to exercise more.';
    } else if (_bmi > 18.5) {
      return 'You have a normal body weight. Good job!';
    } else {
      return 'You have a lower than normal body weight. You can eat a bit more.';
    }
  }

}

Answer 1

您可以参考下面的共享代码并根据您的要求进行更改

Widget getTextWidget(String text){
   Color textColor;
   if(text.toLowerCase().contains("overweight") || text.toLowerCase().contains("underweight"))
       textColor=Colors.red;
   else textColor=Colors.black;

   return Text(text, 
          style:TextStyle(color: textColor));
}

在您要显示文本的窗口小部件树中调用 getTextWidget("your text here") 窗口小部件函数

Answer 2

当你声明一个Text 小部件时，你也可以通过TextStyle 类声明它的style。

这里是一个例子：

Text(
 "Hello world!",
  style: TextStyle(
    color: Colors.red,
  )
)

您可以为文本声明其他样式，例如fontWeight、textAlign 等。您可以在docs查看所有内容

在您的情况下，您可以创建另一个返回 TextStyle 或仅返回文本颜色的函数。

Color getResultColor(){
    if (_bmi >= 25) {
      return Colors.red;
    } else if (_bmi > 18.5) {
      return Colors.black;
    } else {
      return Colors.red;
    }
  }

最后，你的Text 会是这样的：

Text(
 getResults(),
  style: TextStyle(
    color: getResultsColor(),
  )
)

Answer 3

在颤动中，字符串本身不能有颜色。如果要添加可见颜色，可以使用 Text 小部件。文本小部件需要一个字符串，然后你也可以给它一些样式：

return Text(
  getResults(),
    style: TextStyle(
      color: Colors.red,
   ),
);