Flutter: cómo obtener el progreso de carga/descarga para solicitudes http

Agradeceríamos tu apoyo para compartir nuestros posts acerca de las ciencias informáticas.

Solución:

La forma en que ya estás usando Stream significa que no está leyendo todo el archivo en la memoria. Se está leyendo como, probablemente, fragmentos de 64k.

Podría interceptar la transmisión entre el productor (Archivo) y el consumidor (HttpClient) con un StreamTransformer, así:

  int byteCount = 0;
  Stream> stream2 = stream.transform(
    new StreamTransformer.fromHandlers(
      handleData: (data, sink) 
        byteCount += data.length;
        print(byteCount);
        sink.add(data);
      ,
      handleError: (error, stack, sink) ,
      handleDone: (sink) 
        sink.close();
      ,
    ),
  );
....
  await request.addStream(stream2);

Debería ver byteCount incrementando en 64k trozos.

Captura de pantalla:

---

Esta solución

1. Descarga una imagen del servidor.
2. Muestra el progreso de la descarga.
3. Después de la descarga, la imagen se guarda en el almacenamiento del dispositivo.

---

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

Pruebe la biblioteca dio. los onSendProgress la devolución de llamada sería útil.

ejemplo:

response = await dio.post(
  "http://www.example.com",
  data: data,
  onSendProgress: (int sent, int total) 
    print("$sent $total");
  ,
);

Referencia: https://github.com/flutterchina/dio/issues/103

Sección de Reseñas y Valoraciones

Si crees que ha resultado provechoso este artículo, agradeceríamos que lo compartas con más seniors y nos ayudes a extender esta información.

---

---

Utiliza Nuestro Buscador