ModernMemoires/lib/utils/widgets/QuestionSliderWidget.dart

146 lines
5.1 KiB
Dart

import 'package:flutter/material.dart';
import 'package:intl/intl.dart';
import 'package:moody/utils/logic/QuestionGenerator.dart';
class QuestionSliderWidget extends StatefulWidget {
final DateTime date;
final String questionText;
final double initialSliderValue;
final bool isSliderEnabled;
final ValueChanged<SliderChangeData> onSliderChanged;
final ValueChanged<double> onSliderPositionChanged;
QuestionSliderWidget({
Key? key,
required this.date,
required this.questionText,
required this.initialSliderValue,
required this.isSliderEnabled,
required this.onSliderChanged,
required this.onSliderPositionChanged,
}) : super(key: key);
@override
_QuestionSliderWidgetState createState() => _QuestionSliderWidgetState();
}
class _QuestionSliderWidgetState extends State<QuestionSliderWidget> {
bool _showDragText = true;
SliderChangeData _sliderData = SliderChangeData(0, 0);
QuestionGenerator generator = QuestionGenerator();
@override
void initState() {
super.initState();
_sliderData.value = widget.initialSliderValue;
}
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.fromLTRB(0, 150, 20, 0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
// Date
Padding(
padding: const EdgeInsets.fromLTRB(30, 0, 0, 30),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
DateFormat('dd MM yyyy').format(widget.date),
style: TextStyle(fontSize: 18),
),
SizedBox(height: 10),
Text(
generator.getQuestionByDate(widget.date),
style: TextStyle(fontSize: 22, fontWeight: FontWeight.bold),
),
],
),
),
// Slider and label
Stack(
children: [
Padding(
padding: const EdgeInsets.fromLTRB(15, 0, 0, 15),
child: SliderTheme(
data: SliderTheme.of(context).copyWith(
disabledThumbColor: Colors.transparent,
activeTrackColor: Colors.black,
trackShape: RectangularSliderTrackShape(),
inactiveTickMarkColor: Colors.red,
inactiveTrackColor: Colors.transparent,
valueIndicatorColor: Colors.purple,
overlayColor: Colors.transparent,
activeTickMarkColor: Colors.red,
showValueIndicator: ShowValueIndicator.always,
trackHeight: 2,
thumbColor: Colors.transparent,
thumbShape: RoundSliderThumbShape(
enabledThumbRadius: 10.0,
elevation: 0,
disabledThumbRadius: 0),
rangeThumbShape: RoundRangeSliderThumbShape(
disabledThumbRadius: 0,
enabledThumbRadius: 0,
elevation: 0,
),
),
child: Slider(
min: 0.0,
max: 100.0,
value: _sliderData.value,
onChanged: widget.isSliderEnabled
? (value) {
setState(() {
_sliderData.position =
_calculateSliderPosition(context, value);
_sliderData.value = value;
_showDragText = false;
});
widget.onSliderChanged(SliderChangeData(
_sliderData.value, _sliderData.position));
}
: null,
),
),
),
Positioned(
left: _calculateSliderPosition(context, _sliderData.value),
child: IgnorePointer(
child: _showDragText
? Text(
"Drag Me -->",
style: TextStyle(fontSize: 16),
)
: Text(
"${_sliderData.value.toStringAsFixed(0)}%",
style: TextStyle(fontSize: 20),
),
),
),
],
),
],
),
);
}
double _calculateSliderPosition(BuildContext context, double value) {
double sliderWidth =
MediaQuery.of(context).size.width - 40; // Width minus padding
double thumbWidth = 48; // Estimate of the thumb width
return (sliderWidth - thumbWidth) * value / 100.0 + thumbWidth / 2;
}
}
class SliderChangeData {
double value;
double position; // Additional data you might want to include
SliderChangeData(this.value, this.position);
}