Flutter圆角线性进度条插件rounded_linear_progress的使用

rounded_linear_progress

一个具有圆角边缘和渐变动画的线性进度条。

安装

运行以下命令以安装插件：

flutter pub add rounded_linear_progress

技术栈

客户端: Dart, Flutter

使用/示例

下面是一个使用RoundedLinearProgress组件的示例：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Rounded Linear Progress Bar Demo'),
        ),
        body: Center(
          child: RoundedLinearProgress(
            width: 100, // 进度条的宽度
            strokeWidth: 3.0, // 进度条的厚度
            bgColor: Colors.blue, // 背景颜色
            fgColor: Colors.white, // 前景色（即进度填充色）
            duration: Duration(seconds: 2), // 动画时长
          ),
        ),
      ),
    );
  }
}

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

htzhanglong 1楼•4 天前

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

当然，以下是如何在Flutter中使用rounded_linear_progress插件来创建一个圆角线性进度条的代码示例。

首先，确保你已经在pubspec.yaml文件中添加了rounded_linear_progress依赖：

dependencies:
  flutter:
    sdk: flutter
  rounded_linear_progress: ^x.x.x  # 替换为最新版本号

然后，运行flutter pub get来获取依赖。

接下来，你可以在你的Flutter项目中使用这个插件。以下是一个完整的示例代码：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin {
  double _progress = 0.5; // 初始进度值

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Rounded Linear Progress Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            RoundedLinearProgressIndicator(
              width: 200,
              height: 20,
              borderRadius: 25,
              progress: _progress,
              color: Colors.blue,
              backgroundColor: Colors.grey[200]!,
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                setState(() {
                  _progress += 0.1;
                  if (_progress >= 1.0) {
                    _progress = 0.0;
                  }
                });
              },
              child: Text('Increase Progress'),
            ),
          ],
        ),
      ),
    );
  }
}

在这个示例中，我们创建了一个简单的Flutter应用，包含一个圆角线性进度条和一个按钮。点击按钮时，进度条的值会增加0.1，并在达到1.0时重置为0.0。

关键部分解释

RoundedLinearProgressIndicator:
```
RoundedLinearProgressIndicator(
  width: 200,
  height: 20,
  borderRadius: 25,
  progress: _progress,
  color: Colors.blue,
  backgroundColor: Colors.grey[200]!,
),
```
- width 和 height 定义了进度条的宽度和高度。
- borderRadius 定义了圆角半径。
- progress 是进度值（范围从0.0到1.0）。
- color 是进度条已填充部分的颜色。
- backgroundColor 是进度条背景的颜色。

增加进度:

ElevatedButton(
  onPressed: () {
    setState(() {
      _progress += 0.1;
      if (_progress >= 1.0) {
        _progress = 0.0;
      }
    });
  },
  child: Text('Increase Progress'),
),

使用setState来更新进度值，从而触发UI重新渲染。

这个示例展示了如何使用rounded_linear_progress插件创建一个简单的圆角线性进度条，并通过按钮交互来增加进度值。你可以根据需要进一步自定义进度条的样式和行为。