Flutter 进度条

17 Mar 2025 | 5 分钟阅读

进度条是一个图形控制元素，用于显示任务的进度，例如下载、上传、安装、文件传输等。在本节中，我们将了解如何在 Flutter 应用程序中显示进度条。

Flutter 可以借助以下两个小部件显示进度条：

LinearProgressIndicator（线性进度指示器）
CircularProgressIndicator（圆形进度指示器）

让我们详细了解一下。

LinearProgressIndicator（线性进度指示器）

线性进度条用于水平线显示任务的进度。

Flutter 主要提供两种类型的线性进度指示器：

确定型：确定型进度条指示完成任务时每个点的实际进度量。它的值将从 0.0 单调增加到 1.0，以显示当时完成的任务量。我们需要使用从 0.0 到 1.0 的非空值来创建确定型进度指示器。

不确定型：不确定型进度条不指示完成任务的进度量。这意味着我们不知道任务何时完成。它在不指示剩余多少进度的前提下取得进展。我们可以使用 null 值来创建一个不确定型进度指示器。

性质

以下是线性进度指示器的最常见属性：

double value： 它用于指定 0.0 到 1.0 之间的非空值，表示任务进度的完成情况。

Color backgroundColor： 它用于指定小部件的背景颜色。

Animation<Color> valueColor： 它用于指定进度指示器的颜色作为动画值。

示例

以下代码说明了不确定型线性进度条的使用，该进度条显示一个下载，我们不知道它何时完成。使用一个浮动按钮将状态从未下载更改为下载。当没有下载时，它会显示文本；否则，它将显示进度指示器。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: LinearProgressIndicatorApp(),
    );
  }
}

class LinearProgressIndicatorApp extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return LinearProgressIndicatorAppState();
  }
}

class LinearProgressIndicatorAppState extends State<LinearProgressIndicatorApp> {
  bool _loading;

  @override
  void initState() {
    super.initState();
    _loading = false;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Flutter Linear Progress Bar"),
      ),
      body: Center(
        child: Container(
          padding: EdgeInsets.all(12.0),
          child: _loading ? LinearProgressIndicator() : Text(
              "Press button for downloading",
              style: TextStyle(fontSize: 25)),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            _loading = !_loading;
          });
        },
        tooltip: 'Download',
        child: Icon(Icons.cloud_download),
      ),
    );
  }
}

输出

现在，在您的 IDE 中运行该应用程序。我们可以看到屏幕的 UI 如下面的屏幕截图所示。

当我们按下浮动按钮时，它会将状态从未下载更改为下载，并显示进度指示器，如下面的屏幕截图所示

有时我们想要创建一个确定型进度条，这意味着我们将显示完成任务需要多长时间。在这种情况下，我们可以模拟一个需要时间才能完成任务的下载，并更新 LinearProgressIndicator 的值，如下所示

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: LinearProgressIndicatorApp(),
    );
  }
}

class LinearProgressIndicatorApp extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return LinearProgressIndicatorAppState();
  }
}

class LinearProgressIndicatorAppState extends State<LinearProgressIndicatorApp> {
  bool _loading;
  double _progressValue;

  @override
  void initState() {
    super.initState();
    _loading = false;
    _progressValue = 0.0;
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Flutter Linear Progress Bar"),
      ),
      body: Center(
        child: Container(
          padding: EdgeInsets.all(12.0),
          child: _loading
              ? Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              LinearProgressIndicator(
                backgroundColor: Colors.cyanAccent,
                valueColor: new AlwaysStoppedAnimation<Color>(Colors.red),
                value: _progressValue,
              ),
              Text('${(_progressValue * 100).round()}%'),
            ],
          )
              : Text("Press button for downloading", style: TextStyle(fontSize: 25)),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            _loading = !_loading;
            _updateProgress();
          });
        },
        tooltip: 'Download',
        child: Icon(Icons.cloud_download),
      ),
    );
  }
  // this function updates the progress value
  void _updateProgress() {
    const oneSec = const Duration(seconds: 1);
    new Timer.periodic(oneSec, (Timer t) {
      setState(() {
        _progressValue += 0.1;
        // we "finish" downloading here
        if (_progressValue.toStringAsFixed(1) == '1.0') {
          _loading = false;
          t.cancel();
          return;
        }
      });
    });
  }
}

