如何在Flutter中动态改变颜色

Question

我想动态地将颜色更改为某些元素。有没有办法使用变量获取颜色？像

这样的东西

Colors[myvar] where myvar = "green"

Answer 1

你能做的就是拥有你想要的颜色列表 -

    static const List<_MyColor> myBgColors = const <_MyColor>[
     const _MyColor(null, 'Clear'),
     const _MyColor(const Color(0xFFFFC100), 'Orange'),
     const _MyColor(const Color(0xFF91FAFF), 'Light Blue'),
     const _MyColor(const Color(0xFF00D1FF), 'Cyan'),
     const _MyColor(const Color(0xFF00BCFF), 'Cerulean'),
     const _MyColor(const Color(0xFF009BEE), 'Blue'),
  ];

这里_MyColor是一个类 -

class _MyColor {
  const _MyColor(this.color, this.name);

  final Color color;
  final String name;
}

然后，您可以使用此列表访问所需的视图中的颜色。

希望这有帮助。

Answer 2

使用final对我有用。

final text_color = Colors.blue;

下面是我在课堂上如何使用它的一个示例

class ColorTest extends StatefulWidget {
  ColorTest();

  @override
  _ColorTest createState() => _ColorTest();
}

class _ColorTest extends State<ColorTest> {

  @override
  Widget build(
    BuildContext context,
  ) {

    final my_color_variable = Colors.red; // my_color_variable is now the color red

    return new Container(
        width: 100,
        height: 100,
        color: my_color_variable, // its red
    );
  }
}

Answer 3

我找到了另一种解决方案。 在我的应用中 1.当我使用滑块更改此值时，我希望数字A的颜色发生更改。 2.但是，当我将滑块用于数字B时，我希望更改B的颜色并且数字A是正常的。

我做了什么： 我已经为我的文字样式设置了常量：

const numbers = TextStyle(
  fontFamily: 'B612 Mono',
  fontSize: 18.0,
  color: white,
);

const changeValueAB = TextStyle(
  fontFamily: 'B612 Mono',
  fontSize: 18.0,
  color: cRelayMiddle,
  backgroundColor: white,
);

我做了两个布尔值：

bool aActive = false;
bool bActive = false;

然后我做了两个功能：

void changeColorA() {
  aActive = true;
  bActive = false;
}

void changeColorB() {
  aActive = false;
  bActive = true;
}

然后，当我更改值时（我现在仅作为示例值A。 B，您只需要在其中放置正确的空隙即可：

                  onPressed: () {
                    setState(() {
                    // your commands AND the void the change the booleans:
                      changeColorA();
                    });
                  },

我必须更改文本颜色的地方：

Text(
  '$inputNumberA', 
  style: aActive ? changeValueAB : numbers,),

对我有用。

Answer 4

1。使用功能

您可以使用带有Color参数的函数，即输入参数的类型为Color。例如，在一个简单的小部件中：

Container buildContainer ({Color color}) {
  return Container(
    color: color,
  );
}

在此块中，我们将return类型指定为小部件Container类。而且我们还指定了一个名为color的命名参数，该参数采用Color类型。稍后，如果我们希望调用此函数，我们将像这样进行操作（您可能需要将;替换为,）：

buildContainer(color: Colors.red);

2。 final与const

我仍然认为问题的描述不够充分，但是，如果上述答案不能解决问题，我怀疑this other StackOverflow question可能会有所帮助。

对于关键字final，当您要在（自定义）小部件中声明常量时使用它。这是因为小部件需要在运行时而不是在编译时定义的常量，例如const。否则，只要常量与运行时发生的事情相关，那么只要销毁并重建了窗口小部件，它就不会知道如何正确执行。根据{{​​3}}：

  

如果您从不打算更改变量，请使用final或const代替var或除类型外使用。最终变量只能设置一次； const变量是编译时常量。 （常量变量隐式为最终变量。）最终的顶级变量或类变量在首次使用时被初始化。

3。使用课程

例如，做与我上面提到的相同的事情的另一种方法是，现在为新的小部件创建一个新类，而不是使用功能返回小部件上的修改：

class CustomContainer extends StatelessWidget {

  CustomContainer({this.customColor});

  final Color customColor;

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        height: 10.0,
        width: 10.0,
        color: customColor,
      ),
    );
  }

}