Afficher CircularProgressIndicator devant dans Flutter

Vous pouvez utiliser le widget Positioned dans le widget de Stack pour afficher CircularProgressIndicator devant tous les widgets comme ci-dessous.
Veuillez mettre des valeurs en fonction de votre convenance dans les quatre valeurs en bas, à gauche, à droite, en haut ...

         Positioned(
                bottom: ,
                left: ,
                right: , 
                top : ,
                child: Container(
                        child : CircularProgressIndicator()
                      )
                    ...
                   )

J'ai supprimé le code de Visiblity avec celui-ci. Ancien code

    return Scaffold(
      key: _scaffoldKey,
      body: Stack(
            children: <Widget>[
/////Some containers,child Widget etc/////////
     visible ? Container(
                            color: Colors.black.withOpacity(0.5),
                            child:  Center(
                            child:SizedBox(// Center(

                              child: CircularProgressIndicator(
                                strokeWidth: 4.0,
                          valueColor : AlwaysStoppedAnimation(Colors.white),
                              ),
                              height: 200.0,
                              width: 200.0,
                            ),
                           ), 
        )
                          : Container()

] //Widget
  ), //Stack
); //Scaffold

Nouveau code

 visible ? Container(
                        color: Colors.black.withOpacity(0.5),
                        child:  Center(
                        child:SizedBox(// Center(

                          child: CircularProgressIndicator(
                            strokeWidth: 4.0,
                      valueColor : AlwaysStoppedAnimation(Colors.white),
                          ),
                          height: 200.0,
                          width: 200.0,
                        ),
                       ), 
    )
                      : Container()

Et surtout, il doit appeler le premier widget.

 Visibility(

          child: Center(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              SizedBox(
                child: CircularProgressIndicator(
                  strokeWidth: 4.0,
                  valueColor : AlwaysStoppedAnimation(Colors.white),
                ),
                height: 200.0,
                width: 200.0,
              ),


            ],
          ),
        ),
          visible: visible, 
      ), 

Je ne suis pas sûr de l'avoir expliqué correctement ou non. Mais en bout de ligne, il ne devrait pas être à l'intérieur de l'autre widget enfant. Il doit être placé dans les premiers children: <Widget>[ pas à l'intérieur du fichier imbriqué.

La vraie signification de circularProgressIndicator est d'être exécuté pendant le chargement du processus sans laisser l'utilisateur l'interrompre.
Pour supprimer l'interruption par l'utilisateur entre les deux, il faut placer circularProgressIndicator dans une boîte de dialogue avec la propriété barrierDismissible: false .
Il faut créer cet indicateur de chargement en tant que widget réutilisable.
Vous pouvez créer une méthode comme ci-dessous et l'utiliser n'importe où sur l'écran sans définir dans l'écran. (cela ne nécessite pas non plus de pile.). La boîte de dialogue apparaîtra au centre de l'écran.

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

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Demo(),
    );
  }
}

class Demo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Circle Progress Indicator Demo"),
      ),
      body: Center(
        child: MaterialButton(
          child: Text("Press Me!"),
          onPressed: () => buildShowDialog(context),
        ),
      ),
    );
  }

  buildShowDialog(BuildContext context) {
    return showDialog(
        context: context,
        barrierDismissible: false,
        builder: (BuildContext context) {
          return Center(
            child: CircularProgressIndicator(),
          );
        });
  }
}

Pour référence : code de paiement ci-dessous:

buildShowDialog(BuildContext context) {
    return showDialog(
              context: context,
              barrierDismissible: false,
              builder: (BuildContext context) {
                return Center(
                  child: CircularProgressIndicator(),
                );
              });
  }

Production:

Pour tous ceux qui veulent utiliser un LoadingIndicator flexible partout et qui veulent superposer l'écran actuel, il suffit de créer un fichier .dart contenant:

Navigator.of(context).pop();

Ensuite, vous pouvez l'utiliser n'importe où en utilisant

buildLoading(context);

et le rejeter une fois le chargement terminé en utilisant

import 'package:flutter/material.dart';

buildLoading(BuildContext context) {
  return showDialog(
      context: context,
      barrierDismissible: false,
      builder: (BuildContext context) {
        return Center(
          child: CircularProgressIndicator(
            valueColor: AlwaysStoppedAnimation<Color>(Colors.blue),
          ),
        );
      });
}