Sleek Circular Slider: A Comprehensive Guide for Flutter Developers

Published on by Flutter News Hub

Sleek Circular Slider: A Comprehensive Guide for Flutter Developers

Sleek Circular Slider is a highly customizable circular slider/progress bar and spinner library for Flutter. It offers a wide range of options for customization, allowing you to create sliders that perfectly match your app's design and functionality.

Installation

To install Sleek Circular Slider, add the following dependency to your pubspec.yaml file:

dependencies:
  sleek_circular_slider: ^latest_version

Basic Usage

Once installed, you can import the library into your project:

import 'package:sleek_circular_slider/sleek_circular_slider.dart';

To create a basic circular slider, use the following code:

SleekCircularSlider(
  appearance: CircularSliderAppearance(),
  min: 0,
  max: 100,
  initialValue: 426,
  onChange: (double value) {
    print(value);
  },
);

Customization Options

Sleek Circular Slider provides numerous customization options, allowing you to tailor the slider to your specific needs.

CircularSliderAppearance

The CircularSliderAppearance object controls the look and feel of the slider. It includes the following parameters:

  • size: The width and height of the slider.
  • startAngle: The angle (in degrees) at which the slider begins.
  • angleRange: The angle range (in degrees) the slider reaches when the maximum value is set.
  • counterClockwise: A boolean value indicating whether the slider is counterclockwise.
  • customWidths: CustomSliderWidths object for specifying the widths of the track, bar, shadow, and handler.
  • customColors: CustomSliderColors object for specifying the colors of the track, bar, shadow, and handler.
  • infoProperties: InfoProperties object for specifying the properties of the slider's internal labels.
  • animationEnabled: A boolean value indicating whether the slider should be animated.
  • spinnerMode: A boolean value indicating whether the slider should operate as a spinner.
  • spinnerDuration: The duration (in milliseconds) of the spinner animation.
  • animDurationMultiplier: The multiplier of the duration for the animation when value changed.

CustomSliderWidths

The CustomSliderWidths object allows you to specify the widths of the track, progress bar, shadow, and handler. It includes the following parameters:

  • trackWidth: The width of the slider's track.
  • progressBarWidth: The width of the slider's progress bar.
  • shadowWidth: The width of the slider's shadow.
  • handlerSize: The size of the slider's handler.

CustomSliderColors

The CustomSliderColors object allows you to specify the colors of the track, progress bar, shadow, and handler. It includes the following parameters:

  • trackColor: The color of the slider's track.
  • trackColors: A list of colors for a gradient on the track.
  • trackGradientStartAngle: The start angle for the track's gradient.
  • trackGradientEndAngle: The end angle for the track's gradient.
  • progressBarColor: The color of the slider's progress bar.
  • progressBarColors: A list of colors for a gradient on the progress bar.
  • gradientStartAngle: The start angle for the progress bar's gradient.
  • gradientEndAngle: The end angle for the progress bar's gradient.
  • dynamicGradient: A boolean value indicating whether the gradient angles should change dynamically with value.
  • dotColor: The color of the slider's handle.
  • hideShadow: A boolean value indicating whether the shadow should be hidden.
  • shadowColor: The color of the shadow.
  • shadowMaxOpacity: The maximum opacity of the shadow.
  • shadowStep: The size of each step in the shadow painting.

InfoProperties

The InfoProperties object allows you to specify the properties of the slider's internal labels. It includes the following parameters:

  • mainLabelStyle: The text style of the main label.
  • topLabelStyle: The text style of the top label.
  • bottomLabelStyle: The text style of the bottom label.
  • topLabelText: The text for the top label.
  • bottomLabelText: The text for the bottom label.
  • modifier: A closure to modify the slider's value.

Use Cases

Sleek Circular Slider can be used in various scenarios:

  • As a slider: Track user input with interactive slider controls.
  • As a progress bar: Display progress or loading percentage without interactive controls.
  • As a spinner: Indicate loading or processing with a rotating animation.

Conclusion

Sleek Circular Slider provides a powerful and customizable solution for integrating circular sliders into your Flutter projects. Its comprehensive set of options empowers you to design and implement sliders that enhance the user experience and complement your app's aesthetics.

Flutter News Hub