SyncFusion 范围滑块

Question

我正在尝试使用 SFRangeSlider 创建自定义小部件，但似乎无法弄清楚如何正确编写代码。我收到“未知错误”。

我需要声明一个 newValues 变量吗？ 如果是这样，似乎变量需要是 SfRangeValues 类型，但我无法在 FlutterFlow 中设置它？？

这是我的自定义小部件代码：

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

我有以下 Pubspec 依赖项：

• syncfusion_flutter_core：^22.2.12
• syncfusion_flutter_sliders：^22.2.12

我使用的是版本 22，因为 FlutterFlow v4.1 使用 Flutter v3.13.7，它与更高版本的 SyncFusion 不兼容。

此外，我想了解如何输出范围的开始和结束。我假设可以在 setState 中设置变量，但不确定如何做到这一点。

非常感谢任何帮助。

Answer 1

根据共享信息，我们已经在 FlutterFlow.io 中实现了 Range Slider 小部件，并且按预期工作正常，我们无法使用syncfusion_flutter_sliders：^22.2.12 版本重现报告的问题。兼容性已通过 FlutterFlow Dart 版本 3.13.7 验证

我们附上了测试的代码片段和视频供您参考。

另请找到用于创建自定义小部件的文档链接。

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

代码片段：

// 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;

          });

        },

      ),

    );

  }

}