Flutter材质风格霓虹效果滑块插件material_neumorphic_slider的使用

发布于 1周前 作者 vueper 来自 Flutter

Flutter材质风格霓虹效果滑块插件material_neumorphic_slider的使用

Material Neumorphic Slider 是 Material Neumorphic 小部件套件的一部分。

使用

单值滑块

Neumorphic Design 滑块用于从一组值中选择一个值。默认情况下，它使用从最小值到最大值的连续值范围。

监听器：[onChanged], [onChangeStart], [onChangeEnd]

// 在有状态小部件中

double seekValue = 0;

Widget _buildSlider() {
    return Row(
        children: <Widget>[
            Flexible(
                child: NeumorphicSlider(
                    height: 15,
                    value: seekValue,
                    min: 0,
                    max: 10,
                    onChanged: (value) {
                    setState(() {
                        seekValue = value;
                    });
                }),
            ),
            Text("value: ${seekValue.round()}"), // 显示当前滑块值
        ],
    );
}

范围滑块

Neumorphic Design 范围滑块用于从一组值中选择一个值范围。

监听器：[onChangedLow], [onChangeHigh]

// 在有状态小部件中

double minPrice = 20;
double maxPrice = 90;

Widget _buildSlider() {
    return Row(
        children: <Widget>[
            Flexible(
                child: NeumorphicRangeSlider(
                    valueLow: minPrice,
                    valueHigh: maxPrice,
                    min: 18,
                    max: 99,
                    onChangedLow: (value) {
                        setState(() {
                            minPrice = value;
                        });
                    },
                    onChangeHigh: (value) {
                        setState(() {
                            maxPrice = value;
                        });
                    },
                ),
            ),
            Text(
                "${minPrice.round()} - ${maxPrice.round()}",
                style: TextStyle(color: Theme.of(context).colorScheme.primary), // 设置文本颜色
            ),
        ],
    );
}

更多关于Flutter材质风格霓虹效果滑块插件material_neumorphic_slider的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter材质风格霓虹效果滑块插件material_neumorphic_slider的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是如何在Flutter中使用material_neumorphic_slider插件来实现具有霓虹效果的滑块的示例代码。首先，你需要确保在你的pubspec.yaml文件中添加了material_neumorphic_slider依赖项：

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

然后，运行flutter pub get来安装依赖项。

接下来，在你的Flutter项目中，你可以使用NeuSlider组件来创建一个具有霓虹效果的滑块。以下是一个完整的示例代码：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'NeuSlider Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('NeuSlider Demo'),
        ),
        body: Center(
          child: NeuSliderDemo(),
        ),
      ),
    );
  }
}

class NeuSliderDemo extends StatefulWidget {
  @override
  _NeuSliderDemoState createState() => _NeuSliderDemoState();
}

class _NeuSliderDemoState extends State<NeuSliderDemo> {
  double _value = 50.0;

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Text(
          'Current Value: $_value',
          style: TextStyle(fontSize: 20),
        ),
        SizedBox(height: 20),
        NeuSlider(
          value: _value,
          min: 0,
          max: 100,
          onChanged: (double newValue) {
            setState(() {
              _value = newValue;
            });
          },
          activeColor: Colors.deepOrangeAccent,
          inactiveColor: Colors.grey[400]!,
          thumbShape: NeuSliderThumbShape.circle,
          thumbRadius: 12.0,
          overlayShape: NeuSliderOverlayShape.roundRectWithCorners(4.0),
          overlayColor: Colors.deepOrange.withOpacity(0.4),
          borderRadius: 24.0,
          height: 4.0,
        ),
      ],
    );
  }
}

在这个示例中，我们创建了一个简单的Flutter应用，其中包含一个NeuSlider组件。这个组件允许用户拖动滑块来改变其值，并在屏幕顶部显示当前值。

NeuSlider的一些关键属性包括：

  • value：当前滑块的值。
  • min 和 max：滑块的最小值和最大值。
  • onChanged：当滑块值改变时调用的回调函数。
  • activeColor 和 inactiveColor：滑块活动部分和非活动部分的颜色。
  • thumbShape：滑块拇指（拖动部分）的形状。
  • thumbRadius：滑块拇指的半径。
  • overlayShape 和 overlayColor：滑块覆盖层的形状和颜色。
  • borderRadius 和 height：滑块的边框半径和高度。

你可以根据需要调整这些属性以实现所需的霓虹效果。如果你想要更强烈的霓虹效果，可以尝试使用更鲜艳的颜色和不同的透明度值。

回到顶部