Convert Milliseconds to Duration to String?

Question

I have a min and max parameter which each require a double.

  min: 0, 
  max: _duration!.inMilliseconds

These parameters are then converted to strings for use as dynamic text on top of the thumb ball of a slider.

But for the max value I'd like to use the actual duration instead;

IE: 1:34:30 instead of 94,500.

The final product required is a String.

So how do I get the Duration to a string while preserving the Duration formatting?

Keep in mind it is passed initially as a double.

Here's the full class for the thumb ball;

class CustomSliderThumbCircle extends SliderComponentShape {
  final double thumbRadius;
  final int min;
  final int max;

  const CustomSliderThumbCircle({
    required this.thumbRadius,
    this.min = 0,
    this.max = 10,
  });

  @override
  Size getPreferredSize(bool isEnabled, bool isDiscrete) {
    return Size.fromRadius(thumbRadius);
  }

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

    final paint = Paint()
      ..color = Colors.white //Thumb Background Color
      ..style = PaintingStyle.fill;

    TextSpan span = new TextSpan(
      style: new TextStyle(
        fontSize: thumbRadius,
        //fontWeight: FontWeight.w700,
        color: Colors.white, //Text Color of Value on Thumb
      ),
      text: getValue(value!),
    );

    TextPainter tp = new TextPainter(
        text: span,
        textAlign: TextAlign.center,
        textDirection: TextDirection.ltr);
    tp.layout();
    Offset textCenter =
        Offset(center.dx - (tp.width / 2), center.dy - (tp.height / 2));

    final rect = Rect.fromCircle(center: center, radius: thumbRadius);

    final rrect = RRect.fromRectAndRadius(
      Rect.fromPoints(
        Offset(rect.left - 10, rect.top),
        Offset(rect.right + 10, rect.bottom),
      ),
      Radius.elliptical(20, 100),
    );

    final fillPaint = Paint()
      ..color = sliderTheme!.activeTrackColor!
      ..style = PaintingStyle.fill;

    final borderPaint = Paint()
      ..color = Colors.black
      ..strokeWidth = 2.8
      ..style = PaintingStyle.stroke;

    canvas.drawRRect(rrect, fillPaint);
    canvas.drawRRect(rrect, borderPaint);

    tp.paint(canvas, textCenter);
  }

  String getValue(double value) {
    return (min + (max - min) * value).round().toString();
  }
}

Answer 1

If CustomSliderThumbCircle is your own class, I would change it to take a callback function to format the value to a String (falling back to just .toString() if no callback is specified), something like:

class CustomSliderThumbCircle extends SliderComponentShape {
  final String Function(int value)? formatValue;
  ...

  const CustomSliderThumbCircle({
    required this.thumbRadius,
    this.min = 0,
    this.max = 10,
    this.formatValue,
  });


  String getValue(double value) {
    var clamped = (min + (max - min) * value).round();
    return (formatValue == null) ? clamped.toString() : formatValue!(clamped);
  }
}

and then your caller could pass a callback:

CustomSliderThumbCircle(
  thumbRadius: ...,
  ...,
  formatValue: (value) => Duration(milliseconds: value).toString(),
)

This also would allow you to use a function that formats Durations as, say, 1m34.5s instead of as 0:01:34.500000. I generally dislike representing durations with colons because it can be ambiguous if fractional seconds are omitted. For example, using a different function to format Durations:

CustomSliderThumbCircle(
  thumbRadius: ...,
  ...,
  formatValue: (value) => prettyDuration(Duration(milliseconds: value)),
)

If CustomSliderThumbCircle is not under your control, then you could extend it with your own class that overrides getValue.

Answer 2

I doubt this is better than jamesdlin's solution but I don't know how to format it the way I'd like using the call back. Plus I realised I only need seconds and milliseconds as the audio is limited to 60 seconds anyway. So here's what I did;

String getValue(double value) {
double seconds = value * (max/1000);
String secstring = secs.truncate().toString();
var milliseconds = value * (max.remainder(1000));
String millistring = milliseconds.truncate().toString();
String stringDuration = secstring + ':' + millistring;
return stringDuration ;

}