Flutter渐变滑块插件flutter_gradient_slider的使用

简介

flutter_gradient_slider 是一个为 Flutter 开发者设计的可定制渐变滑块组件。它允许你创建美观且交互式的滑块，支持渐变轨道和自定义滑块手柄。

特性

• 🎨 可定制渐变颜色
• 🎯 可调整的手柄设计和大小
• 📏 支持连续和离散值
• 🔄 支持双向滑动
• 🎭 可定制活动和非活动轨道颜色
• 📱 响应式和平滑交互
• ⚡ 高性能，对应用体积影响小

安装

在你的项目的 pubspec.yaml 文件中添加以下依赖：

dependencies:
  flutter_gradient_slider: ^0.0.1

然后运行 flutter pub get 来安装该包。

使用

GradientSlider（单个滑块）

GradientSlider(
  value: _currentValue, // 当前滑块的值
  onChanged: (double value) { // 滑块值改变时的回调函数
    setState(() {
      _currentValue = value;
    });
  },
  gradientColors: const [ // 渐变颜色列表
    Colors.blue,
    Colors.purple,
    Colors.red,
  ],
)

GradientRangeSelector（范围选择器）

GradientRangeSelector(
  min: 0.0, // 范围最小值
  max: 1.0, // 范围最大值
  values: selectedValues, // 当前选中的范围值
  gradientColors: const [Colors.red, Colors.blue], // 渐变颜色列表
  overlayColor: Colors.white, // 手柄交互时的覆盖颜色
  inactiveTrackColor: Colors.grey.withOpacity(0.8), // 非活动部分的颜色
  trackHeight: 4, // 滑块轨道的高度
  onChanged: (values) { // 范围值改变时的回调函数
    setState(() {
      selectedValues = values;
    });
  },
)

参数

GradientSlider

GradientRangeSelector

示例代码

import 'package:flutter/material.dart';
import 'package:flutter_gradient_slider/flutter_gradient_slider.dart';

void main() {
  runApp(const MyApp());
}

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

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  RangeValues selectedValues = const RangeValues(0.25, 0.75);
  double sliderValue = 0.5;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: Scaffold(
        body: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 20.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              GradientSlider(
                value: sliderValue,
                max: 100,
                min: 0,
                gradientColors: const [Colors.red, Colors.blue],
                overlayColor: Colors.white,
                inactiveTrackColor: Colors.grey.withOpacity(0.8),
                onChanged: (value) {
                  setState(() {
                    sliderValue = value;
                  });
                },
              ),
              GradientRangeSelector(
                min: 0.0,
                max: 1.0,
                values: selectedValues,
                gradientColors: const [Colors.red, Colors.blue],
                overlayColor: Colors.white,
                inactiveTrackColor: Colors.grey.withOpacity(0.8),
                trackHeight: 30,
                onChanged: (values) {
                  setState(() {
                    selectedValues = values;
                  });
                },
              ),
            ],
          ),
        ),
      ),
    );
  }
}