Skip to main content

CwCircularSlider Documentation

Overview​

The CwCircularSlider is an interactive circular slider component that allows users to select values by dragging along a circular track. It features a customizable track, progress arc, and draggable handle, providing an intuitive radial input method for your Flutter applications.

Class Definition​

CwCircularSlider​

Creates a circular slider with a draggable handle that moves along a circular track.

Parameters​

  • key: Widget key for identification

Implementation Details​

The widget consists of:

  • A stateful widget that maintains the current slider value (0.0 to 1.0)
  • A gesture detection system for handling drag operations
  • A custom painter for rendering the visual elements of the slider

Visual Components​

  • Track: A circular background track displayed in gray with partial opacity
  • Progress Arc: A blue arc that shows the selected value portion of the track
  • Handle: A draggable blue circular handle that indicates the current selection point

Usage Example​

CwCircularSlider(
  key: UniqueKey(),
)

Gesture Handling​

The slider converts touch positions to angle values:

  • Uses atan2 to calculate the angle from the center to touch position
  • Normalizes the angle to a value between 0.0 and 1.0
  • Updates the UI when the user drags anywhere on the component

Painter Implementation​

The CwCircularSliderPainter class handles the drawing operations:

  • Draws the circular track with a stroke style
  • Renders the progress arc from the starting position to the current value
  • Calculates and draws the handle position using trigonometric functions

Customization​

Current implementation uses fixed styling:

  • Dimensions: 300x300 pixels
  • Track: Gray with 30% opacity, 10px stroke width
  • Progress: Blue color, 10px stroke width, rounded cap
  • Handle: Blue filled circle with 15px radius

Source Code Repository​

Find the full source code in the cw_sliders.dart file: GitHub Repository