Flutter动态滑块插件dynamic_slider的使用

概述

dynamic_slider 是一个在 Flutter 中自定义实现的 Slider 组件，允许用户在滑动时输入非等间隔的值。默认的 Slider 组件仅支持等间隔的值。

特点

• 提供了四种不同类型的可定制组件。
• 每个 dynamic_slider 组件可以接受基于滑动范围的输入值。例如，以下输入是有效的：[5, 8, 10, 15, 18, 30, 50, 60, 80, 100]。
• 可以通过自定义属性来改变 trackColor、thumbCircleColor、activeTrackColor、tickMarkRadius 等属性。
• rating_dynamic_slider 支持表情符号！

安装

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

dependencies:
  dynamic_slider: <latest_version>

然后添加以下导入：

import 'package:dynamic_slider/custom_thumb_dynamic_slider.dart';

使用示例

以下是一个完整的示例代码，展示了如何在 Flutter 应用中使用 dynamic_slider 插件。

主文件 main.dart

import 'package:flutter/material.dart';
import 'package:dynamic_slider/custom_thumb_dynamic_slider.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Dynamic Slider Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Dynamic Slider'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  void _navigateToScreen(BuildContext context, Widget widget) {
    Navigator.of(context).push(MaterialPageRoute(builder: (context) => widget));
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () {
                _navigateToScreen(context, const DynamicSliderScreen());
              },
              child: const Text("Dynamic Slider"),
            ),
            ElevatedButton(
              onPressed: () {
                _navigateToScreen(context, const LabeledDynamicSliderScreen());
              },
              child: const Text("Labeled Dynamic Slider"),
            ),
            ElevatedButton(
              onPressed: () {
                _navigateToScreen(context, const RatingDynamicSliderScreen());
              },
              child: const Text("Rating Dynamic Slider"),
            ),
            ElevatedButton(
              onPressed: () {
                _navigateToScreen(context, const CustomThumbDynamicSliderScreen());
              },
              child: const Text("Custom Thumb Dynamic Slider"),
            ),
          ],
        ),
      ),
    );
  }
}

动态滑块屏幕 DynamicSliderScreen

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

class DynamicSliderScreen extends StatefulWidget {
  [@override](/user/override)
  _DynamicSliderScreenState createState() => _DynamicSliderScreenState();
}

class _DynamicSliderScreenState extends State<DynamicSliderScreen> {
  double _value = 0.0;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Dynamic Slider'),
      ),
      body: Center(
        child: DynamicSlider(
          value: _value,
          divisions: [5, 8, 10, 15, 18, 30, 50, 60, 80, 100],
          onChanged: (double newValue) {
            setState(() {
              _value = newValue;
            });
          },
        ),
      ),
    );
  }
}

带标签的动态滑块屏幕 LabeledDynamicSliderScreen

import 'package:flutter/material.dart';
import 'package:dynamic_slider/labeled_slider.dart';

class LabeledDynamicSliderScreen extends StatefulWidget {
  [@override](/user/override)
  _LabeledDynamicSliderScreenState createState() => _LabeledDynamicSliderScreenState();
}

class _LabeledDynamicSliderScreenState extends State<LabeledDynamicSliderScreen> {
  double _value = 0.0;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Labeled Dynamic Slider'),
      ),
      body: Center(
        child: LabeledSlider(
          value: _value,
          divisions: [5, 8, 10, 15, 18, 30, 50, 60, 80, 100],
          onChanged: (double newValue) {
            setState(() {
              _value = newValue;
            });
          },
        ),
      ),
    );
  }
}

评分动态滑块屏幕 RatingDynamicSliderScreen

import 'package:flutter/material.dart';
import 'package:dynamic_slider/rating_slider.dart';

class RatingDynamicSliderScreen extends StatefulWidget {
  [@override](/user/override)
  _RatingDynamicSliderScreenState createState() => _RatingDynamicSliderScreenState();
}

class _RatingDynamicSliderScreenState extends State<RatingDynamicSliderScreen> {
  int _value = 0;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Rating Dynamic Slider'),
      ),
      body: Center(
        child: RatingDynamicSlider(
          value: _value,
          max: 5,
          onChanged: (int newValue) {
            setState(() {
              _value = newValue;
            });
          },
        ),
      ),
    );
  }
}

自定义拇指动态滑块屏幕 CustomThumbDynamicSliderScreen

import 'package:flutter/material.dart';
import 'package:dynamic_slider/custom_thumb_dynamic_slider.dart';

class CustomThumbDynamicSliderScreen extends StatefulWidget {
  [@override](/user/override)
  _CustomThumbDynamicSliderScreenState createState() => _CustomThumbDynamicSliderScreenState();
}

class _CustomThumbDynamicSliderScreenState extends State<CustomThumbDynamicSliderScreen> {
  double _value = 0.0;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Custom Thumb Dynamic Slider'),
      ),
      body: Center(
        child: CustomThumbDynamicSlider(
          value: _value,
          divisions: [5, 8, 10, 15, 18, 30, 50, 60, 80, 100],
          onChanged: (double newValue) {
            setState(() {
              _value = newValue;
            });
          },
        ),
      ),
    );
  }
}