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

Posted 2023-02-23

【中文标题】当我按下下载按钮时如何显示带有 CircularProgressIndicator 和下载状态的弹出窗口

【英文标题】：How to Display Pop Up with CircularProgressIndicator and Download Status when I press Download Button

【发布时间】：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'),
                     ],
                   ),
                 ),
               );

【参考方案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();

希望这会有所帮助。