SyncFusion Range Slider

Question

I am trying to create a custom widget using SFRangeSlider and can not seem to figure out how to write the code properly. I get an "Unknown Error".

Do I need to declare a newValues variable? If so, it seems the variable needs to be of type SfRangeValues but I can't set that within FlutterFlow??

Here is my custom widget code:

import '/backend/supabase/supabase.dart';
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:syncfusion_flutter_sliders/sliders.dart';

class RangeSlider extends StatefulWidget {
  const RangeSlider({
    super.key,
    this.width,
    this.height,
  });

  final double? width;
  final double? height;

  @override
  RangeSliderState createState() => RangeSliderState();
}

class RangeSliderState extends State<RangeSlider> {
  SfRangeValues _values = SfRangeValues(0.3, 0.7);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SfRangeSlider(
        min: 0.0,
        max: 100.0,
        values: _values,
        onChanged: (SfRangeValues newValues) {
          setState(() {
            _values = newValues;
          });
        },
      ),
    );
  }
}

I have the following Pubspec Dependencies:

• syncfusion_flutter_core: ^22.2.12
• syncfusion_flutter_sliders: ^22.2.12

I am using version 22 due to FlutterFlow v4.1 using Flutter v3.13.7 which is not compatible with later versions SyncFusion.

Further, I would like to understand how to output the start and end of the range. I assume that the variables could be set within the setState but unsure of how I would do it.

Any help is much appreciated.

Answer 1

As per the shared information, we have implemented the Range Slider widget in FlutterFlow.io and it was working fine as expected we aren't able to reproduce the reported issue with the syncfusion_flutter_sliders: ^22.2.12 version. The compatibility was verified with FlutterFlow Dart version 3.13.7

We have attached the tested code snippet and video for your reference.

Also please find the documentation link for creating a custom widget.

https://docs.flutterflow.io/customizing-your-app/custom-functions/custom-widgets#2.-create-custom-widget

Code snippet:

// 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:syncfusion_flutter_sliders/sliders.dart';  
 

class RangeSliderWidget extends StatefulWidget {

  const RangeSliderWidget({

    Key? key,

    this.width,

    this.height,

  }) : super(key: key);   
 

  final double? width;   
 

  final double? height;   
 

  @override

  _RangeSliderWidgetState createState() => _RangeSliderWidgetState();

}   
 

class _RangeSliderWidgetState extends State<RangeSliderWidget> {

  SfRangeValues _values = SfRangeValues(0.3, 0.7);  
 

  @override

  Widget build(BuildContext context) {

    return Scaffold(

      body: SfRangeSlider(

        min: 0.0,

        max: 100.0,

        values: _values,

        onChanged: (SfRangeValues newValues) {

          setState(() {

            _values = newValues;

          });

        },

      ),

    );

  }

}