上载图像抖动时如何显示小部件（加载20％，30％）

Question

我正在使用multipart_request 0.3.1库上传图像，我在控制台日志中有响应（响应对象50、51、52等的进度），这是完美的

我该如何显示具有以下值“正在上传：10、11、12，... 100，完成”的动画小部件（文本或StatusBar或ProgressBar），

我应该将SetState设置为响应的值，但我不知道...谢谢您

这是我的代码

import 'dart:io';

import 'package:flutter/material.dart';

import 'package:image_picker/image_picker.dart';
import 'package:multipart_request/multipart_request.dart';

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  String imagePath = "";
  var showw = "";

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Plugin example app'),
        ),
        body: Center(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              FlatButton(
                child: Text("Pick an image"),
                onPressed: () async {
                  File imagen =
                      await ImagePicker.pickImage(source: ImageSource.gallery);
                  imagePath = imagen.path;
                },
              ),
              FlatButton(
                child: Text("Call multipart request"),
                onPressed: () {
                  sendRequest();
                },
              ),
              Text("Uploading: " + showw)
            ],
          ),
        ),
      ),
    );
  }

  sendRequest() {
    var request = MultipartRequest();

    request.setUrl("http://192.168.1.50/apiphp/api_imagenes.php");
    request.addFile("userImage[]", imagePath);

    Response response = request.send();

    response.onError = () {
      print("Error");
    };

    response.onComplete = (response) {
      print(response);
    };

    response.progress.listen((int progress) {
      print("progress from response object " + progress.toString());
      //var showw = progress.toString();
      //return showw;
    });

  }
}

Answer 1

您可以在下面复制粘贴运行完整代码
我用官方例子来演示这个案例
您可以在setState和response.onComplete中进行response.progress.listen
代码段

Text(showw),
...
response.onComplete = (response) {
      setState(() {
        showw = "Complete";
      });

      print(response);
    };

response.progress.listen((int progress) {
  print("progress from response object " + progress.toString());
  setState(() {
    showw = "Uploading ${progress.toString()}";
  });
});

工作演示

完整代码

import 'dart:io';

import 'package:flutter/material.dart';

import 'package:image_picker/image_picker.dart';
import 'package:multipart_request/multipart_request.dart';

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  String imagePath = "";
  String showw = "";

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Plugin example app'),
        ),
        body: Center(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              FlatButton(
                child: Text("Pick an image"),
                onPressed: () async {
                  File image =
                  await ImagePicker.pickImage(source: ImageSource.gallery);
                  imagePath = image.path;
                },
              ),
              FlatButton(
                child: Text("Call multipart request"),
                onPressed: () {
                  sendRequest();
                },
              ),
              Text(showw),
            ],
          ),
        ),
      ),
    );
  }

  void sendRequest() {
    var request = MultipartRequest();

    request.setUrl("https://b804ca15.ngrok.io/images");
    request.addFile("image", imagePath);

    Response response = request.send();

    response.onError = () {
      setState(() {
        showw = "Complete";
      });
    };

    response.onComplete = (response) {
      setState(() {
        showw = "Complete";
      });

      print(response);
    };

    response.progress.listen((int progress) {
      print("progress from response object " + progress.toString());
      setState(() {
        showw = "Uploading ${progress.toString()}";
      });
    });
  }
}