Flutter 更改 CircularProgressIndicator 的颜色

在Flutter中，CircularProgressIndicator是一个非常常见的widget，用于提示用户正在进行某些操作。默认的颜色是蓝色，但是有时候我们需要更改颜色以适应自己App的主题。那么如何更改它的颜色呢？让我们一起来看看吧！

使用color属性更改颜色

CircularProgressIndicator有一个color属性，可以用来指定颜色。我们可以将其设置为任何颜色：

CircularProgressIndicator(
  color: Colors.red,
)

但是，请注意：如果您的App有深色和浅色主题，那么这个方法可能不太实用。您需要为每个主题单独设置颜色。

使用Theme更改颜色

对于深色和浅色主题，更改CircularProgressIndicator的颜色最好的方法是使用Theme。Theme是Flutter中一种方便的、定义一组风格的方法。在这种情况下，我们可以使用它来定义我们的进度指示器的颜色。

首先，我们需要在我们的主题中定义一个颜色：

MaterialApp(
  theme: ThemeData(
    colorScheme: ColorScheme.light(
      primary: Colors.red, // 设置主要颜色为红色
    ),
  ),
)

接下来，我们可以使用Theme.of()方法来获取当前的主题，然后使用progressIndicatorTheme属性来更改进度指示器的颜色。

CircularProgressIndicator(
  valueColor: AlwaysStoppedAnimation(
    Theme.of(context).colorScheme.primary, // 使用主题中定义的颜色
  ),
)

这个方法可以确保您的进度指示器的颜色与您的应用程序主题保持一致，而无需为每个主题编写额外的代码。

以上就是我们如何更改CircularProgressIndicator的颜色。记得要根据您的App主题选择最适合您的方法，以便为用户提供更好的用户体验。