Flutter 圆形和线形ProgressIndicator

什么是Flutter中的ProgressIndicator

ProgressIndicator是用来显示在我们的android应用程序中正在进行的特定任务的当前进度。如果我们正在从互联网上加载一些数据或进行一个API调用。在这种情况下，为了处理加载任务，我们在应用程序中显示ProgressIndicator，告知用户数据正在加载。有两种类型的ProgressIndicator，我们可以在我们的应用程序中显示。

线性ProgressIndicator – 该指示器用于显示一个线性进度条，显示一个任务的当前进度。
循环ProgressIndicator – 该指示器就像一个循环进度条，用于显示我们安卓应用程序中特定任务的进度。

循环和线性ProgressIndicator的实现

我们将创建一个简单的应用程序，用于在我们的安卓应用程序中显示循环和线性ProgressIndicator。我们将按照一步一步的指南来实现android应用程序中的敬酒信息。

第1步：在Android Studio中创建一个新的Flutter项目

导航到Android studio，如下图所示。在下面的屏幕上点击新项目来创建一个新的Flutter项目。

Flutter中的圆形和线形ProgressIndicator

点击新项目后，您将看到下面的屏幕。

Flutter中的圆形和线形ProgressIndicator

在这个屏幕上，你必须选择Flutter应用程序，然后点击下一步，你会看到下面的屏幕。

Flutter中的圆形和线形ProgressIndicator

在这个屏幕上，您必须指定项目名称，然后简单地点击 “下一步”。

第2步：使用main.dart文件

导航到你的项目>lib>main.dart文件，并在其中添加以下代码。在代码中添加注释，以了解详细情况。

import 'package:flutter/material.dart';

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

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

   @override
   Widget build(BuildContext context) {
      return MaterialApp(
         // on below line adding title for our application.
         title: 'Flutter Demo',
         // on below line specifying theme data for our application
         theme: ThemeData(
            primarySwatch: Colors.blue,
         ),
         // on below line calling our home page.
         home: MyHomePage(),
         // on below line disabling our debug check mode banner
         debugShowCheckedModeBanner: false,
      );
   }
}

class MyHomePage extends StatefulWidget {
   MyHomePage({Key? key}) : super(key: key);

   @override
   _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage>
with SingleTickerProviderStateMixin {

   @override
   Widget build(BuildContext context) {
      return Scaffold(
         // on below line creating app bar for our app
         appBar: AppBar(
            // specifying text in our app bar
            title: Text("Android Application"),
         ),
         // adding padding for it.
         body: Padding(
            padding: const EdgeInsets.all(16.0),
            // wrapping our column to center of screen.
            child: Center(
               child: Column(
                  // aligning column on below line.
                  crossAxisAlignment: CrossAxisAlignment.center,
                  mainAxisAlignment: MainAxisAlignment.center,
                  // specifying main axis size on below line.
                  mainAxisSize: MainAxisSize.min,
                  // creating childrens to be displayed on below line.
                  children: const <Widget>[
                     // creating a text for circular animation on below line.
                     Text(
                        "Progress Indicator in Flutter",
                        // specifying text alignment, max lines, style for our text
                        textAlign: TextAlign.center,
                        maxLines: 1,
                        style: TextStyle(
                           color: Colors.black,
                           fontSize: 20.0,
                           fontWeight: FontWeight.bold),
                     ),
                     // creating a sized box on below line.
                     SizedBox(
                        height: 30,
                     ),

                     Text(
                        "Linear Progress Indicator",
                        // specifying text alignment, max lines, style for our text
                        textAlign: TextAlign.center,
                        maxLines: 1,
                        style: TextStyle(
                           color: Colors.black,
                           fontSize: 20.0,
                           fontWeight: FontWeight.bold),
                     ),

                     SizedBox(
                        height: 20,
                     ),

                     // creating a linear progress bar on below line.
                     LinearProgressIndicator(),
                     // on below line creating a sized box
                     SizedBox(
                        height: 40,
                     ),
                     Text(
                        "Circular Progress Indicator",
                        // specifying text alignment, max lines, style for our text
                        textAlign: TextAlign.center,
                        maxLines: 1,
                        style: TextStyle(
                           color: Colors.black,
                           fontSize: 20.0,
                           fontWeight: FontWeight.bold),
                     ),
                     // on below line creating a sized box
                     SizedBox(
                        height: 20,
                     ),
                     // creating a circular progress bar on below line.
                     CircularProgressIndicator(),
                  ],
               ),
            ),
         ),
      );
   }
}

解释 - 在上面的代码中，我们可以看到主方法，其中我们正在调用我们的MyApp类，我们正在创建一个无状态的widget。在这个无状态部件中，我们正在创建一个构建方法，在这个方法中我们将返回我们的材料应用程序。在这个material app中，我们指定了app的标题，app的主题，以及我们必须显示的主页，并将debug check mode banner设置为false。

之后，我们创建一个主页状态方法，它将扩展主页的状态。然后我们创建一个构建方法，在这个方法中我们指定我们的应用栏并为其添加标题。然后，我们为我们的屏幕从四面八方添加一个padding。然后，我们将我们的应用程序中的所有子程序添加到屏幕中央。在这里面，我们指定了一个列。在这一列中，我们将创建不同的孩子，这些孩子将以垂直方式排列。在这一列中，我们首先创建一个文本小部件来显示应用程序的标题。

之后，我们创建一个大小的盒子部件，在两个部件之间添加一个间隙。然后，我们再次创建一个文本小组件，在其中显示线性ProgressIndicator的文本。之后，我们指定一个大小的盒子，然后创建我们的线性ProgressIndicator。在创建这个线性ProgressIndicator后，我们再次指定一个大小的盒子，然后创建一个文本小组件来显示一个文本作为圆形ProgressIndicator。在这个小组件之后，我们正在创建一个大小的盒子，然后显示一个圆形ProgressIndicator。

添加上述代码后，现在我们只需点击顶部栏的绿色图标就可以在移动设备上运行我们的应用程序。

注意 - 确保你已经连接到你的真实设备或模拟器。

Flutter中的圆形和线形ProgressIndicator