Flutter: How to get upload / download progress for http requests

Question

I am writing an app that uploads an image to a server, and instead of just showing a spinner, I\'d love to be able to get progress on the status of that upload.

Ad

Answer 1

Screenshot:

---

This solution

1. Downloads an image from server.
2. Shows downloading progress.
3. After download, the image is saved to device storage.

---

import 'package:http/http.dart' as http;

int _total = 0, _received = 0;
http.StreamedResponse _response;
File _image;
List _bytes = [];

Future _downloadImage() async {
  _response = await http.Client().send(http.Request('GET', Uri.parse("https://upload.wikimedia.org/wikipedia/commons/f/ff/Pizigani_1367_Chart_10MB.jpg")));
  _total = _response.contentLength;

  _response.stream.listen((value) {
    setState(() {
      _bytes.addAll(value);
      _received += value.length;
    });
  }).onDone(() async {
    final file = File("${(await getApplicationDocumentsDirectory()).path}/image.png");
    await file.writeAsBytes(_bytes);
    setState(() {
      _image = file;
    });
  });
}

@override
Widget build(BuildContext context) {
  return Scaffold(
    floatingActionButton: FloatingActionButton.extended(
      label: Text("${_received ~/ 1024}/${_total ~/ 1024} KB"),
      icon: Icon(Icons.file_download),
      onPressed: _downloadImage,
    ),
    body: Padding(
      padding: const EdgeInsets.all(20.0),
      child: Center(
        child: SizedBox.fromSize(
          size: Size(400, 300),
          child: _image == null ? Placeholder() : Image.file(_image, fit: BoxFit.fill),
        ),
      ),
    ),
  );
}