How to fix the Sleek Circular Slider Shape on Web?

Viewed 404

I'm using SleekCircularSlider and It works perfect on IOS and Android, but It appears warped when I use Web...

Warped Slider on Web Warped Slider on Web

Correct Slider on Mobile Correct Slider on Mobile

My code looks like the documentation...

  SleekCircularSlider(
    min: (_prefs.oxiMin>_prefs.oxiRango) ? (_prefs.oxiMin-_prefs.oxiRango)*1.0 : 0.0,
    max: (_prefs.oxiMax+_prefs.oxiRango)*1.0,
    initialValue: _initialOxi!,
    appearance: _cicularApariencia(modificadorOxi, _changeOxi),
    onChangeEnd: (double value) {
      tempOxigeno.oxigeno = double.parse(value.toStringAsFixed(1));
      _initialOxi = double.parse(value.toStringAsFixed(1));
      _changeOxi = false;
      setState(() {});
    }          
  ),

I am using Web Renderer to preserve custom icons (flutter run -d chrome --web-renderer html)

Really Circular Slider is supported on Web?

How can I fix the wrong shape on Web?

UPDATE:

I was testing with FittedBox and the warped appearance continues on the web.

I think the wrong behavior is due to the CircularSliderAppearance...

  CircularSliderAppearance _cicularApariencia(String Function(double) modifier, bool animationEnabled) {
    List<Color> progColors = [const Color(0xff6d888d), const Color(0xffE0B872), const Color(0xffff7583)];
    return CircularSliderAppearance(startAngle: 330, angleRange: 150,
              customColors: CustomSliderColors(trackColor: Colors.grey[300], gradientStartAngle: 330, gradientEndAngle: 120, dynamicGradient: true, progressBarColors: progColors, hideShadow: true),
              infoProperties: InfoProperties(modifier: modifier,), //bottomLabelText: 'Temp', bottomLabelStyle: TextStyle(color: Colors.grey[700]))
              animationEnabled: animationEnabled,
            );
  }

I was testing with hideshadow: false and the result is as follows:

Warped Slider on Web with hideshadow: false wrong behavior on web

0 Answers
Related