import 'package:flutter/material.dart';

/// Flutter code sample for [Slider].

void main() => runApp(const SliderApp());

class SliderApp extends StatelessWidget {
  const SliderApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(home: SliderExample());
  }
}

class SliderExample extends StatefulWidget {
  const SliderExample({super.key});

  @override
  State<SliderExample> createState() => _SliderExampleState();
}

class _SliderExampleState extends State<SliderExample> {
  double _currentSliderPrimaryValue = 0.2;
  double _currentSliderSecondaryValue = 0.5;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Slider')),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          SliderTheme(
            data: SliderTheme.of(context).copyWith(
              valueIndicatorShape: IV4RoundValueIndicator(),
              showValueIndicator: ShowValueIndicator.onDrag,
              trackHeight: 1,
            ),
            child: Slider(
              value: _currentSliderSecondaryValue,
              label: _currentSliderSecondaryValue.round().toString(),
              onChanged: (double value) {
                setState(() {
                  _currentSliderSecondaryValue = value;
                });
              },
            ),
          ),
        ],
      ),
    );
  }
}

class IV4RoundValueIndicator extends SliderComponentShape {
  @override
  Size getPreferredSize(bool isEnabled, bool isDiscrete) {
    return Size(40, 40); // Size of the value indicator
  }

  @override
  void paint(
    PaintingContext context,
    Offset center, {
    required Animation<double> activationAnimation,
    required Animation<double> enableAnimation,
    required bool isDiscrete,
    required TextPainter labelPainter,
    required RenderBox parentBox,
    required SliderThemeData sliderTheme,
    required TextDirection textDirection,
    required double value,
    required double textScaleFactor,
    required Size sizeWithOverflow,
  }) {
    final canvas = context.canvas;

    // Define the circle indicator parameters
    const double circleDiameter = 44.0;
    final Offset circleCenter = Offset(
      center.dx,
      center.dy - circleDiameter - 10,
    );

    final paint = Paint()
      ..color = sliderTheme.valueIndicatorColor ?? Colors.purple
      ..style = PaintingStyle.fill;

    // Draw the circle
    canvas.drawCircle(circleCenter, circleDiameter / 2, paint);

    // Draw the text centered in the circle
    final textOffset = Offset(
      circleCenter.dx - (labelPainter.width / 2),
      circleCenter.dy - (labelPainter.height / 2),
    );
    labelPainter.paint(canvas, textOffset);
  }
}