Question 288870 in Flutter Question posted in
The official Flutter documentation can be found here.

How to set label color for Slider in flutter?

Is it possible to set label color different to active color? I tried a lot of options (see below) but nothing works.

import 'package:flutter/material.dart';

void main() {
  var themeData = ThemeData(
    useMaterial3: true,
  );
  runApp(MaterialApp(
    theme: themeData.copyWith(
        sliderTheme: themeData.sliderTheme.copyWith(
      valueIndicatorColor: themeData.primaryColor,
      disabledActiveTickMarkColor: themeData.primaryColor,
      disabledActiveTrackColor: themeData.primaryColor,
      disabledInactiveTickMarkColor: themeData.primaryColor,
      disabledInactiveTrackColor: themeData.primaryColor,
      disabledSecondaryActiveTrackColor: themeData.primaryColor,
      activeTickMarkColor: themeData.primaryColor,
      activeTrackColor: themeData.primaryColor,
      secondaryActiveTrackColor: themeData.primaryColor,
      inactiveTickMarkColor: themeData.primaryColor,
      inactiveTrackColor: themeData.primaryColor,
    )),
    home: const MyHomePage(),
  ));
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  double sliderValue = 0;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Slider(
        value: sliderValue,
        max: 23,
        divisions: 23,
        label: "$sliderValue",
        inactiveColor: Theme.of(context).primaryColor,
        activeColor: Theme.of(context).disabledColor,
        thumbColor: Theme.of(context).primaryColor,
        onChanged: (double value) {
          setState(() {
            sliderValue = value;
          });
        },
      ),
    );
  }
}
Tags:

2

Answers


  1. 0

    you can give label color to slider by using SliderTheme like this

    SliderTheme(
         data: const SliderThemeData(
                 valueIndicatorTextStyle: TextStyle(
                  color: Colors.red, // Change the label color here
                 ),
          ),
      child: Slider(
        value: sliderValue,
        max: 23,
        divisions: 23,
        label: "$sliderValue",
        inactiveColor: Theme.of(context).primaryColor,
        activeColor: Theme.of(context).disabledColor,
        thumbColor: Theme.of(context).primaryColor,
        onChanged: (double value) {
          setState(() {
            sliderValue = value;
          });
        },
      ),
),
    Login or Signup to reply.
  2. 0

    Certainly! This code snippet demonstrates customizing the label color separately from the slider’s active color using a Tooltip widget. It positions the label adjacent to the Slider, displaying the value with a red-colored Text style. Adjust the color or any other text style properties as needed to fit your design preferences.

    class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  double sliderValue = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Slider(
            value: sliderValue,
            max: 23,
            divisions: 23,
            inactiveColor: Theme.of(context).primaryColor,
            activeColor: Theme.of(context).disabledColor,
            onChanged: (double value) {
              setState(() {
                sliderValue = value;
              });
            },
          ),
          SizedBox(height: 20),
          // Creating a custom label using Tooltip widget
          Tooltip(
            message: '$sliderValue',
            preferBelow: false, // Adjust this to change tooltip position
            child: Text(
              '$sliderValue',
              style: TextStyle(
                color: Colors.red, // Set your desired label color here
                fontWeight: FontWeight.bold,
              ),
            ),
          ),
        ],
      ),
    );
  }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search