0

I'm trying to pull an image from a link with a redirect with Flutter. I use dio for this.

Enter https://secure.gravatar.com/avatar/37ae806a1e430886229d45923d8414d4?s=64&d=https%3A%2F%2Fshiftdelete.net%2Fwp-content%2Fthemes%2Fshiftdelete%2Fassets%2Fimg%2Favatar.png&r=g It redirects to i2.wp.com/shiftdelete.net/wp-content/themes/shiftdelete/assets/img/avatar.png?ssl=1. Therefore, the code below returns a Failed host lookup error and the application freezes.

class WordpressAPI {
  // ...
    static Future<AuthorModel> fetchAuthorInformation(int id) async {
    AuthorModel authorModel;
    try {
      var link =
          'https://secure.gravatar.com/avatar/37ae806a1e430886229d45923d8414d4?s=64&d=https%3A%2F%2Fshiftdelete.net%2Fwp-content%2Fthemes%2Fshiftdelete%2Fassets%2Fimg%2Favatar.png&r=g';
      final imageResponse = await dio.get(
        link,
        options: Options(
          followRedirects: true,
        ),
      );
      print(imageResponse.realUri.toString()); // https://i2.wp.com/shiftdelete.net/wp-content/themes/shiftdelete/assets/img/avatar.png?ssl=1

      authorModel = AuthorModel(
        id: id,
        name: 'name',
        image: imageResponse.realUri.toString(), // https://i2.wp.com/shiftdelete.net/wp-content/themes/shiftdelete/assets/img/avatar.png?ssl=1
      );
    } on DioException catch (e) {
      if (e.response!.statusCode == 404) {
        print(e.response!.statusCode);
      } else {
        print(e.message);
      }
    }
    authorModel = AuthorModel(
      id: id,
      name: 'name',
      image: GetImageURL.authorDefaultAvatar,
    );
    return authorModel;
  }
  // ...
}

Error message

When I do Contuniue (F5) over VSC, the redirected link is printed to the console. This is so weird. In case of any error I put a default profile photo but it still crashes and the app freezes.

Why am I encountering this error? How can I solve it? Thanks in advance for your help.

I tried catching error with try-catch but it doesn't work. It gives the error in final imageResponse = await dio.get(link, options: Options(followRedirects: true,),); code.

  • probably this is your solution : https://stackoverflow.com/a/66815670/22363879 – burakcetn Aug 16 '23 at 09:42
  • Also as an another approach, you can try set the followredirects to false and try to get the redirect url and use it in a NetworkImage. Redirect urls comes in response's headers with 'location' key generally. – burakcetn Aug 16 '23 at 09:45
  • @burakcetn hello, it's not working :( – Burak Soyman Aug 16 '23 at 10:09

1 Answers1

-1

Here's how you can modify your code to use an async function and a separate compute function to perform the network request in the background:

1- Import the compute function from the flutter/foundation.dart library.

import 'package:flutter/foundation.dart';

2- Define a function to perform the Dio request. This function will be executed in the background using the compute function.

Future<AuthorModel> fetchAuthorInformationBackground(int id) async {
  try {
    var link = 'https://secure.gravatar.com/avatar/37ae806a1e430886229d45923d8414d4?s=64&d=https%3A%2F%2Fshiftdelete.net%2Fwp-content%2Fthemes%2Fshiftdelete%2Fassets%2Fimg%2Favatar.png&r=g';
    final imageResponse = await dio.get(
      link,
      options: Options(
        followRedirects: true,
      ),
    );

    if (imageResponse != null && imageResponse.data != null) {
      print(imageResponse.realUri.toString());

      return AuthorModel(
        id: id,
        name: 'name',
        image: imageResponse.realUri.toString(),
      );
    }
  } on DioError catch (e) {
    if (e.response?.statusCode == 404) {
      print(e.response!.statusCode);
    } else {
      print(e.message);
    }
  }

  return AuthorModel(
    id: id,
    name: 'name',
    image: GetImageURL.authorDefaultAvatar,
  );
}

3- Use the compute function to execute the background function.

static Future<AuthorModel> fetchAuthorInformation(int id) async {
  return compute(fetchAuthorInformationBackground, id);
}

By using the compute function, you're ensuring that the Dio request is performed on a separate background isolate, which prevents it from freezing your UI.

MobileDev
  • 214
  • 7