Flutter滑动条组件插件slider_x的使用

slider_x

A custom horizontal slider widget for Flutter, featuring a rounded draggable handle with segmented color indicators. This slider allows for smooth selection within a predefined range, with visual feedback displayed as a segmented line pattern. Ideal for applications that need intuitive range adjustments with clear, segmented visuals.

Preview

特性

• 支持 Android、iOS、Web、macOS、Windows 和 Linux 平台。
• 提供带有圆角的可拖动手柄。
• 带有分段颜色指示器。
• 可在预定义范围内平滑选择。
• 显示分段线图案作为视觉反馈。

开始使用

将插件添加到您的 pubspec.yaml 文件中：

dependencies:
  slider_x: <latest_version>

然后运行 flutter pub get 来获取依赖项。

使用方法

以下是一个完整的示例，展示如何在 Flutter 应用程序中使用 slider_x 插件。

示例代码

import 'package:example/timer/timer_sheet.dart'; // 导入示例组件
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp()); // 运行应用程序
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter SliderX Demo', // 设置应用标题
      debugShowCheckedModeBanner: false, // 隐藏调试标志
      theme: ThemeData( // 设置主题
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple), // 使用深紫色作为种子颜色
        useMaterial3: true, // 使用 Material 3 设计风格
      ),
      home: const MyHomePage(), // 设置主页
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    final sys = MediaQuery.of(context); // 获取设备屏幕信息
    final screenPixelRatioSize = Size(sys.size.width, sys.size.height); // 计算屏幕尺寸

    return Scaffold(
      appBar: AppBar(
        title: const Text('slider_exmaple'), // 设置应用栏标题
      ),
      body: Center(
        child: SizedBox(
          height: screenPixelRatioSize.height * 0.6, // 设置滑动条高度为屏幕高度的60%
          child: const TimerSheet(), // 使用示例组件 TimerSheet
        ),
      ),
    );
  }
}

示例组件 TimerSheet

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

class TimerSheet extends StatefulWidget {
  const TimerSheet({Key? key}) : super(key: key);

  [@override](/user/override)
  _TimerSheetState createState() => _TimerSheetState();
}

class _TimerSheetState extends State<TimerSheet> {
  double _value = 0.0;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        SliderX(
          value: _value, // 当前滑动条值
          onChanged: (newValue) {
            setState(() {
              _value = newValue; // 更新滑动条值
            });
          },
          min: 0.0, // 最小值
          max: 100.0, // 最大值
          divisions: 10, // 分段数量
          labels: [
            Label(value: 0.0, text: '0s'), // 第一个标签
            Label(value: 50.0, text: '50s'), // 中间标签
            Label(value: 100.0, text: '100s'), // 最后一个标签
          ],
          colors: [
            ColorIndicator(start: 0.0, end: 50.0, color: Colors.blue), // 蓝色段
            ColorIndicator(start: 50.0, end: 100.0, color: Colors.red), // 红色段
          ],
        ),
        const SizedBox(height: 20),
        Text('当前值: $_value'), // 显示当前滑动条值
      ],
    );
  }
}