如何在加载数据之前在颤动中显示进度条答案

【问题标题】：How to show progress bar in flutter before loading data如何在加载数据之前在颤动中显示进度条
【发布时间】：2022-01-02 15:44:19
【问题描述】：

我有一个请求功能，我想在加载数据之前显示一个进度条，但我不知道该怎么做。谁能给我举个例子？

【问题讨论】：

这能回答你的问题吗？ How to work with progress indicator in flutter?
你的情况是什么功能？

标签： android flutter dart progress

【解决方案1】：

此代码在线性进度指示器运行指定时间后调用您的函数。
该脚本不使用外部库

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


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

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

class _ProgressBarCallState extends State<ProgressBarCall> {
  double _value = 0;
  @override
  Widget build(BuildContext context) {
    checkIndicator(delay: 2);
    return Scaffold(
      body: Column(
        children: [
          LinearProgressIndicator(
                      backgroundColor: Colors.grey,
                      color: Colors.green,
                      minHeight: 5,
                      value: _value,
                    ),
          Expanded(
            child: Container(child: Text("Perform function after loading"),),
            
          ),
        ],
      ),
    );
  }

  void checkIndicator({delay = 2}){
    new Timer.periodic(
        Duration(milliseconds: delay*100),
            (Timer timer){
          setState(() {
            if(_value == 1) {
              timer.cancel();
              performFunction();
            }
            else {
              _value = _value + 0.1;
            }
          });
        }
    );
  }

  void performFunction(){
    //call your function after the loading
  }
}

performFunction() 方法可用于加载数据
通过在 checkIndicator() 方法中设置延迟来设置线性进度指示器的持续时间。

【讨论】：

【解决方案2】：

对于进度小部件是自我，您可以使用 [CircularProgressIndicator] https://api.flutter.dev/flutter/material/CircularProgressIndicator-class.html)

用于管理状态显示加载 -> 然后是实际数据 -> 在失败的情况下显示错误消息并停止加载

这可以通过许多不同的方式来实现 1- 最简单的FutureBuilder

FutureBuilder<String>(
        future: _calculation, // a previously-obtained Future<String> or null
        builder: (BuildContext context, AsyncSnapshot<String> snapshot) {
          List<Widget> children;
          if (snapshot.hasData) {
            children = <Widget>[
              const Icon(
                Icons.check_circle_outline,
                color: Colors.green,
                size: 60,
              ),
              Padding(
                padding: const EdgeInsets.only(top: 16),
                child: Text('Result: ${snapshot.data}'),
              )
            ];
          } else if (snapshot.hasError) {
            children = <Widget>[
              const Icon(
                Icons.error_outline,
                color: Colors.red,
                size: 60,
              ),
              Padding(
                padding: const EdgeInsets.only(top: 16),
                child: Text('Error: ${snapshot.error}'),
              )
            ];
          } else {
            children = const <Widget>[
              SizedBox(
                child: CircularProgressIndicator(),
                width: 60,
                height: 60,
              ),
              Padding(
                padding: EdgeInsets.only(top: 16),
                child: Text('Awaiting result...'),
              )
            ];
          }
          return Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: children,
            ),
          );
        },
      );

或者你可以使用任何你想要的状态管理

bloc（示例）[https://bloclibrary.dev/#/flutterweathertutorial]

【讨论】：

【解决方案3】：

你可以实现flutter_easyloading包，https://pub.dev/packages/flutter_easyloading

【讨论】：