嘿，这问题我熟！在Flutter里实现类似Tinder那种能选最小/最大年龄的双滑块，其实挺简单的，给你两种靠谱方案：用原生组件快速搞定，或者用第三方包实现更个性化的样式。

原生方案：使用Flutter自带的RangeSlider #

Flutter的Material库自带了RangeSlider组件，完全能满足基础的双滑块需求，不需要额外依赖，上手超快。

完整代码示例 #

class AgeRangeSlider extends StatefulWidget {
  const AgeRangeSlider({super.key});

  @override
  State<AgeRangeSlider> createState() => _AgeRangeSliderState();
}

class _AgeRangeSliderState extends State<AgeRangeSlider> {
  // 初始化默认年龄范围：18岁到30岁
  RangeValues _currentRangeValues = const RangeValues(18, 30);

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        RangeSlider(
          values: _currentRangeValues,
          min: 18, // 最小年龄限制
          max: 60, // 最大年龄限制
          divisions: 42, // 60-18=42，确保滑块按整数步长移动
          labels: RangeLabels(
            _currentRangeValues.start.round().toString(),
            _currentRangeValues.end.round().toString(),
          ),
          // 滑块拖动时更新状态
          onChanged: (RangeValues values) {
            setState(() {
              _currentRangeValues = values;
            });
          },
          // 自定义样式（可选）
          activeColor: Colors.pink, // 选中区间的颜色
          inactiveColor: Colors.grey.shade300, // 未选中区间的颜色
          thumbShape: const RoundSliderThumbShape(enabledThumbRadius: 10), // 滑块圆点大小
        ),
        // 实时显示当前选择的年龄范围
        Padding(
          padding: const EdgeInsets.only(top: 16),
          child: Text(
            '年龄范围: ${_currentRangeValues.start.round()} - ${_currentRangeValues.end.round()}',
            style: const TextStyle(fontSize: 16, fontWeight: FontWeight.w500),
          ),
        ),
      ],
    );
  }
}

注意：年龄是整数类型，一定要设置divisions或者配合step参数，确保滑块只能停在整数位置，避免出现小数年龄。

第三方包方案：更灵活的自定义样式 #

如果需要更贴合Tinder的UI风格（比如圆角滑块、自定义提示框样式），可以用flutter_xlider包来实现高度定制。

步骤1：添加依赖 #

在pubspec.yaml中加入包依赖：

dependencies:
  flutter_xlider: ^4.0.0 # 建议使用最新版本

完整代码示例 #

import 'package:flutter_xlider/flutter_xlider.dart';

class CustomAgeSlider extends StatefulWidget {
  const CustomAgeSlider({super.key});

  @override
  State<CustomAgeSlider> createState() => _CustomAgeSliderState();
}

class _CustomAgeSliderState extends State<CustomAgeSlider> {
  double _lowerAge = 18;
  double _upperAge = 30;

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        FlutterSlider(
          values: [_lowerAge, _upperAge],
          min: 18,
          max: 60,
          step: const FlutterSliderStep(step: 1), // 强制整数步长
          // 拖动时更新年龄值
          onDragging: (handlerIndex, lowerValue, upperValue) {
            setState(() {
              _lowerAge = lowerValue;
              _upperAge = upperValue;
            });
          },
          // 自定义滑块圆点样式
          handler: FlutterSliderHandler(
            decoration: BoxDecoration(
              color: Colors.white,
              border: Border.all(color: Colors.pink, width: 2),
              borderRadius: BorderRadius.circular(20),
            ),
          ),
          // 自定义轨道样式
          trackBar: FlutterSliderTrackBar(
            activeTrackBar: BoxDecoration(
              color: Colors.pink,
              borderRadius: BorderRadius.circular(10),
            ),
            inactiveTrackBar: BoxDecoration(
              color: Colors.grey.shade300,
              borderRadius: BorderRadius.circular(10),
            ),
          ),
          // 自定义拖动时的提示框
          tooltip: FlutterSliderTooltip(
            textStyle: const TextStyle(fontSize: 14, color: Colors.white),
            decoration: BoxDecoration(
              color: Colors.pink,
              borderRadius: BorderRadius.circular(8),
            ),
          ),
        ),
        Padding(
          padding: const EdgeInsets.only(top: 16),
          child: Text(
            '年龄范围: ${_lowerAge.round()} - ${_upperAge.round()}',
            style: const TextStyle(fontSize: 16, fontWeight: FontWeight.w500),
          ),
        ),
      ],
    );
  }
}

这两种方案都能完美实现你要的年龄范围选择功能，原生方案适合快速开发，第三方包则能满足更细致的UI定制需求~

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