Flutter高级进度条控制插件flutter_advanced_seekbar的使用

Flutter高级进度条控制插件flutter_advanced_seekbar的使用

插件介绍

flutter_advanced_seekbar 是一个用于Flutter应用中的高级进度条控制插件，支持水平和垂直方向的进度条，并且提供了丰富的自定义选项。

以下是插件演示图：

Horizontal	Vertical

安装方法

添加到 pubspec.yaml

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

dependencies:
  flutter_advanced_seekbar: $latest_version

请将 $latest_version 替换为插件的最新版本号。

使用方法

以下是一个完整的示例代码，展示了如何使用 flutter_advanced_seekbar 插件：

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

  [@override](/user/override)
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  String state1 = "";
  int progress1 = 0;

  String state2 = "";
  int progress2 = 30;

  String state3 = "";
  int progress3 = 0;

  String state4 = "";
  int progress4 = 0;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Flutter Advanced Seek Bar"),
      ),
      body: Column(
        children: [
          SizedBox(height: 50),
          Container(
            child: Center(
              child: Text("demo1: 状态: $state1: $progress1"),
            ),
          ),
          Container(
            height: 50,
            padding: EdgeInsets.symmetric(horizontal: 15, vertical: 10),
            child: AdvancedSeekBar(
              Color(0xffeeeff3), // 背景条的颜色
              10, // 圆点默认大小
              Colors.blue, // 圆点的颜色
              fillProgress: true, // 完成的进度是否标记为圆点的颜色
              seekBarStarted: () { // 开始seek回调
                setState(() {
                  state1 = "开始";
                });
              },
              seekBarProgress: (v) { // seek进度回调
                setState(() {
                  state1 = "正在拖动";
                  progress1 = v;
                });
              },
              seekBarFinished: (v) { // 完成seek回调
                setState(() {
                  state1 = "完成";
                  progress1 = v;
                });
              },
            ),
          ),
          SizedBox(height: 50),
          Container(
            child: Center(
              child: Text("demo2: 状态: $state2: $progress2"),
            ),
          ),
          Container(
            height: 50,
            padding: EdgeInsets.symmetric(horizontal: 15, vertical: 10),
            child: AdvancedSeekBar(
              Color(0xffeeeff3),
              10,
              Colors.blue,
              scaleWhileDrag: false, // 圆点在拖动时是否放大
              defaultProgress: 30, // 原点默认指向
              seekBarStarted: () {
                setState(() {
                  state2 = "开始";
                });
              },
              seekBarProgress: (v) {
                setState(() {
                  state2 = "正在拖动";
                  progress2 = v;
                });
              },
              seekBarFinished: (v) {
                setState(() {
                  state2 = "完成";
                  progress2 = v;
                });
              },
            ),
          ),
          SizedBox(height: 50),
          Container(
            child: Center(
              child: Text("demo3: 状态: $state3: $progress3"),
            ),
          ),
          Container(
            height: 50,
            padding: EdgeInsets.symmetric(horizontal: 15, vertical: 10),
            child: AdvancedSeekBar(
              Color(0xffeeeff3),
              10,
              Colors.blue,
              lineHeight: 5, // 背景条的高度
              defaultProgress: 50,
              scaleWhileDrag: true,
              percentSplit: 10, // 是否需要拆分进度
              percentSplitColor: Colors.green, // 拆分条的颜色
              percentSplitWidth: 1, // 拆分条的宽度
              fillProgress: true,
              autoJump2Split: false, // 如果拆分 seek后是否必须到拆分点上
              seekBarStarted: () {
                setState(() {
                  state3 = "开始";
                });
              },
              seekBarProgress: (v) {
                setState(() {
                  state3 = "正在拖动";
                  progress3 = v;
                });
              },
              seekBarFinished: (v) {
                setState(() {
                  state3 = "完成";
                  progress3 = v;
                });
              },
            ),
          ),
          SizedBox(height: 50),
          Container(
            child: Center(
              child: Text("demo4: 状态: $state4: $progress4"),
            ),
          ),
          Container(
            height: 50,
            padding: EdgeInsets.symmetric(horizontal: 15, vertical: 10),
            child: AdvancedSeekBar(
              Color(0xffeeeff3),
              10,
              Colors.blue,
              lineHeight: 5,
              defaultProgress: 50,
              scaleWhileDrag: true,
              percentSplit: 10,
              percentSplitColor: Colors.green,
              percentSplitWidth: 1,
              seekBarStarted: () {
                setState(() {
                  state4 = "开始";
                });
              },
              seekBarProgress: (v) {
                setState(() {
                  state4 = "正在拖动";
                  progress4 = v;
                });
              },
              seekBarFinished: (v) {
                setState(() {
                  state4 = "完成";
                  progress4 = v;
                });
              },
            ),
          ),
        ],
      ),
    );
  }
}