Flutter自定义滑块插件dehancer

Flutter自定义滑块插件dehancer_slider的使用

Dehancer Slider 是一个为 Flutter 提供可配置且易于使用的滑块界面值选择器的插件。

功能演示

Demo

Screenshot

支持的平台

Flutter iOS
Flutter Android
Flutter Web
Flutter Desktop

开始使用

添加插件引用到 `pubspec.yaml`

有两种方法将插件添加到你的 pubspec 中：

推荐：运行 flutter pub add dehancer_slider。
手动添加插件引用到 pubspec.yaml 的 dependencies 部分：

dependencies:
  ...
  dehancer_slider: ^1.0.4

导入到项目中

import 'package:dehancer_slider/dehancer_slider.dart';

使用示例

滑块值范围从 0 到 100

DehancerSlider(
	minValue: 0,
	maxValue: 100,
	defaultValue: 0,
	startValue: 0,
	value: 0,
)

滑块值范围从 -3 到 3

DehancerSlider(
	minValue: -3,
	maxValue: 3,
	defaultValue: 0,
	startValue: 0,
	value: 0,
)

滑块值范围从 0 到 100，默认值为 20

DehancerSlider(
	minValue: 0,
	maxValue: 100,
	defaultValue: 20,
	startValue: 0,
	value: 0,
)

滑块值范围从 0 到 100，起始值为 20

DehancerSlider(
	minValue: 0,
	maxValue: 100,
	defaultValue: 0,
	startValue: 20,
	value: 0,
	onValueChanged: (value) {
	},
)

滑块值范围从 0 到 100，并带有值变化处理程序

DehancerSlider(
	minValue: 0,
	maxValue: 100,
	defaultValue: 0,
	startValue: 0,
	value: 0,
	onValueChangeStarted: (value) {
	},
	onValueChanged: (value) {
	},
)

滑块值范围从 0 到 100，并带有滚动变化处理程序

DehancerSlider(
	minValue: 0,
	maxValue: 100,
	defaultValue: 0,
	startValue: 0,
	value: 0,
	onScrollingChanged: (isChanging) {
	},
)

完整示例代码

