Flutter气球滑块插件 flutter_balloon_slider 的使用

简介

flutter_balloon_slider 是一个带有浮动气球动画的滑块控件，灵感来源于 Balloon Picker。

安装

在 pubspec.yaml 文件中添加依赖：

dependencies:
  flutter_balloon_slider: "^0.1.1"

然后导入到你的项目中：

import 'package:flutter_balloon_slider/flutter_balloon_slider.dart';

基本用法

以下是一个基本的 BalloonSlider 使用示例：

BalloonSlider(
    value: 0.5,
    ropeLength: 55,
    showRope: true,
    onChangeStart: (val) {},
    onChanged: (val) {},
    onChangeEnd: (val) {},
    color: Colors.indigo
)

参数说明：

• value: 当前滑块的值（范围为 0 到 1）。
• ropeLength: 绳子的长度。
• showRope: 是否显示绳子。
• onChangeStart: 滑块开始变化时的回调函数。
• onChanged: 滑块值变化时的回调函数。
• onChangeEnd: 滑块结束变化时的回调函数。
• color: 气球的颜色。

示例代码

下面是一个完整的示例 Demo，展示了如何使用 flutter_balloon_slider 插件创建两个不同的滑块，其中一个显示绳子，另一个不显示绳子，并且实时更新滑块的值。

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

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

// ignore: must_be_immutable
class BalloonSliderDemo extends StatelessWidget {
  ValueNotifier<double> _slider1Value = ValueNotifier<double>(0.0);
  ValueNotifier<double> _slider2Value = ValueNotifier<double>(0.0);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        centerTitle: true,
        title: Text("BALLOON SLIDER",
            style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20)),
      ),
      body: SizedBox.expand(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: <Widget>[
            _buildBalloonSlider(
                showRope: true, color: Colors.blue, sliderValue: _slider1Value),
            _buildBalloonSlider(
                showRope: false,
                color: Colors.blue,
                sliderValue: _slider2Value),
          ],
        ),
      ),
    );
  }

  Widget _buildBalloonSlider({ValueNotifier<double> sliderValue, Color color, bool showRope}) {
    return Stack(
      alignment: Alignment.center,
      children: <Widget>[
        Container(
          width: 240,
          height: 60,
          child: BalloonSlider(
            value: sliderValue.value,
            ropeLength: 55,
            showRope: showRope,
            onChanged: (val) => sliderValue.value = val,
            color: color,
          ),
        ),
        Positioned(
          bottom: 0,
          right: 0,
          child: ValueListenableBuilder<double>(
            valueListenable: sliderValue,
            builder: (context, value, child) {
              int progress = (value * 100).round();
              return Text(
                "$progress%",
                style: TextStyle(fontWeight: FontWeight.bold, color: color),
              );
            },
          ),
        )
      ],
    );
  }
}

示例解释

• _slider1Value 和 _slider2Value 是 ValueNotifier<double> 类型的变量，用于存储滑块的当前值。
• _buildBalloonSlider 方法用于构建滑块组件，接受三个参数：是否显示绳子 (showRope)、气球的颜色 (color) 和滑块的值 (sliderValue)。
• 在 BalloonSlider 组件中，通过 onChanged 回调函数更新 sliderValue 的值。
• 使用 ValueListenableBuilder 来监听滑块值的变化，并在滑块下方显示当前的百分比值。

结论

flutter_balloon_slider 提供了一个有趣的交互方式来选择数值。你可以根据自己的需求自定义颜色、绳子长度等属性，轻松地将其集成到你的 Flutter 应用中。更多详细信息和更新日志可以查看 GitHub 和 Pub.dev 页面。