Question

是否可以在Flutter中更改Slider标签的颜色？

Slider类的构造函数中没有此类字段。

Answer 1

根据Flutter api使用valueIndicatorColor，它是SliderThemeData的属性，如此处SliderClass所述还有SliiderThemeData

简单演示：设置局部变量：

double feet = 0;
String heightInFeet = "null";
int height = 180;

这是您的自定义滑块解决方案

SliderTheme(
                  data: SliderTheme.of(context).copyWith(
                    valueIndicatorColor: Colors.blue, // This is what you are asking for
                    inactiveTrackColor: Color(0xFF8D8E98), // Custom Gray Color
                    activeTrackColor: Colors.white,
                    thumbColor: Colors.red,
                    overlayColor: Color(0x29EB1555),  // Custom Thumb overlay Color
                    thumbShape:
                        RoundSliderThumbShape(enabledThumbRadius: 12.0),
                    overlayShape:
                        RoundSliderOverlayShape(overlayRadius: 20.0),
                  ),
                  child: Slider(
                    value: height.toDouble(),
                    onChanged: (double newValue) {
                      setState(() {
                        height = newValue.toInt();
                        feet = (height / 30.48);
                        heightInFeet = feet.toStringAsFixed(2) + " feet";
                      });
                    },
                    divisions: 220,
                    label: heightInFeet,
                    min: 90.0,
                    max: 305.0,
                  ),
                )

，如果您想更改文本颜色，文本字体等，请使用

valueIndicatorTextStyle: TextStyle(
                        color: Colors.amber, letterSpacing: 2.0)

在SliderThemeData中

Answer 2

我发现它是在Slider字段上方的label类中指定的。

标签使用活动的[ThemeData]的 [ThemeData.accentTextTheme.body2]文字样式。

在创建App小部件时，必须指定accentTextTheme和body2字段。

return MaterialApp(
  theme: ThemeData(
    accentTextTheme: TextTheme(body2: TextStyle(color: Colors.white)),
  ),
  home: MyHomePage(),
);

Answer 3

这是一种实现方法，但是它将更改accentTextTheme使用的所有放置器，您可以使用以下方法：

   Theme(
      child: yourSlide,
      data: Theme.of(context).copyWith(
        accentTextTheme: TextTheme(body2: TextStyle(color: Colors.white)),
      ),
    )

这样，您将只更改需要更改的小部件，而不更改整个accentTextTheme可以用于其他可能不需要更改的小部件。

Answer 4

使用 SliderThemeData：

sliderTheme: ThemeData.dark().sliderTheme.copyWith(
  valueIndicatorColor: _primaryColor,
  valueIndicatorTextStyle: TextStyle(
    backgroundColor: Colors.transparent
  )
)

如何在Flutter中更改Slider标签的颜色？

4 个答案: