Flutter动画进度条插件animated_progress_bar的使用

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

Flutter动画进度条插件animated_progress_bar的使用

动画进度条介绍

animated_progress_bar 是一个用于在Flutter中显示带有自定义样式的动画进度条的插件。它允许你设置进度条的宽度、高度、颜色和样式。

示例代码

下面是一个完整的示例代码，展示了如何使用animated_progress_bar插件来创建不同的动画进度条效果。

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

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

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

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

class _MyAppState extends State<MyApp> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Animated ProgressBar Example'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: [
                  SizedBox(
                    height: 110, // 设置进度条的高度
                    width: 110, // 设置进度条的宽度
                    child: AnimatedProgressBar(
                      stroke: 20, // 设置进度条的描边宽度
                      color: Colors.purple, // 设置进度条的颜色
                      style: PaintingStyle.stroke, // 设置进度条的样式为描边
                      percentage: 1.5, // 设置进度条的百分比
                    ),
                  ),
                  SizedBox(
                    height: 110, // 设置进度条的高度
                    width:  e10, // 设置进度条的宽度
                    child: AnimatedProgressBar(
                      stroke: 12, // 设置进度条的描边宽度
                      style: PaintingStyle.stroke, // 设置进度条的样式为描边
                      percentage: 0.8, // 设置进度条的百分比
                    ),
                  ),
                ],
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: [
                  SizedBox(
                    height:  a10, // 设置进度条的高度
                    width:  a10, // 设置进度条的宽度
                    child: AnimatedProgressBar(
                      stroke: 7, // 设置进度条的描边宽度
                      color: Colors.cyan, // 设置进度条的颜色
                      style: PaintingStyle.stroke, // 设置进度条的样式为描边
                      percentage: 0.3, // 设置进度条的百分比
                    ),
                  ),
                  SizedBox(
                    height:  a d o, // 设置进度条的高度
                    width:  a d o, // 设置进度条的宽度
                    child: AnimatedProgressBar(
                      color: Colors.orange, // 设置进度条的颜色
                      style: PaintingStyle.fill, // 设置进度条的样式为填充
                      percentage: 0.1, // 设置进度条的百分比
                    ),
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

更多关于Flutter动画进度条插件animated_progress_bar的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter动画进度条插件animated_progress_bar的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是如何在Flutter应用中使用animated_progress_bar插件的一个示例代码案例。这个插件允许你创建动画效果的进度条。

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

dependencies:
  flutter:
    sdk: flutter
  animated_progress_bar: ^3.0.1  # 请检查最新版本号

然后运行flutter pub get来安装依赖。

接下来，你可以在你的Flutter应用中使用这个插件。以下是一个简单的示例，展示如何使用AnimatedProgressBar来创建一个动画进度条：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Animated Progress Bar Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Animated Progress Bar Example'),
        ),
        body: Center(
          child: AnimatedProgressBarExample(),
        ),
      ),
    );
  }
}

class AnimatedProgressBarExample extends StatefulWidget {
  @override
  _AnimatedProgressBarExampleState createState() => _AnimatedProgressBarExampleState();
}

class _AnimatedProgressBarExampleState extends State<AnimatedProgressBarExample> with SingleTickerProviderStateMixin {
  double _progress = 0.0;

  @override
  void initState() {
    super.initState();
    _startProgressBar();
  }

  void _startProgressBar() {
    Timer.periodic(Duration(milliseconds: 100), (Timer t) {
      setState(() {
        if (_progress < 1.0) {
          _progress += 0.01;
        } else {
          t.cancel();
        }
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        SizedBox(
          height: 20.0,
        ),
        Text(
          'Progress: ${(_progress * 100).toStringAsFixed(2)}%',
          style: TextStyle(fontSize: 20.0),
        ),
        SizedBox(
          height: 20.0,
        ),
        AnimatedProgressBar(
          progress: _progress,
          backgroundPadding: 5.0,
          borderRadius: 5.0,
          animationDuration: 3000,
          barColor: Colors.blue,
          backgroundColor: Colors.grey[200]!,
        ),
      ],
    );
  }
}

在这个示例中：

  1. 我们首先定义了MyApp作为应用的根widget。
  2. AnimatedProgressBarExample是一个StatefulWidget，它持有一个_progress变量来跟踪进度。
  3. 在_AnimatedProgressBarExampleState中，我们使用Timer.periodic来模拟进度条的进度增加，每秒增加10次（每次增加0.01）。
  4. 我们通过setState来更新UI，每次进度更新时都会重新构建widget。
  5. AnimatedProgressBar是实际显示进度条的widget，我们传递了进度值（_progress）、背景填充、边框半径、动画持续时间和颜色等参数。

这个示例展示了如何使用animated_progress_bar插件创建一个简单的动画进度条，并根据时间逐渐增加进度。你可以根据需要调整参数来实现不同的动画效果。

回到顶部