如何在Flutter中创建如图所示的价格范围滑块？

你可以直接使用Flutter原生的RangeSlider组件来实现这类价格范围选择滑块，下面是完整的实现示例：

步骤1：定义状态变量 #

首先在State类中声明存储价格范围的变量：

double _minPrice = 0; // 价格最小值
double _maxPrice = 1000; // 价格最大值
RangeValues _currentRangeValues = const RangeValues(200, 800); // 当前选中的范围

步骤2：构建RangeSlider组件 #

在build方法中添加滑块组件，同时可以自定义外观和交互逻辑：

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(title: const Text('价格范围选择')),
    body: Padding(
      padding: const EdgeInsets.all(16.0),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          // 显示当前选中的价格范围
          Text(
            '当前价格范围: ${_currentRangeValues.start.toInt()} - ${_currentRangeValues.end.toInt()}',
            style: const TextStyle(fontSize: 18),
          ),
          const SizedBox(height: 20),
          // 价格范围滑块
          RangeSlider(
            values: _currentRangeValues,
            min: _minPrice,
            max: _maxPrice,
            activeColor: Colors.blue,
            inactiveColor: Colors.grey.shade300,
            onChanged: (RangeValues values) {
              setState(() {
                _currentRangeValues = values;
              });
            },
            // 可选：添加滑块标签
            labels: RangeLabels(
              _currentRangeValues.start.toInt().toString(),
              _currentRangeValues.end.toInt().toString(),
            ),
          ),
        ],
      ),
    ),
  );
}

自定义样式拓展 #

如果需要更贴近示例图的样式（比如调整滑块的大小、颜色），可以通过thumbShape和trackShape属性自定义：

RangeSlider(
  // ... 其他属性
  thumbShape: const RoundSliderThumbShape(enabledThumbRadius: 12),
  trackShape: const RoundedRectSliderTrackShape(),
)

这样就能实现和示例图类似的双滑块价格范围选择功能，你可以根据需求调整价格区间、颜色、尺寸等参数。

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