Как сохранить и отобразить изображения, обслуживаемые телами ответов REST API во Flutter?

Question

У меня есть REST API, который обслуживает изображение в теле ответа при выполнении запроса GET к его URL. Пример ответа на Postman выглядит следующим образом: Заголовки в ответе следующие:

Date →Fri, 24 Apr 2020 17:32:51 GMT
Server →WSGIServer/0.2 CPython/3.6.9
Content-Type →image/jpeg
Vary →Accept, Cookie
Allow →GET, POST, HEAD, OPTIONS
X-Frame-Options →DENY
Content-Length →161076
X-Content-Type-Options →nosniff

Я попытался сделать GET-запрос к этому API, используя код флаттера и затем напечатайте содержимое тела в ответе (просто чтобы посмотреть, как выглядит тело ответа. Я не уверен, что это правильный способ сделать это) со следующим кодом:

Future<void> getImage() async {
    Directory directory = await getApplicationDocumentsDirectory();
    String filePath = "${directory.path}/loginCreds.txt";

    Map user_credentials = await this.getUserCreds(); //getUserCreds is another function in the same class
    String auth_token = user_credentials['auth_token'];

    Response res = await get(
      "http://10.0.2.2:8000/usermgmt/profile/picture/",
      headers: {
        HttpHeaders.authorizationHeader: "Token $auth_token",
      },
    );
    print('\n\n\n Image Response body');
    print(res.body);
    print("\n\n\n");
  }

This дал следующий вывод:

I/flutter (11120): 
I/flutter (11120): 
I/flutter (11120): 
I/flutter (11120):  Image Response body:
I/flutter (11120): ÿØÿà
I/flutter (11120): 
I/flutter (11120): 
I/flutter (11120): 

Как получить изображение из ответа на запрос GET и установить его в качестве изображения для CircleAvatar в build() (используя setState() в функции getImage() в приведенном выше фрагменте кода), а также сохранить его в файловой системе?

Answer 1

ИМХО, вы используете неправильный подход.

У Flutter уже есть несколько способов получить изображение по URL. Для вашего CircleAvatar вам просто нужно сделать:

CircleAvatar(
  backgroundImage: NetworkImage(
    "http://10.0.2.2:8000/usr/profile/picture",
     headers: {
       "authorization": "Bearer $token",
       // Other headers if wanted
     },
  ),
)

Теперь загрузка и сохранение элементов на диске - это другое дело.

• Для простого решения я могу порекомендовать вам этот плагин image_downloader
• Для решения с жестким кодированием (с использованием пакета path_provider ):

imageDownload(String url) async {
    Response response = await get(url);
    var documentDirectory = await getApplicationDocumentsDirectory();
    var parent = documentDirectory.path + "/images";
    var filePathAndName = "$parent/avatar.jpg"; // Build your image path here
    await Directory(parent).create(recursive: true); // Make sure directories exist
    File file2 = new File(filePathAndName);
    file2.writeAsBytesSync(response.bodyBytes); // Use bodyBytes instead
  }

Надеюсь, это поможет!

Answer 2

Я не знаю, что происходит с вашим вызовом API, но вы должны использовать виджет Image.network, который является более простым

Image.network('http://10.0.2.2:8000/usr/profile/picture')