Feature: Able to set startDuration & endDuration for active waveform?

[hishamsyed0]

Hi, i need to show active waveform between two durations, it will be a helpful feature!
Thanks for the great library.

[rutvik110]

So you want to set a start and end point for active waveforms?

[bdlukaa]

@rutvik110 Yes! And, in addition to this feature, it would be nice to have a way to define a start and end point for the waveform. This would be useful in a clipping functionality, for example.

Thank you!

[bdlukaa]

The output would look like this:

Currently, we need to make use of a Stack and a CustomClipper<Rect> to render two waveforms on top of each other:

Stack(children: [
  Positioned.fill(
    child: CurvedPolygonWaveform(
      height: constraints.maxHeight,
      width: constraints.maxWidth,
      samples: snapshot.data!,
      style: PaintingStyle.fill,
      inactiveColor: theme.colorScheme.primaryContainer.withOpacity(0.5),
    ),
  ),
  Positioned.fill(
    child: ClipRect(
      clipper: RectClipper(
        initialPositionFactor: start.inMilliseconds / duration.inMilliseconds,
        endPositionFactor: end.inMilliseconds / duration.inMilliseconds,
      ),
      child: CurvedPolygonWaveform(
        height: constraints.maxHeight,
        width: constraints.maxWidth,
        samples: snapshot.data!,
        style: PaintingStyle.fill,
        inactiveColor: theme.colorScheme.primary,
      ),
    ),
  ),
])

class RectClipper extends CustomClipper<Rect> {
  final double initialPositionFactor;
  final double endPositionFactor;

  const RectClipper({
    required this.initialPositionFactor,
    required this.endPositionFactor,
  });

  @override
  Rect getClip(Size size) {
    return Rect.fromLTRB(
      size.width * initialPositionFactor,
      0.0,
      size.width * endPositionFactor,
      size.height,
    );
  }

  @override
  bool shouldReclip(RectClipper oldClipper) =>
      oldClipper.endPositionFactor != endPositionFactor ||
      oldClipper.initialPositionFactor != initialPositionFactor;
}