Flutter – 加载进度指示器按钮

在本文中，我们将了解Flutter中的Loading Progress Indicator Button 。

什么是加载进度指示器按钮？

进度指示器通知正在使用该应用程序的客户和用户正在进行的过程，例如加载应用程序、提交表单或在线上传文档。随着加载成功完成，我们将获得成功状态。

让我们实现加载进度指示器按钮 -

执行：

按照以下 s6es 在Flutter中实现 Loading Progress Indicator Button：

第 1 步：创建一个新项目，然后我们创建了一个有状态的小部件。我们创建了一个有状态的小部件，因为我们的应用程序不是静态的，每次我们构建或运行应用程序时都会发生新的活动。

Dart

import 'package:flutter/material.dart';
  
void main() {
  runApp(const MyApp());
}
  
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
      home: const MyHomePage(),
    );
  }
}
  
class MyHomePage extends StatefulWidget {
  const MyHomePage({
    Key? key,
  }) : super(key: key);
  @override
  State createState() => _MyHomePageState();
}

第 2 步：在这一步中，我们创建了一个背景颜色为绿色、文本为白色的Appbar 。然后我们初始化了一个bool 类型的变量。

Dart

class _MyHomePageState extends State {
  
  bool isLoading = false;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.green,
        title: const Text('GeeksforGeeks',style: TextStyle(color: Colors.white),),
        centerTitle: true,
      ),

Step3 – 在我们的应用程序主体中，我们创建了一个提升按钮。提升按钮位于容器内，我们为提升按钮提供了padding 、 width和height 。我们还为我们的按钮赋予了颜色属性。现在，当我们单击此按钮时，我们将看到isLoading的值变为 true。在按钮文本“Loading...”中出现圆形进度指示器，并在future.delayed的帮助下加载将在3 秒后停止，然后isLoading的值将变为 false。我们使用主轴对齐来居中，以使加载按钮保持居中。随着加载在 3 秒内完成，我们将看到文本“提交”显示在屏幕上。

Dart

body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Container(
              padding: const EdgeInsets.only(left: 10, right: 10),
              width: MediaQuery.of(context).size.width,
              height: 60,
              child: ElevatedButton(
                style: ElevatedButton.styleFrom(
                primary: Colors.green
                ),
                onPressed: () {
                setState(() {
                  isLoading = true;
                });
                Future.delayed(const Duration(seconds: 3), (){
                    setState(() {
                  isLoading = false;
                });
                }
                );
              }, child:  isLoading? Row(
                mainAxisAlignment: MainAxisAlignment.center,
                    
                // ignore: prefer_const_literals_to_create_immutables
                children: [
                 const Text('Loading...', style: TextStyle(fontSize: 20),),
                 const SizedBox(width: 10,),
                  const CircularProgressIndicator(color: Colors.white,),
                ],
              ) : const Text('Submit'),
                
              )
              )
          ],
        ),
      ),
    );
  }
}

完整源代码：

Dart

import 'package:flutter/material.dart';
  
void main() {
  runApp(const MyApp());
}
  
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
      home: const MyHomePage(),
    );
  }
}
  
class MyHomePage extends StatefulWidget {
  const MyHomePage({
    Key? key,
  }) : super(key: key);
  @override
  State createState() => _MyHomePageState();
}
  
class _MyHomePageState extends State {
  
  bool isLoading = false;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
  
      // created an Appbar with GeeksforGeeks written on it.
      appBar: AppBar(
        backgroundColor: Colors.green,
        title: const Text('GeeksforGeeks',style: TextStyle(color: Colors.white),),
        centerTitle: true,
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Container(
              padding: const EdgeInsets.only(left: 10, right: 10),
              width: MediaQuery.of(context).size.width,
              height: 60,
  
              // elevated button created and given style
              // and decoration properties
              child: ElevatedButton(
                style: ElevatedButton.styleFrom(
                primary: Colors.green
                ),
                onPressed: () {
                setState(() {
                  isLoading = true;
                });
  
                // we had used future delayed to stop loading after
                // 3 seconds and show text "submit" on the screen.
                Future.delayed(const Duration(seconds: 3), (){
                    setState(() {
                  isLoading = false;
                });
                }
                );
              }, child:  isLoading? Row(
                mainAxisAlignment: MainAxisAlignment.center,
                  
                // as elevated button gets clicked we will see text"Loading..."
                // on the screen with circular progress indicator white in color.
                //as loading gets stopped "Submit" will be displayed
                children: const [
                  Text('Loading...', style: TextStyle(fontSize: 20),),
                  SizedBox(width: 10,),
                   CircularProgressIndicator(color: Colors.white,),
                ],
              ) : const Text('Submit'),
                
              )
              )
          ],
        ),
      ),
    );
  }
}

输出：