Eloka Ogbonnia
 · One Man Army

Custom Oval Slider Widget

Custom Oval Slider.mp4
518.43KB

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,
                  ),
                ),
              ],
            ),
          );
        },
      ),
    );
  }
}
7
3 replies