颤振 - 改变步进器 - 步进颜色

Question

有没有办法在不创建自定义 Stepper 的情况下更改 Steps 的颜色？ 当前步骤为蓝色。

https://docs.flutter.io/flutter/material/Stepper-class.html
https://docs.flutter.io/flutter/material/Step-class.html

Answer 1

如果您查看 Flutter 包材料步进器代码，您会看到该步骤的圆形图标/指示符取决于它是否处于活动状态。

它会在亮模式下使用您的colorScheme.primary 颜色，或者在暗模式下使用您的colorScheme.secondary 颜色。

当一个步骤不是当前活动的步骤时，它将使用：

光照模式：您的 colorScheme.onSurface 值，不透明度为 0.38
深色模式：您的colorScheme.background 颜色

因此，您可以使用包裹在步进器周围的自定义主题来覆盖您的默认主题；或者，使用步进器的活动状态来控制小部件预期的当前步骤的颜色。

Flutter Stepper _circleColor 方法：

Color _circleColor(int index) {
    final ColorScheme colorScheme = Theme.of(context).colorScheme;
    if (!_isDark()) {
      return widget.steps[index].isActive ? colorScheme.primary : colorScheme.onSurface.withOpacity(0.38);
    } else {
      return widget.steps[index].isActive ? colorScheme.secondary : colorScheme.background;
    }
  }

光照模式下的示例实现：

 Theme(
         data: Theme.of(context).copyWith(
                    colorScheme: Theme.of(context)
                              .colorScheme
                              .copyWith(onSurface: Colors.red.shade200,
primary: Colors.red)),
                      child: Stepper());

Answer 2

 In Flutter 2 just follow this :
 
 Theme(
      data: ThemeData(colorScheme:          ColorScheme.fromSwatch().copyWith( primary: Color(0xfffada36),
                                  ),
                                ),

在颤振 2 中，只需遵循以下命令： 主题（ 数据：主题数据（ 配色方案： ColorScheme.fromSwatch().copyWith( 主要：颜色（0xfffada36）， ), ),

Answer 3

使用您现有的主题颜色

由于某种原因，stepper 不会继承您的主要 MaterialApp() 主题。但是你可以用Theme() 包裹你的Stepper() 小部件并使用你的主要主题的颜色。

假设您正在使用MaterialApp() 的theme 属性，并且您已将colorScheme 属性设置为primary 和secondary 颜色。 （从 Flutter 2.5 开始，accentColor 已被正式弃用）

ThemeData() 的基本 colorScheme 示例：

colorScheme: ColorScheme.fromSwatch().copyWith(primary: Colors.green, secondary: Colors.lightGreen),

要将此 colorScheme 应用到您的 Stepper() 小部件，您可以使用 Theme.of(context) 复制您的主要主题。

Container(
  child: Theme(
    data: Theme.of(context),
    child: Stepper(
      ...
    ),
  ),
),

不同颜色

只需在 data 属性上创建新的颜色方案，就像将 ThemeData() 应用于 MaterialApp() 的 theme 属性一样。

参考

• ThemeData Docs
• ColorScheme Docs

Answer 4

步骤的颜色取决于ColorScheme.primary 颜色，要更改它，您必须用Theme 包裹Stepper 并在ThemeData 添加 colorScheme 属性，如下所示：

Theme(
  data: ThemeData(
          colorScheme: Theme.of(context).colorScheme.copyWith(primary: yourColor),
              ),
  child: Stepper(...),
      );

Answer 5

我是这样实现的：

body: Theme(
  data: ThemeData(
    accentColor: Colors.blueAccent
  ),
  child: Stepper(
    steps: []
  ),
)

基本上将您的步进器包装在主题小部件中，并将ThemeData 的accentColor 设置为您想要的颜色。

Answer 6

将您的步进器包装在主题小部件中

body: Theme(
  data: ThemeData(
    primaryColor: Colors.blueAccent
  ),
  child: Stepper(
    steps: []
  ),
)

Answer 7

从 Flutter 1.22.0 版本开始，步进按钮颜色由ThemeData.colorScheme 而非ThemeData.primaryColor 确定。

Answer 8

将您的步进器包装在主题小部件中。

body: Theme(
    data: ThemeData(
                  accentColor: Colors.orange,
                  primarySwatch: Colors.orange,
                  colorScheme: ColorScheme.light(
                    primary: Colors.orange
                  )
                ),
    child: Stepper(
       steps: []
    ))

它会将步进器的index颜色以及CONTINUE按钮颜色更改为橙​​色（根据您自己的要求设置颜色）。

Answer 9

Ctrl + 右键单击​​ Step（它会将您带到 Stepper.dart 文件） 在这里您可以找到该步骤的所有配置和颜色。 对我来说，通过更改此代码更改了 continueenter image description here 平面按钮。