在FlutterFlow中运行Syncfusion Flutter Sliders遇报错求助

我接触Dart/Flutter仅3天，尝试在FlutterFlow中结合模板与示例代码运行Syncfusion Flutter Sliders组件，但持续报错，提示onChange、value等为必填参数（已在界面添加value参数），怀疑缺少依赖或基础配置。

自定义组件代码 #

import 'package:syncfusion_flutter_sliders/sliders.dart';

class NewCustomWidget extends StatefulWidget {
  const NewCustomWidget({
    Key? key,
    this.width,
    this.height,
    this.value,
  }) : super(key: key);

  final double? width;
  final double? height;
  final double? value;

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

// dynamic setState;

class _NewCustomWidgetState extends State<NewCustomWidget> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: SfSlider(),
        ),
      ),
    );
  }
}

double _value = 40.0;

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: const Text('Syncfusion Flutter Slider'),
    ),
    body: SfSlider(
      min: 0.0,
      max: 100.0,
      value: _value,
      interval: 20,
      showTicks: true,
      showLabels: true,
      enableTooltip: true,
      minorTicksPerInterval: 1,
      onChanged: (dynamic value) {
        setState(() {
          _value = value;
        });
      },
    ),
  );
}

相关配置与报错信息 #

• 依赖配置：已添加syncfusion_flutter_sliders依赖（版本20.4.54）
• 参数定义：已在FlutterFlow界面定义value参数（类型为double，默认值40）
• 报错提示：the named parameter 'onChange' is required, but there's no corresponding argument. Try adding the required argument.

问题原因与解决方法 #

核心问题 #

你的代码有两个关键错误：

1. _NewCustomWidgetState中的SfSlider未传必填参数：直接写SfSlider()，没有传入value和onChanged，这是报错的直接原因。
2. 代码结构混乱：组件类外部的独立build方法和_value变量属于无效代码，不会被执行。

修复步骤 #

1. 整合代码结构：把外部的滑块配置代码移到_NewCustomWidgetState的build方法中，用状态类维护滑块当前值。
2. 传入必填参数：给SfSlider传入value和onChanged参数（注意是onChanged，不是报错里的onChange，属于拼写提示误差）。
3. 移除无效代码：删除组件类外的_value变量和独立build方法，同时不要在自定义组件里嵌套MaterialApp（FlutterFlow已有全局实例）。

修复后的示例代码 #

import 'package:syncfusion_flutter_sliders/sliders.dart';

class NewCustomWidget extends StatefulWidget {
  const NewCustomWidget({
    Key? key,
    this.width,
    this.height,
    this.initialValue = 40.0, // 用initialValue传递初始值
  }) : super(key: key);

  final double? width;
  final double? height;
  final double initialValue;

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

class _NewCustomWidgetState extends State<NewCustomWidget> {
  late double _sliderValue;

  @override
  void initState() {
    super.initState();
    _sliderValue = widget.initialValue; // 初始化滑块值
  }

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: widget.width,
      height: widget.height,
      child: SfSlider(
        min: 0.0,
        max: 100.0,
        value: _sliderValue,
        interval: 20,
        showTicks: true,
        showLabels: true,
        enableTooltip: true,
        minorTicksPerInterval: 1,
        onChanged: (value) {
          setState(() {
            _sliderValue = value as double;
          });
        },
      ),
    );
  }
}

额外注意事项 #

• 确保FlutterFlow中配置的参数和代码中的参数对应，比如把原来的value参数改成initialValue，用来传递初始值。
• 添加依赖后，需确保FlutterFlow项目重新构建，本地运行的话要执行flutter pub get。

内容的提问来源于stack exchange，提问作者user1051849