flutter弹出框设置上传下载进度显示

弹出框进度条显示

在flutter中通过showDialog添加用户上传下载窗体，并实时显示进度可以通过信息流StreamController实现进度的发布和消费，注意在这里只能在一个地方监听使用，这里使用?修饰延迟到使用的地方进行实现。

  StreamController<double>? _progressStreamController;
  
  Stream<double>? get _progressStream => _progressStreamController?.stream;

消息流消费

StreamBuilder<double>(
              stream: _progressStream,
              builder: (context, snapshot) {
                if (snapshot.hasData) {
                  return Column(
                      children: [
                        LinearProgressIndicator(value: snapshot.data!),
                        const SizedBox(height: 10),
                        Text('上传进度: ${(snapshot.data! * 100).toStringAsFixed(2)}%'),
                      ]
                  );
                } else {
                  return const Text('Loading...');
                }
              },
            ),

添加流信息

 _progressStreamController!.add(progress);

完整示例代码

Future<void> _showUploadDialog(BuildContext context) async {
    _textFieldController.text = 'http://192.168.2.83:8889';
    //使用的地方初始化
    _progressStreamController = StreamController<double>();

    return showDialog(
      context: context,
      builder: (context) {
        return AlertDialog(
          title: const Text('上传地址配置',
              style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold)),
          content: Column(mainAxisSize: MainAxisSize.min, children: [
            const SizedBox(height: 5),
            Align(
              alignment: Alignment.centerLeft,
              child: Row(children: [
                const Text('服务器地址:'),
                const SizedBox(width: 10), // 添加一些间距
                Expanded(
                  child: TextField(
                    controller: _textFieldController,
                    decoration: const InputDecoration(
                      hintText: "输入后端地址，如http://192.168.1.100:8080",
                    ),
                    onSubmitted: (value) async {},
                  ),
                ),
              ]),
            ),
            const SizedBox(height: 10),
            //流监听
            StreamBuilder<double>(
              stream: _progressStream,
              builder: (context, snapshot) {
                if (snapshot.hasData) {
                  return Column(
                      children: [
                        LinearProgressIndicator(value: snapshot.data!),
                        const SizedBox(height: 10),
                        Text('上传进度: ${(snapshot.data! * 100).toStringAsFixed(2)}%'),
                      ]
                  );
                } else {
                  return const Text('Loading...');
                }
              },
            ),
          ]),
          actions: <Widget>[
            TextButton(
              child: const Text('取消'),
              onPressed: () {
                Navigator.pop(context);
              },
            ),
            TextButton(
              child: const Text('确定'),
              onPressed: () async {
                //数据库路径
                String databasePath =
                    await DBUtil.getDatabasesPath(Constant.dbName);
                final file = File(databasePath);
                await uploadFile(file, _textFieldController.text, (progress) {
                  _progressStreamController!.add(progress);
                  if(progress == 1){
                    ToastUtils.success('上传成功！');
                  }
                });
                //提示上传完毕
                setState(() {});
                Navigator.pop(context);
              },
            ),
          ],
        );
      },
    );
  }