Flutter波形滑块插件wavy_slider的使用

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

Flutter波形滑块插件wavy_slider的使用

wavy_slider

wavy_slider 是一个功能强大的Flutter插件，它允许你在UI中添加美观的波浪形滑块。无论你想要增强应用的视觉效果还是创建装饰性的分隔线，WavySlider 插件都能让你轻松实现并自定义。

Screenshot

使用方法

WavySlider 提供了一个简单的方式来创建水平波浪线滑块。以下是一些使用示例：

  1. 使用默认波形滑块：
WaveSlider(
  onChanged: (currentValue) {
    if (kDebugMode) {
      print(currentValue);
    }
  },
)

or 稍微定制一下：

WaveSlider(
  color: Colors.red,
  strokeWidth: 6,
  value: .2,
  waveWidth: 20,
  waveHeight: 15,
  width: 200,
  onChanged: (currentValue) {
    if (kDebugMode) {
      print(currentValue);
    }
  },
)

支持库

你可以通过在pub上点赞、在GitHub上星标以及报告任何遇到的bug来支持这个库。

import 'package:flutter/ffoundation.dart';
import 'package:flutter/material.dart';
import 'package:wavy_slider/wavy_slider.dart';

void main() {
  runApp(
    MaterialApp(
      home: MyApp(),
    ),
  );
}

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

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

class _MyAppState extends State<MyApp> {
  double _value = .5;
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Wave Slider in Action')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            WavySlider(
              onChanged: (currentValue) {
                if (kDebugMode) {
                  print(currentValue);
                }
              },
            ),
            WavySlider(
              color: Colors.red,
              strokeWidth: 6,
              value: .2,
              waveWidth: 23,
              waveHeight: 15,
              width: 200,
              onChanged: (currentValue) {
                if (kDebugMode) {
                  print(currentValue);
                }
              },
            ),
            WavySlider(
              color: Colors.blue,
              strokeWidth: 6,
              value: _value,
              waveWidth: 23,
              waveHeight: 15,
              width: 200,
              onChanged: (currentValue) {
                if (kDebugMode) {
                  print(currentValue);
                }
              },
            ),
            SizedBox(height: 16,),
            FilledButton(onPressed: () {
              setState(() {
                _value += .11;
              });
            }, child: const Text('Increase')),
          ],
        ),
      ),
    );
  }
}

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

Harmonyos Next教程
1 回复

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


当然，以下是如何在Flutter项目中使用wavy_slider插件的示例代码。wavy_slider是一个自定义的滑块组件，通常用于创建具有波浪形外观的滑块。

首先，确保你已经在pubspec.yaml文件中添加了wavy_slider依赖项：

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

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

接下来，在你的Dart文件中导入wavy_slider包，并创建一个使用WavySlider的示例：

import 'package:flutter/material.dart';
import 'package:wavy_slider/wavy_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 = 0.5;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Wavy Slider Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Current Value: $_value',
              style: TextStyle(fontSize: 24),
            ),
            SizedBox(height: 20),
            WavySlider(
              value: _value,
              minValue: 0.0,
              maxValue: 1.0,
              onChanged: (double newValue) {
                setState(() {
                  _value = newValue;
                });
              },
              waveColor: Colors.blue,
              trackColor: Colors.grey[300]!,
              thumbColor: Colors.blueAccent,
              thumbSize: 24.0,
              waveAnimationDuration: Duration(milliseconds: 300),
            ),
          ],
        ),
      ),
    );
  }
}

在这个示例中，我们创建了一个简单的Flutter应用，其中包含一个WavySlider组件。以下是代码的关键部分解释：

  1. 导入包：

    import 'package:wavy_slider/wavy_slider.dart';

  2. 状态管理：

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

    我们用一个_value变量来存储滑块的值。

  3. UI构建：

    WavySlider(
  value: _value,
  minValue: 0.0,
  maxValue: 1.0,
  onChanged: (double newValue) {
    setState(() {
      _value = newValue;
    });
  },
  waveColor: Colors.blue,
  trackColor: Colors.grey[300]!,
  thumbColor: Colors.blueAccent,
  thumbSize: 24.0,
  waveAnimationDuration: Duration(milliseconds: 300),
),

    WavySlider组件接受多个参数：

    • value：当前滑块的值。
    • minValue和maxValue：滑块的最小值和最大值。
    • onChanged：当滑块值改变时的回调函数。
    • waveColor：波浪的颜色。
    • trackColor：轨道的颜色。
    • thumbColor：滑块按钮的颜色。
    • thumbSize：滑块按钮的大小。
    • waveAnimationDuration：波浪动画的持续时间。

  4. 显示当前值：

    Text(
  'Current Value: $_value',
  style: TextStyle(fontSize: 24),
),

    我们使用一个Text组件来显示当前滑块的值。

这个示例展示了如何使用wavy_slider插件来创建一个具有波浪形外观的滑块，并实时显示滑块的值。你可以根据需要进一步自定义WavySlider的外观和行为。

回到顶部