¿Cómo personalizar el widget Slider en Flutter?

Hemos investigando por el mundo online y así traerte la solución a tu inquietud, si tienes alguna difcultad deja la duda y respondemos con gusto.

Solución:

Envuelva su control deslizante con un SliderTheme

SliderTheme(
    data: SliderThemeData(
            thumbColor: Colors.green,
            thumbShape: RoundSliderThumbShape(enabledThumbRadius: 20)),
    child: Slider(
          value: _value,
          onChanged: (val) 
            _value = val;
            setState(() );
          ,
        ),
      ),

Creo que tienes que usar la clase SliderTickMarkShape

Clase base para formas de marca de graduación del control deslizante.

Cree una subclase de esto si desea una forma de marca de verificación deslizante personalizada.

La manera fácil es obtener el SliderTheme real utilizado en su contexto y modificar solo las propiedades que necesita. Por ejemplo, para modificar una diapositiva:

SliderTheme(
    data: SliderTheme.of(context).copyWith(
    activeTrackColor: Colors.white,
    thumbShape: RoundSliderThumbShape(enabledThumbRadius: 15.0),
    overlayShape: RoundSliderOverlayShape(overlayRadius: 30.0),
    ),
    child: Slider(
             value: height.toDouble(),
             min: 120.0,
             max: 220.0,
             activeColor: Colors.white,
             inactiveColor: Color(0xFF8D8E98),
             onChanged: (double newValue) 
                 setState(() 
                        height = newValue.round();
                      );
                    ,
                  ),
                ),

Otra opción es modificar el tema que estás usando en tu aplicación; de esta manera modificas todos los controles deslizantes en la aplicación:

MaterialApp(
      theme: ThemeData.dark().copyWith(
          sliderTheme: SliderTheme.of(context).copyWith( //slider modifications
            thumbColor: Color(0xFFEB1555),
            inactiveTrackColor: Color(0xFF8D8E98),
            activeTrackColor: Colors.white,
            overlayColor: Color(0x99EB1555),
            thumbShape: RoundSliderThumbShape(enabledThumbRadius: 15.0),
            overlayShape: RoundSliderOverlayShape(overlayRadius: 30.0),
          ),
          primaryColor: Color(0xFF0A0E21), // theme color
          scaffoldBackgroundColor: Color(0xFF0A0E21)), // theme background color
      home: InputPage(),
);

Reseñas y puntuaciones

Nos puedes añadir valor a nuestro contenido cooperando tu experiencia en las notas.

---

---

Utiliza Nuestro Buscador