How to Display Pop Up with CircularProgressIndicator and Download Status when I press Download Button

Question

I am trying to create a App Which Can download Images. I want to show a pop up with CircularProgressIndicator and Download Status when I press Download Button. Whenever I press Download Button The Image Gets downloaded in Background but It Do no Show Anything in the Screen.

import 'package:dio/dio.dart';
import 'package:flutter/material.dart';
import 'package:path_provider/path_provider.dart';

class HomePage extends StatefulWidget {
 @override
 _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
 final imgUrl =
     'https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80';
 bool downloading = false;
 var progressString = " ";

 @override
 void initState() {
   super.initState();
   downloadFile();
 }

 // Downloading image using Dio package
 Future<void> downloadFile() async {
   Dio dio = Dio();
   try {
     var dir = await getApplicationDocumentsDirectory();
     await dio.download(imgUrl, "${dir.path}/DownloadedImage.jpg",
         onReceiveProgress: (rec, total) {
       print("rec: $rec, total: $total");
       setState(() {
         downloading = true;
         progressString = ((rec / total) * 100).toStringAsFixed(0) + "%";
       });
     });
   } catch (e) {
     print(e);
   }

   setState(() {
     progressString = "Download Completed";
     downloading = false;
   });
 }

 @override
 Widget build(BuildContext context) {
   return Scaffold(
     body: Container(
         child: Column(
       mainAxisAlignment: MainAxisAlignment.center,
       children: <Widget>[
         Center(
           child: RaisedButton.icon(
             onPressed: () {
               downloadFile();
             },
             icon: Icon(Icons.file_download),
             label: Text('Download'),
             color: Colors.blueAccent,
           ),
         )
       ],
     )),
   );
 }
}

I want to Show this Container as when The Button is Pressed

  Container(
                 height: 120.0,
                 width: 200.0,
                 child: Card(
                   color: Colors.black54,
                   child: Column(
                     mainAxisAlignment: MainAxisAlignment.center,
                     children: <Widget>[
                       CircularProgressIndicator(),
                       SizedBox(
                         height: 10.0,
                       ),
                       Text('Downloading $progressString'),
                     ],
                   ),
                 ),
               );

Answer 1

You can display a a Popup Dialog using showDialog.

static Future showDialog(BuildContext context, GlobalKey _key) async   {
  return showLoadingDialog(
    context: context,
    barrierDismissible: false,
    builder: (BuildContext context){
      return SimpleDialog(
          key: _key,
          children: <Widget>[
            Center(
              child: Container(
                child: Row(
                children: <Widget>[
                  CircularProgressIndicator(),
                  SizedBox(
                    height:10,
                    width:10,
                  ),
                  Text("Please Wait!"),
                ]
             ),
          ],
        ),
      );
    }
  );
}

Here GlobalKey is used to Show or hide the dialog created.

To call this simple initialize a GlobalKey in the class as GlobalKey<State> _dialogKey = GlobalKey<State>();.

Then you can show the dialog as:

showLoadingDialog(context, _dialogKey);

And when you want it to hide, just call:

Navigator.of(_dialogKey.currentContext,rootNavigator: true).pop();

Hope this helps.