5

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

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

4

9 回答 9

7

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

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

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

于 2020-09-23T08:36:47.187 回答
3

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

Theme(
  data: ThemeData(
          colorScheme: Theme.of(context).colorScheme.copyWith(primary: yourColor),
              ),
  child: Stepper(...),
      );
于 2021-07-14T14:03:14.607 回答
3

从颤振版本 1.22.0 开始，步进按钮颜色由ThemeData.colorScheme而不是确定ThemeData.primaryColor。

于 2020-10-06T11:21:52.540 回答
1

使用您现有的主题颜色

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

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

一个基本的colorScheme例子ThemeData()：

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属性一样。

参考

于 2021-09-12T22:11:21.517 回答
0

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

body: Theme(
  data: ThemeData(
    primaryColor: Colors.blueAccent
  ),
  child: Stepper(
    steps: []
  ),
)
于 2019-11-13T09:53:44.460 回答
0 

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

在颤振 2 中，只需遵循以下内容： Theme( data: ThemeData( colorScheme: ColorScheme.fromSwatch().copyWith( primary: Color(0xfffada36), ), ),

于 2021-12-05T19:30:02.910 回答
0

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

于 2020-04-08T16:13:25.417 回答
0

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

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

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

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

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

颤振步进器_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());
于 2021-12-11T12:18:21.020 回答
0

这是我实现这一目标的方法：

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

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

于 2019-03-18T12:50:26.027 回答