如何在 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

当您声明一个 Text 小部件时，您还可以通过 TextStyle class.

声明它的 style

举个例子：

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

您可以为文本声明其他样式，例如fontWeight、textAlign等。您可以在 docs

上查看所有内容

在您的情况下，您可以创建另一个 return 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 2

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

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

Answer 3

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

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") 窗口小部件函数

如何在 Flutter 中为文本着色

How to color a text in Flutter

flutter

flutter-layout

flutter-animation

flutter-web