输出

现在，在您的 IDE 中运行该应用程序。当我们按下按钮时，它会将状态从不下载更改为下载，并显示当时已完成多少进度，如下面的屏幕截图所示

CircularProgressIndicator（圆形进度指示器）

它是一个小部件，通过旋转来指示应用程序中的等待过程。它以圆形显示任务的进度。它还以两种方式显示进度条：确定型和不确定型。

当我们想要显示正在进行的任务的进度时，例如下载或上传文件的百分比等，可以使用确定型进度条。我们可以通过指定 0.0 到 1.0 之间的值来显示进度。

当我们不想知道正在进行的进程的百分比时，可以使用不确定型进度条。默认情况下，CircularProgressIndicator 显示不确定型进度条。

示例

在下面的示例中，我们将看到处于不确定模式的圆形进度指示器，该指示器不显示任何任务的进度。它会持续显示圆圈，表明正在处理某些事情，我们必须等待其完成。为此，无需为 CircularProgressIndicator() 构造函数指定任何值。请参见以下代码

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Progress Bar Example'),
        ),
        body: Center(
            child: CircularProgressIndicatorApp()
        ),
      ),
    );
  }
}

/// This is the stateless widget that the main application instantiates.
class CircularProgressIndicatorApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CircularProgressIndicator(
      backgroundColor: Colors.red,
      strokeWidth: 8,);
  }
}

输出

现在，在您的 IDE 中运行该应用程序。我们将看到 Flutter 圆形进度指示器的输出，如下面的屏幕截图所示

有时您想要创建一个确定型圆形进度条，以显示完成任务需要多长时间。在这种情况下，我们可以模拟一个需要时间才能完成任务的下载，并更新 CircularProgressIndicator 的值，如下所示

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: CircularProgressIndicatorApp(),
    );
  }
}

class CircularProgressIndicatorApp extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return CircularProgressIndicatorAppState();
  }
}

class CircularProgressIndicatorAppState extends State<CircularProgressIndicatorApp>{
  bool _loading;
  double _progressValue;

  @override
  void initState() {
    super.initState();
    _loading = false;
    _progressValue = 0.0;
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Flutter Circular Progress Bar"),
      ),
      body: Center(
        child: Container(
          padding: EdgeInsets.all(14.0),
          child: _loading
              ? Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              CircularProgressIndicator(
                strokeWidth: 10,
                backgroundColor: Colors.yellow,
                valueColor: new AlwaysStoppedAnimation<Color>(Colors.red),
                value: _progressValue,
              ),
              Text('${(_progressValue * 100).round()}%'),
            ],
          )
              : Text("Press button for downloading", style: TextStyle(fontSize: 25)),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            _loading = !_loading;
            _updateProgress();
          });
        },
        child: Icon(Icons.cloud_download),
      ),
    );
  }
  // this function updates the progress value
  void _updateProgress() {
    const oneSec = const Duration(seconds: 1);
    new Timer.periodic(oneSec, (Timer t) {
      setState(() {
        _progressValue += 0.2;
        // we "finish" downloading here
        if (_progressValue.toStringAsFixed(1) == '1.0') {
          _loading = false;
          t.cancel();
          return;
        }
      });
    });
  }
}

输出

现在，在您的 IDE 中运行该应用程序。当我们按下按钮时，它会显示当时已完成多少进度，如下面的屏幕截图所示

下一个主题Flutter Snackbar

← 上一个下一个 →

Flutter 进度条

LinearProgressIndicator（线性进度指示器）

性质

示例

CircularProgressIndicator（圆形进度指示器）

示例

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

Flutter 教程

Dart 编程

Flutter 基础

Flutter 小部件

Flutter 路由

高级概念

差异

面试题

Flutter 进度条

LinearProgressIndicator（线性进度指示器）

性质

示例

CircularProgressIndicator（圆形进度指示器）

示例

相关帖子

Flutter 按钮

Flutter Snackbar

Flutter 日历

Flutter 复选框

Flutter Stack

Flutter 表格

Flutter 开关

Flutter 弹窗

Flutter 列表

Flutter 单选按钮

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器