Using sleek_circular_slider package (sleek_circular_slider: ^2.0.1)
// Automatic FlutterFlow imports
import '/flutter_flow/flutter_flow_theme.dart';
import '/flutter_flow/flutter_flow_util.dart';
import '/custom_code/widgets/index.dart'; // Imports other custom widgets
import '/flutter_flow/custom_functions.dart'; // Imports custom functions
import 'package:flutter/material.dart';
// Begin custom widget code
// DO NOT REMOVE OR MODIFY THE CODE ABOVE!
import 'package:sleek_circular_slider/sleek_circular_slider.dart';
class CurvedSlider extends StatefulWidget {
const CurvedSlider({
super.key,
this.width,
this.height,
this.initialValue,
required this.minimumValue,
required this.maximumValue,
required this.sliderColor,
});
final double? width;
final double? height;
final double? initialValue;
final double minimumValue;
final double maximumValue;
final Color sliderColor;
@override
State<CurvedSlider> createState() => _CurvedSliderState();
}
class _CurvedSliderState extends State<CurvedSlider> {
late double _currentValue;
@override
void initState() {
super.initState();
_currentValue = widget.initialValue ?? widget.minimumValue;
}
@override
Widget build(BuildContext context) {
return Container(
width: widget.width,
height: widget.height,
child: SleekCircularSlider(
min: widget.minimumValue,
max: widget.maximumValue,
initialValue: _currentValue,
appearance: CircularSliderAppearance(
customColors: CustomSliderColors(
trackColor: Color.fromARGB(255, 242, 242, 242),
progressBarColor: widget.sliderColor,
),
customWidths: CustomSliderWidths(
trackWidth: 18,
progressBarWidth: 18,
),
infoProperties: InfoProperties(
mainLabelStyle: TextStyle(
fontSize: 24,
fontWeight: FontWeight.bold,
color: Colors.black,
),
modifier: (double value) {
final int roundedValue = value.ceil();
return 'S/ $roundedValue.00';
},
),
startAngle: 180,
angleRange: 180,
),
onChange: (double value) {
setState(() {
_currentValue = value;
FFAppState().sliderValue = value; // Update the app state variable
});
},
innerWidget: (double value) {
return Center(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Text(
'A retirar',
style: TextStyle(
fontSize: 16,
color: Colors.black54,
),
),
Text(
'S/ ${value.ceil().toString()}',
style: TextStyle(
fontSize: 24,
fontWeight: FontWeight.bold,
),
),
],
),
);
},
),
);
}
}