Flutter线性进度指示器插件wave_linear_progress_indicator的使用

wave_linear_progress_indicator 是一个用于Flutter的波浪形线性进度指示器插件。它可以为你的应用程序添加动态和视觉上吸引人的进度条。

示例截图

以下是该插件在应用中的效果示例：

使用步骤

1. 添加依赖

首先，在你的 pubspec.yaml 文件中添加 wave_linear_progress_indicator 依赖：

dependencies:
  flutter:
    sdk: flutter
  wave_linear_progress_indicator: ^0.1.0 # 请根据最新版本调整

运行 flutter pub get 来安装新的依赖。

2. 示例代码

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

import 'dart:math';
import 'package:flutter/material.dart';
import 'package:wave_linear_progress_indicator/wave_linear_progress_indicator.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter WaveLinearProgressIndicator Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'WaveLinearProgressIndicator Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  double _progress = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Padding(
          padding: const EdgeInsets.all(18.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              WaveLinearProgressIndicator(
                value: _progress,
                enableBounceAnimation: true,
              ),
              const SizedBox(height: 20),
              StreamBuilder<double>(
                  stream: _getDownloadProgress(),
                  builder: (context, snapshot) {
                    double progress = 0;
                    if (snapshot.hasData) {
                      progress = snapshot.data!;
                    }
                    return WaveLinearProgressIndicator(
                      value: progress,
                      // waveColor: Colors.orange,
                    );
                  }),
              const SizedBox(height: 20),
              WaveLinearProgressIndicator(
                value: _progress,
                enableBounceAnimation: true,
                waveColor: Colors.orange,
                backgroundColor: Colors.grey[150],
                minHeight: 20,
              ),
              const SizedBox(height: 20),
              LinearProgressIndicator(
                value: _progress,
                minHeight: 10,
                backgroundColor: Colors.orange,
              ),
              const SizedBox(height: 20),
              Slider(
                value: _progress,
                onChanged: (value) {
                  setState(() {
                    _progress = value;
                  });
                },
              ),
            ],
          ),
        ),
      ),
      persistentFooterButtons: [
        FloatingActionButton(
          onPressed: _increase,
          tooltip: 'Increment',
          child: const Icon(Icons.add),
        ),
        FloatingActionButton(
          onPressed: _decrease,
          tooltip: 'Decrease',
          child: const Icon(Icons.remove),
        )
      ],
    );
  }

  Stream<double> _getDownloadProgress() async* {
    final values = <double>[
      0,
      0.1,
      0.2,
      0.3,
      0.4,
      0.45,
      0.7,
      0.85,
      0.9,
      0.95,
      0.99,
      1.0
    ];
    for (final p in values) {
      yield p;
      await Future.delayed(const Duration(milliseconds: 1800));
    }
  }

  void _increase() {
    final delta = Random().nextDouble();
    double newValue = _progress + delta;
    newValue = newValue.clamp(0, 1);
    setState(() {
      _progress = newValue;
    });
  }

  void _decrease() {
    final delta = Random().nextDouble();
    double newValue = _progress - delta;
    newValue = newValue.clamp(0, 1);
    setState(() {
      _progress = newValue;
    });
  }
}

3. 关键点解释

• WaveLinearProgressIndicator：这是核心组件，支持多种自定义选项如 value, enableBounceAnimation, waveColor, backgroundColor, 和 minHeight。
• StreamBuilder：用于从流中获取数据并实时更新进度条。
• Slider：允许用户通过滑动来改变进度值。
• FloatingActionButton：提供增加和减少进度的功能。

通过以上步骤，你可以在Flutter项目中轻松集成和使用 wave_linear_progress_indicator 插件，为你的应用增添更多视觉吸引力。