如何在加载数据之前在 flutter 中显示进度条

Question

I have a request function and I want to show a progress bar before loading data but idk how to do that. can someone show me an example?

Answer 1

You can implement flutter_easyloading package, https://pub.dev/packages/flutter_easyloading

Answer 2

for the progress widget is self you can use [CircularProgressIndicator] https://api.flutter.dev/flutter/material/CircularProgressIndicator-class.html )

for managing the state show loading -> then the actual data -> in case of failure show the error message and stop loading

this can be achieved throw many different ways 1- the easies one 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,
            ),
          );
        },
      );

or you can use any state management you want

• bloc (example)[https://bloclibrary.dev/#/flutterweathertutorial]

Answer 3

This code calls your function after running the linear progress indicator for a specified time.
The script makes use of no external libraries

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
  }
}

The performFunction() method can be used to load your data
Set the duration of the linear progress indicator by setting the delay in the checkIndicator() method.