ModernMemoires/lib/utils/widgets/question_slider_widget.dart

import 'package:flutter/material.dart';
import 'package:intl/intl.dart';
import 'package:moody/utils/logic/question_generator.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;
  final Color sliderColor; // parameter for the color

  const QuestionSliderWidget({
    Key? key,
    required this.date,
    required this.questionText,
    required this.initialSliderValue,
    required this.isSliderEnabled,
    required this.onSliderChanged,
    required this.onSliderPositionChanged,
    required this.sliderColor, // Initialize the color
  }) : super(key: key);

  @override
  State<QuestionSliderWidget> createState() => _QuestionSliderWidget();
}

class _QuestionSliderWidget extends State<QuestionSliderWidget> {
  bool _showDragText = true;
  SliderChangeData? _sliderData;
  QuestionGenerator generator = QuestionGenerator();
  final double changedInitValue = 0.0;
  bool initValSet = false;

  @override
  void initState() {
    super.initState();
    //_sliderData?.value = widget.initialSliderValue;
    _sliderData = SliderChangeData(widget.initialSliderValue, 0);
    if (!widget.isSliderEnabled) {
      _showDragText = false;
    }
  }

  @override
  Widget build(BuildContext context) {
    if (!widget.isSliderEnabled) {
      _sliderData = SliderChangeData(widget.initialSliderValue, 0);
    } else {
      if (!initValSet && changedInitValue != widget.initialSliderValue) {
        initValSet = true;
        changedInitValue != widget.initialSliderValue;
        _sliderData?.value = widget.initialSliderValue;
      }
    }

    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: const TextStyle(fontSize: 18),
                ),
                const SizedBox(height: 10),
                Text(
                  widget.questionText == "" ? generator.getQuestionByDate(widget.date) : widget.questionText,
                  style: const 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: widget.sliderColor,
                    trackShape: const RectangularSliderTrackShape(),
                    inactiveTickMarkColor: Colors.transparent,
                    inactiveTrackColor: Colors.transparent,
                    valueIndicatorColor: Colors.transparent,
                    overlayColor: Colors.transparent,
                    activeTickMarkColor: Colors.transparent,
                    showValueIndicator: ShowValueIndicator.always,
                    disabledInactiveTrackColor: Colors.transparent,
                    trackHeight: 2,
                    thumbColor: Colors.transparent,
                    thumbShape: const RoundSliderThumbShape(enabledThumbRadius: 10.0, elevation: 0, disabledThumbRadius: 0),
                    rangeThumbShape: const 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) + 10,
                top: 12,
                child: IgnorePointer(
                  child: (_showDragText && _sliderData!.value == 0)
                      ? Text(
                          "drag me -->",
                          style: TextStyle(fontSize: 16, color: widget.sliderColor),
                        )
                      : Text(
                          "${_sliderData!.value.toStringAsFixed(0)}%",
                          style: TextStyle(fontSize: 20, color: widget.sliderColor),
                        ),
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }

  double _calculateSliderPosition(BuildContext context, double value) {
    double sliderWidth = MediaQuery.of(context).size.width - 60; // Width minus padding
    double thumbWidth = 48; // Estimate of the thumb width
    return ((sliderWidth - thumbWidth) * value / 100.0 + thumbWidth / 2) + 20;
  }
}

class SliderChangeData {
  double value;
  double position; // Additional data you might want to include

  SliderChangeData(this.value, this.position);
}