Flutter自定义进度条插件custom_seek_bar的使用

Flutter 自定义进度条插件 custom_seek_bar 的使用

在 Flutter 开发中，有时我们需要一个自定义的进度条组件来满足特定的设计需求。custom_seek_bar 是一个非常有用的插件，可以帮助我们轻松地创建自定义进度条。

安装 custom_seek_bar 插件

首先，在 pubspec.yaml 文件中添加 custom_seek_bar 依赖：

dependencies:
  custom_seek_bar: ^版本号

然后运行 flutter pub get 来安装插件。

使用 SeekBar 组件

以下是一个简单的示例，展示了如何使用 SeekBar 组件来自定义进度条：

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('自定义进度条示例'),
        ),
        body: Center(
          child: CustomSeekBarExample(),
        ),
      ),
    );
  }
}

class CustomSeekBarExample extends StatefulWidget {
  [@override](/user/override)
  _CustomSeekBarExampleState createState() => _CustomSeekBarExampleState();
}

class _CustomSeekBarExampleState extends State<CustomSeekBarExample> {
  double _progress = 0.5;
  double _secondProgress = 0.8;

  void _onStartTrackingTouch() {
    print('开始拖动');
  }

  void _onProgressChanged(double value) {
    setState(() {
      _progress = value;
    });
    print('进度改变: $value');
  }

  void _onStopTrackingTouch() {
    print('停止拖动');
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        SeekBar(
          value: _progress,
          secondValue: _secondProgress,
          progressColor: Colors.blue,
          secondProgressColor: Colors.orange,
          onStartTrackingTouch: _onStartTrackingTouch,
          onProgressChanged: _onProgressChanged,
          onStopTrackingTouch: _onStopTrackingTouch,
        ),
        SizedBox(height: 20),
        Text('当前进度: $_progress'),
        SizedBox(height: 20),
        Text('次级进度: $_secondProgress'),
      ],
    );
  }
}