Comment changer la couleur de l'étiquette du slider dans Flutter ?

Question

Est-il possible de changer la couleur de l'étiquette du slider dans Flutter ?

Il n'y a pas de champ de ce type dans le constructeur de Slider clase.

Answer 1

Selon l'API de Flutter, utilisez valueIndicatorColor qui est la propriété de SliderThemeData. SliderClass et ici SliiderThemeData

Démonstration simple : définir des variables locales :

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

et voici la solution de votre slider personnalisé

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,
                  ),
                )

et si vous souhaitez modifier la couleur du texte, la police de caractères, etc.

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

dans SliderThemeData

Answer 2

C'est une façon de le faire, mais cela modifiera tous les emplacements où l'on peut trouver des informations sur l'état d'avancement du projet. accentTextTheme il est utilisé, vous pouvez l'utiliser :

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

De cette façon, vous ne modifierez que le widget que vous devez changer et non l'ensemble du site. accentTextTheme qui peut être utilisé pour d'autres choses que vous n'avez peut-être pas besoin de changer.

Answer 3

J'ai constaté qu'il est spécifié dans Slider classe supérieure label domaine.

L'étiquette est rendue à l'aide de l'élément [ThemeData] actif [ThemeData.accentTextTheme.bodyText2].

Lors de la création du App il est nécessaire de spécifier le widget accentTextTheme et le bodyText2 domaine.

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