Flutter进度指示插件progress_indicator的使用

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

Flutter进度指示插件 progress_indicator 的使用

在Flutter中,progress_indicator 插件提供了两种类型的进度指示器:圆形进度指示器(CircularProgressIndicator)和条形进度指示器(BarProgressIndicator)。本文将详细介绍如何使用这些组件。

Features 特性

  • 圆形进度指示器
  • 条形进度指示器

Usage 使用方法

首先,在你的 pubspec.yaml 文件中添加 progress_indicator 依赖:

dependencies:
  flutter:
    sdk: flutter
  progress_indicator: ^latest_version

然后导入包:

import 'package:progress_indicator/progress_indicator.dart';

CircularProgressIndicator 圆形进度指示器

以下是一个简单的圆形进度指示器示例:

CircularProgress(
    percentage: 90.0,
    color: Colors.amber,
    backColor: Colors.grey,
    gradient: LinearGradient(colors: [Colors.blue, Colors.red]),
    showPercentage: true,
    textStyle: TextStyle(color: Colors.orange, fontSize: 70),
    stroke: 20,
    round: true,
)

BarProgressIndicator 条形进度指示器

以下是一个条形进度指示器的示例:

BarProgress(
    percentage: 30.0,
    backColor: Colors.grey,
    gradient: LinearGradient(colors: [Colors.blue, Colors.red]),
    showPercentage: true,
    textStyle: TextStyle(color: Colors.orange, fontSize: 70),
    stroke: 40,
    round: true,
)

完整示例 Demo

下面是一个完整的Flutter应用示例,展示了如何使用 CircularProgressBarProgress 组件:

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Progress Indicator App',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Progress Indicator Example'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Container(
                width: 150,
                height: 150,
                child: CircularProgress(
                  percentage: 90.0,
                  color: Colors.amber,
                  backColor: Colors.grey,
                  gradient: LinearGradient(colors: [Colors.blue, Colors.red]),
                  showPercentage: true,
                  textStyle: TextStyle(color: Colors.orange, fontSize: 20),
                  stroke: 20,
                  round: true,
                ),
              ),
              SizedBox(height: 20),
              Container(
                width: 150,
                height: 50,
                child: BarProgress(
                  percentage: 70.0,
                  backColor: Colors.grey,
                  gradient: LinearGradient(colors: [Colors.orange, Colors.red]),
                  showPercentage: true,
                  textStyle: TextStyle(color: Colors.orange, fontSize: 20),
                  stroke: 40,
                  round: false,
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

通过上述代码,你可以创建一个包含圆形和条形进度指示器的应用程序。这两个指示器都支持自定义颜色、渐变、文本样式等属性,使它们可以根据需要进行调整。


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

1 回复

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


当然,以下是如何在Flutter中使用progress_indicator插件的一个详细代码示例。不过需要注意的是,Flutter 自带了一个强大的进度指示器库,通常我们不需要额外安装插件,除非需要某些特定的自定义功能。不过,这里假设你提到的progress_indicator是一个自定义的或者第三方插件,并给出一个假设性的使用方法。如果你实际上是指Flutter内置的进度指示器,我也会在后面给出说明。

假设的第三方progress_indicator插件使用示例

首先,确保在pubspec.yaml文件中添加了这个假设的插件依赖(这里插件名称是假设的,请根据实际情况替换):

dependencies:
  flutter:
    sdk: flutter
  progress_indicator: ^x.y.z  # 替换为实际的版本号

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

接下来,在你的Dart文件中使用这个插件。这里假设插件提供了一个名为CustomProgressIndicator的进度指示器组件:

import 'package:flutter/material.dart';
import 'package:progress_indicator/progress_indicator.dart'; // 假设这是插件的导入路径

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Progress Indicator 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.0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Progress Indicator Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            SizedBox(
              height: 200,
              child: CustomProgressIndicator( // 假设的进度指示器组件
                progress: _progress,
                message: 'Loading...',
                color: Colors.blue,
              ),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                setState(() {
                  _progress += 0.1;
                  if (_progress >= 1.0) {
                    _progress = 0.0;
                  }
                });
              },
              child: Text('Increment Progress'),
            ),
          ],
        ),
      ),
    );
  }
}

Flutter 内置进度指示器使用示例

如果你实际上是指Flutter内置的进度指示器,那么使用方法如下:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Progress Indicator 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.0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Progress Indicator Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            SizedBox(
              height: 200,
              child: LinearProgressIndicator(
                value: _progress,
                backgroundColor: Colors.grey[200],
                valueColor: AlwaysStoppedAnimation<Color>(Colors.blue),
              ),
            ),
            SizedBox(height: 20),
            CircularProgressIndicator(
              value: _progress,
              backgroundColor: Colors.grey[200],
              valueColor: AlwaysStoppedAnimation<Color>(Colors.blue),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                setState(() {
                  _progress += 0.1;
                  if (_progress >= 1.0) {
                    _progress = 0.0;
                  }
                });
              },
              child: Text('Increment Progress'),
            ),
          ],
        ),
      ),
    );
  }
}

在上面的代码中,我们展示了如何使用Flutter内置的LinearProgressIndicatorCircularProgressIndicator。这两个组件都接受一个value参数来表示当前的进度。通过点击按钮,进度条的值会增加。

回到顶部