import 'package:dehancer_slider/dehancer_slider.dart';
import 'package:flutter/material.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: 'Dehancer Slider Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Dehancer Slider Demo'),
    );
  }
}

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> {
  bool _canScroll = true;
  final Map<String, double> _values = {};

  [@override](/user/override)
  Widget build(BuildContext context) {
    const defaultControlHeight = 40.0;
    const defaultTextWidth = 50.0;

    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      backgroundColor: const Color(0xff1E1E1E),
      body: ListView(
        physics: _canScroll
            ? const BouncingScrollPhysics()
            : const NeverScrollableScrollPhysics(),
        children: <Widget>[
          const SizedBox(
            height: defaultControlHeight,
          ),
          const Padding(
            padding: EdgeInsets.only(left: 20.0, bottom: 20),
            child: Text(
              'Double tap handle resets to default',
              style: TextStyle(color: Colors.white),
            ),
          ),
          Padding(
            padding: const EdgeInsets.only(left: 20.0),
            child: Text(
              'Positive range: ${_values['Positive range']}',
              style: const TextStyle(color: Colors.white),
            ),
          ),
          _buildSliderWith(
            valueKey: 'Positive range',
            minValue: 0,
            maxValue: 100,
            defaultValue: 0,
            startValue: 0,
          ),
          Padding(
            padding: const EdgeInsets.only(left: 20.0),
            child: Text(
              'Negative range: ${_values['Negative range']}',
              style: const TextStyle(color: Colors.white),
            ),
          ),
          _buildSliderWith(
            valueKey: 'Negative range',
            minValue: -100,
            maxValue: 0,
            defaultValue: 0,
            startValue: 0,
          ),
          Padding(
            padding: const EdgeInsets.only(left: 20.0),
            child: Text(
              'Shifted range: ${_values['Shifted range']}',
              style: const TextStyle(color: Colors.white),
            ),
          ),
          _buildSliderWith(
            valueKey: 'Shifted range',
            minValue: -20,
            maxValue: 80,
            defaultValue: 0,
            startValue: 0,
          ),
          Padding(
            padding: const EdgeInsets.only(left: 20.0),
            child: Text(
              'From -3 to +3 Value: ${_values['From -3 to +3 range']}',
              style: const TextStyle(color: Colors.white),
            ),
          ),
          _buildSliderWith(
            valueKey: 'From -3 to +3 range',
            minValue: -3,
            maxValue: 3,
            defaultValue: 0,
            startValue: 0,
          ),
          Padding(
            padding: const EdgeInsets.only(left: 20.0),
            child: Text(
              'Default: 20, Start: 0, Value: ${_values['Default: 20, Start: 0']}',
              style: const TextStyle(color: Colors.white),
            ),
          ),
          _buildSliderWith(
            valueKey: 'Default: 20, Start: 0',
            minValue: -20,
            maxValue: 80,
            defaultValue: 20,
            startValue: 0,
          ),
          Padding(
            padding: const EdgeInsets.only(left: 20.0),
            child: Text(
              'Default: 0, Start: 20, Value: ${_values['Default: 0, Start: 20']}',
              style: const TextStyle(color: Colors.white),
            ),
          ),
          _buildSliderWith(
            valueKey: 'Default: 0, Start: 20',
            minValue: -20,
            maxValue: 80,
            defaultValue: 0,
            startValue: 20,
          ),
          const Padding(
            padding: EdgeInsets.only(left: 20.0),
            child: Text(
              'Customization',
              style: TextStyle(color: Colors.white),
            ),
          ),
          Padding(
            padding: const EdgeInsets.symmetric(
              horizontal: 20,
              vertical: 10,
            ),
            child: SizedBox(
              height: defaultControlHeight + 10,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  const SizedBox(
                    width: defaultTextWidth,
                    child: Text(
                      '0%',
                      style: TextStyle(color: Colors.white),
                    ),
                  ),
                  Expanded(
                    child: DehancerSlider(
                      minValue: 0,
                      maxValue: 100,
                      defaultValue: 0,
                      startValue: 0,
                      value: _values['custom'] ?? 0,
                      inactiveTrackColor: Colors.red,
                      activeTrackColor: Colors.blue,
                      touchAreaColor: Colors.amber.withOpacity(0.5),
                      trackHandleColor: Colors.green,
                      trackBarTouchAreaSize: 70,
                      trackBarCenterHeight: 10,
                      trackBarHandleHeight: 30,
                      trackBarHeight: 4,
                      onValueChanged: (value) {
                        setState(() {
                          _values['custom'] = value;
                        });
                      },
                      onScrollingChanged: (isScrolling) {
                        setState(() {
                          _canScroll = !isScrolling;
                        });
                      },
                      onValueChangeStarted: (value) {},
                      onDefaultValuePassed: () {},
                      onValueReset: () {},
                      onMinValuePassed: () {},
                      onMaxValuePassed: () {},
                    ),
                  ),
                  const SizedBox(
                    width: defaultTextWidth,
                    child: Text(
                      '100%',
                      textAlign: TextAlign.end,
                      style: TextStyle(color: Colors.white),
                    ),
                  ),
                ],
              ),
            ),
          )
        ],
      ),
    );
  }

  Widget _buildSliderWith({
    required String valueKey,
    required double minValue,
    required double maxValue,
    required double defaultValue,
    required double startValue,
  }) {
    const defaultControlHeight = 44.0;
    const defaultTextWidth = 50.0;

    return Padding(
      padding: const EdgeInsets.only(left: 20, right: 20, top: 10, bottom: 30),
      child: SizedBox(
        height: defaultControlHeight,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            SizedBox(
              width: defaultTextWidth,
              child: Text(
                '$minValue',
                style: const TextStyle(color: Colors.white),
              ),
            ),
            Expanded(
              child: DehancerSlider(
                minValue: minValue,
                maxValue: maxValue,
                defaultValue: defaultValue,
                startValue: startValue,
                value: _values[valueKey] ?? defaultValue,
                onValueChanged: (value) {
                  setState(() {
                    _values[valueKey] = value;
                  });
                },
                onScrollingChanged: (isChanging) {
                  setState(() {
                    _canScroll = !isChanging;
                  });
                },
              ),
            ),
            SizedBox(
              width: defaultTextWidth,
              child: Text(
                '$maxValue',
                textAlign: TextAlign.end,
                style: const TextStyle(color: Colors.white),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

更多关于Flutter自定义滑块插件dehancer_slider的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

gougou168 1楼•3 天前

更多关于Flutter自定义滑块插件dehancer_slider的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

当然，以下是如何在Flutter项目中使用自定义滑块插件 dehancer_slider 的代码示例。首先，你需要确保已经在 pubspec.yaml 文件中添加了该依赖项：

dependencies:
  flutter:
    sdk: flutter
  dehancer_slider: ^最新版本号  # 请替换为实际的最新版本号

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

接下来，你可以在你的 Dart 文件中使用 DehancerSlider。以下是一个完整的示例，展示了如何在一个简单的 Flutter 应用中使用 dehancer_slider 插件：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  double _value = 50.0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Dehancer Slider Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Current Value: $_value',
              style: TextStyle(fontSize: 24),
            ),
            SizedBox(height: 20),
            DehancerSlider(
              value: _value,
              min: 0.0,
              max: 100.0,
              onChanged: (double newValue) {
                setState(() {
                  _value = newValue;
                });
              },
              // Customizing the slider appearance
              thumbColor: Colors.blue,
              activeTrackColor: Colors.lightBlue,
              inactiveTrackColor: Colors.grey[300]!,
              thumbShape: RoundSliderThumbShape(enabledThumbRadius: 15.0),
              overlayShape: RoundSliderOverlayShape(overlayRadius: 30.0),
            ),
          ],
        ),
      ),
    );
  }
}

解释

依赖项导入：
- import 'package:dehancer_slider/dehancer_slider.dart'; 用于导入 dehancer_slider 插件。
主应用：
- MyApp 类是一个无状态的小部件，它定义了应用程序的基本结构。
主页面：
- MyHomePage 是一个有状态的小部件，用于管理滑块的值。
滑块值管理：
- _value 是一个私有变量，用于存储滑块当前的值。
构建 UI：
- DehancerSlider 小部件用于显示滑块。
- value 属性绑定到 _value。
- min 和 max 属性定义了滑块的范围。
- onChanged 回调用于在滑块值更改时更新 _value。
自定义外观：
- thumbColor、activeTrackColor 和 inactiveTrackColor 用于自定义滑块的颜色。
- thumbShape 和 overlayShape 用于自定义滑块和覆盖层的形状。

这个示例展示了如何使用 dehancer_slider 插件创建一个自定义滑块，并在滑块值更改时更新界面。你可以根据需要进一步自定义滑块的外观和行为。

Flutter自定义滑块插件dehancer_slider的使用