当我按下下载按钮时如何显示带有 CircularProgressIndicator 和下载状态的弹出窗口答案

【问题标题】：How to Display Pop Up with CircularProgressIndicator and Download Status when I press Download Button当我按下下载按钮时如何显示带有 CircularProgressIndicator 和下载状态的弹出窗口
【发布时间】：2020-09-12 03:46:10
【问题描述】：

我正在尝试创建一个可以下载图像的应用程序。当我按下下载按钮时，我想显示一个带有 CircularProgressIndicator 和下载状态的弹出窗口。每当我按下下载按钮时，图像都会在后台下载，但它不会在屏幕上显示任何内容。

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,
           ),
         )
       ],
     )),
   );
 }
}

我想在按下按钮时显示这个容器

  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'),
                     ],
                   ),
                 ),
               );

【问题讨论】：

标签： flutter dart flutter-layout dart-pub

【解决方案1】：

您可以使用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!"),
                ]
             ),
          ],
        ),
      );
    }
  );
}

这里GlobalKey用于Show或hide创建的对话框。

要调用这个简单的初始化类中的GlobalKey 为GlobalKey<State> _dialogKey = GlobalKey<State>();。

然后您可以将对话框显示为：

showLoadingDialog(context, _dialogKey);

当你想要它隐藏时，只需调用：

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

希望这会有所帮助。

【讨论】：