Gradient Circular Slider #

A beautiful and customizable circular slider widget with gradient progress for Flutter applications. Perfect for creating intuitive and visually appealing value selectors with smooth animations and haptic feedback.

Screeshot #

Features #

✨ Beautiful Gradient Progress - Smooth color transitions with customizable gradients
🎯 Draggable Knob - Interactive knob with shadow/glow effects that follows the circular path
⌨️ Tap-to-Edit Input - Tap the center text to type an exact value with validation and clamping
🧭 Controller Support - Use GradientCircularSliderController to dismiss edit mode programmatically
👂 Edit Mode Awareness - Listen to the controller to react when the slider enters or exits edit mode
🔤 Dual Arc Labels - Optional outer and inner curved labels that hug the ring perfectly
📳 Haptic Feedback - Tactile feedback during interaction (configurable)
🌀 Initial Sweep Animation - Optionally delay and animate the first sweep after layout (initialSweepDelayDuration + sweepAnimationDuration)
🔢 Integer Snapping - Clamp drag gestures to whole numbers with shouldClampToInteger when the UI demands discrete values
📝 Editable Value Styling - Customize the editing/display text via editTextStyle
🎭 Smart Size/Position Animation - Widget lifts toward the top and eases out while editing
🎨 Fully Customizable - Colors, sizes, styles, shadows, and behaviors are all configurable

Installation #

Add gradient_circular_slider to your pubspec.yaml:

dependencies:
  gradient_circular_slider: ^1.0.3

Then run:

flutter pub get

Usage #

Basic Example #

import 'package:gradient_circular_slider/gradient_circular_slider.dart';

GradientCircularSlider(
  minValue: 0,
  maxValue: 100,
  initialValue: 50,
  gradientColors: [Colors.blue, Colors.green],
  onChanged: (value) {
    print('Value: $value');
  },
)

Advanced Example with Custom Styling #

final sliderController = GradientCircularSliderController();

GradientCircularSlider(
  controller: sliderController,
  minValue: 0,
  maxValue: 101.99,
  initialValue: 101.34,
  gradientColors: const [
    Color(0xFFFFD700),
    Color(0xFFFF6B6B),
    Color(0xFF4ECDC4),
  ],
  initialSweepDelayDuration: const Duration(milliseconds: 300),
  sweepAnimationDuration: const Duration(milliseconds: 500),
  editModeInputSpacing: 24,
  editModeScaleFactor: 0.75,
  labelText: "TAP TO ENTER AMOUNT VALUE",
  labelStyle: TextStyle(
    color: Colors.amber.withAlpha(153),
    fontSize: 12,
    fontWeight: FontWeight.w600,
    letterSpacing: 2,
  ),
  innerLabelText: "DRAG OR TAP TO EDIT",
  innerLabelStyle: TextStyle(
    color: Colors.white.withAlpha(128),
    fontSize: 10,
    fontWeight: FontWeight.normal,
    letterSpacing: 2.5,
  ),
  prefix: "₹",
  prefixScale: 0.5,
  decimalPrecision: 2,
  ringThickness: 27,
  knobRadius: 16,
  editTextStyle: const TextStyle(
    color: Colors.amber,
    fontWeight: FontWeight.bold,
  ),
  ringBackgroundColor: Colors.grey.shade800,
  knobColor: Colors.amber,
  enableHaptics: false,
  shouldClampToInteger: true,
  knobShadows: const [
    BoxShadow(
      color: Color.fromARGB(112, 0, 0, 0),
      blurRadius: 5,
      spreadRadius: 3,
    ),
  ],
  onChanged: (val) => debugPrint("Value: $val"),
  onChangeStart: () => debugPrint("Started dragging"),
  onChangeEnd: () => debugPrint("Stopped dragging"),
)

Edit Mode & Controller #

Tap the value inside the ring to enter edit mode. The circle scales up, slides toward the top, and the numeric text field becomes interactive (with optional prefixes, decimals, and validation).
Use the optional GradientCircularSliderController to dismiss edit mode programmatically (for example when navigating away or tapping outside the widget) and to observe whether the slider is currently editing.

Need breathing room between the circle and the inline text field? Use editModeInputSpacing to control the vertical gap so layouts look polished on every screen size.
Want the circle to stay larger (or shrink less) while typing? Tune editModeScaleFactor (1.0 keeps the full size, smaller values shrink it).

final sliderController = GradientCircularSliderController();

GradientCircularSlider(
  controller: sliderController,
  initialValue: 42,
  // ...other options
);

// Dismiss edit mode from anywhere in your widget tree
sliderController.dismiss();

// React to edit mode changes
sliderController.addListener(() {
  final bool isEditing = sliderController.isEditing;
  debugPrint('Slider is ${isEditing ? '' : 'not '}editing');
});

Customization Options #

Callbacks #

Examples #

Currency Selector #

GradientCircularSlider(
  minValue: 0,
  maxValue: 10000,
  initialValue: 5000,
  gradientColors: [Colors.green, Colors.blue],
  prefix: "\$",
  labelText: "SELECT AMOUNT",
)

Percentage Slider #

GradientCircularSlider(
  minValue: 0,
  maxValue: 100,
  initialValue: 75,
  gradientColors: [Colors.red, Colors.orange, Colors.yellow],
  prefix: "%",
  decimalPrecision: 0,
  labelText: "COMPLETION",
)

Temperature Control #

GradientCircularSlider(
  minValue: 16,
  maxValue: 30,
  initialValue: 22,
  gradientColors: [Colors.blue, Colors.red],
  prefix: "°",
  decimalPrecision: 1,
  labelText: "TEMPERATURE",
)

Performance #

The widget is optimized for smooth 60fps performance on all modern devices:

• Efficient rebuilds with only necessary repaints
• Hardware-accelerated rendering
• Optimized gesture detection
• Smooth animations with customizable curves

Contributing #

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

Author #

Created with ❤️ by Bharath Bandaru

Support #

If you find this package helpful, please consider giving it a ⭐ on GitHub!