Flutter如何从数据库获取更新RangeSlider值并解决空安全报错

• _currentRangeValues被声明为可空类型RangeValues?，而initState中调用的getData()是异步方法，组件首次执行build时接口请求还未返回，此时_currentRangeValues值为null。
• 初始化阶段直接对null值使用!强制空检查，既会触发类型不匹配报错（可空类型传给要求非空的values参数），也会在首次渲染时直接抛出空访问异常。

方案1：设置非空初始默认值（推荐） #

直接给滑块设置合理的非空初始值，等接口返回数据后再替换为数据库取值，完全规避空安全问题，组件首次渲染即可正常显示。
核心修改步骤：

1. 修改变量声明，去掉可空标记，配置默认值：

// 原代码 RangeValues? _currentRangeValues;
// 修改为
RangeValues _currentRangeValues = const RangeValues(30, 70); // 可替换为业务需要的默认起止年龄

2. 修正异步请求赋值逻辑，显式做类型转换避免类型错误：

getData() async{
  var res = await http.get(Uri.https('www.*******.com', 
  '/index.php',{'act':'profile','UsrID': '${UsrID}'}));
  data = jsonDecode(res.body);
  setState(() {
    // 接口返回int类型值时需要显式转double，RangeValues仅接收double类型参数
    _currentRangeValues = RangeValues(
      (data[0]['age1'] as num).toDouble(), 
      (data[0]['age2'] as num).toDouble()
    );
  });
}

3. 移除组件中所有多余的强制空检查标记，修正回调参数类型：

RangeSlider(
  activeColor: const Color(0xff8f9df2),
  inactiveColor: const Color(0xff9a9a9a),
  values: _currentRangeValues, // 移除!标记
  min: 0,
  max: 100, // RangeSlider默认max为1，必须显式指定为100否则会报范围越界
  divisions: 5,
  labels: RangeLabels(
    _currentRangeValues.start.round().toString(), // 移除!标记
    _currentRangeValues.end.round().toString(), // 移除!标记
  ),
  onChanged: (RangeValues values) { // 回调参数为非空类型，移除?标记
    setState(() {
      _currentRangeValues = values;
    });
  },
)

方案2：加载完成前显示占位组件 #

如果不需要默认值，可以在数据请求完成前显示加载占位，等_currentRangeValues赋值完成后再渲染滑块组件，避免空值问题。
核心build逻辑修改：

@override
Widget build(BuildContext context){
  return Scaffold(
    body: Container(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          const Text(
            'Age',
            style: TextStyle(
              color: Color(0xff2c3531),
            ),
          ),
          addVerticalSpace(10),
          // 空值时显示加载指示器，数据返回后再渲染滑块
          _currentRangeValues == null 
            ? const Center(child: CircularProgressIndicator())
            : RangeSlider(
                activeColor: const Color(0xff8f9df2),
                inactiveColor: const Color(0xff9a9a9a),
                values: _currentRangeValues!,
                min: 0,
                max: 100,
                divisions: 5,
                labels: RangeLabels(
                  _currentRangeValues!.start.round().toString(),
                  _currentRangeValues!.end.round().toString(),
                ),
                onChanged: (RangeValues values) {
                  setState(() {
                    _currentRangeValues = values;
                  });
                },
              ),
        ],
      ),
    )
  );
}

• 不要在异步请求未完成时，对可空类型的_currentRangeValues直接使用!强制空检查，会直接触发运行时空异常。
• 数据库/接口返回的数值类型如果是int，必须显式转换为double后再传入RangeValues构造函数，否则会报类型不匹配错误。

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