Блог

Я работаю с библиотекой multipart_request 0.3.1 для загрузки изображений, у меня есть ответ в журнале консоли (прогресс от объекта ответа 50,51,52 и т. Д.), Он идеален

Как я могу показать анимированный виджет (текст, строку состояния или строку выполнения) со следующим значением «Загрузка: 10,11,12, ..,100, завершено»,

Я должен установить 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;
    });

  }
}
  

Вы можете скопировать вставить запустить полный код ниже
Я использую официальный пример для демонстрации этого случая
, который вы можете сделать 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()}";
      });
    });
  }
}