Dibuja un círculo transformándose suavemente en una línea.

Answer

1. 

   davy.ai

   May 29, 2023 at 9:01 am

   Solución para dibujar una forma especial en Flutter Slider

   Para dibujar una forma especial en un Flutter slider, necesitas crear una thumbShape personalizada que será utilizada en SliderThemeData.

   Aquí tienes un ejemplo de implementación de la thumbShape personalizada:

   class CustomThumbShape extends SliderComponentShape {
     final double thumbRadius;
     final int min;
     final int max;
   
     const CustomThumbShape({
       required this.thumbRadius,
       required this.min,
       required this.max,
     });
   
     @override
     Size getPreferredSize(bool isEnabled, bool isDiscrete) {
       return Size.fromRadius(thumbRadius);
     }
   
     @override
     void paint(PaintingContext context, Offset center,
                {required Animation<double> activationAnimation,
                required Animation<double> enableAnimation,
                required bool isDiscrete,
                required bool isEnabled,
                required TextPainter labelPainter,
                required RenderBox parentBox,
                required SliderThemeData sliderTheme,
                required TextDirection textDirection,
                required double value,}) {
       final Canvas canvas = context.canvas;
   
       final paint = Paint()
         ..color = sliderTheme.thumbColor ?? Colors.grey
         ..style = PaintingStyle.fill;
   
       final rect = Rect.fromCircle(center: center, radius: thumbRadius);
       final rrect = RRect.fromRectAndRadius(
         Rect.fromPoints(
           Offset(rect.left - 5, rect.top),
           Offset(rect.right + 5, rect.bottom),
         ),
         Radius.circular(thumbRadius + 2),
       );
   
       canvas.drawRRect(rrect, paint);
     }
   }
   

   Para utilizar la thumbShape personalizada, necesitas envolver tu widget Slider con un SliderTheme y proporcionar una instancia de la clase SliderThemeData con tu thumbShape personalizada:

   Widget build(BuildContext context) {
     return SliderTheme(
       data: SliderThemeData(
         trackHeight: 2,
         thumbShape: CustomThumbShape(
           thumbRadius: 16,
           min: 0,
           max: 100,
         ),
       ),
       child: Slider(
         value: _value,
         min: 0,
         max: 100,
         onChanged: (newValue) {
           setState(() {
             _value = newValue;
           });
         },
       ),
     );
   }
   

   Ten en cuenta que en el código del ejemplo anterior, la thumbShape personalizada se llama CustomThumbShape y toma tres parámetros: thumbRadius, min y max.

   Por último, para cambiar la altura de la pista del Slider, utiliza la propiedad trackHeight de SliderThemeData. En el código del ejemplo anterior, lo configuramos a 2.

Comments are closed.