How to load images from api url in flutter?

[Amena Deeb]

Dear flutter developers,

Im building a flutter app similar to instagram, i need to load the images of the user's profile picture and posts from the api where my backend is based on .net core c#.

I have already declared a function to retrieve the path of the user profile picture in .net core:

  [HttpGet("{id}", Name = "Get")]

        public async Task<ActionResult<string>> GetAsync(string id)

        {

            ApplicationUser user = _dbContext.Users.OfType<ApplicationUser>().FirstOrDefault(x => x.Id == id);

            if (user == null)

                return BadRequest();

            return Ok(user.ProfilePicture.ToString());

        }

and this is my api function in flutter to retrieve the path of the image:

    Future<String> getUsers() async {

    final response = await http.get("http://10.0.2.2:8070/api/File/07bb2a17-7cd5-471b-973a-4b77d239b6c3");

    if (response.statusCode == 200) {

      path=response.body.toString();

      x=new File(path);

     // print(response.body);

      return response.body;

    } else {

      print(response.statusCode);

      // If that call was not successful, throw an error.

      throw Exception('Failed to load post');

    }

    }

When im trying to load the path received from the wwwroot directory using this technique: (path is like : D:\Xperience..)

  

     Container(

     height: 100.0,

     width: 100.0,

     decoration: BoxDecoration(

     shape: BoxShape.circle,

     image: new FileImage(x),

     fit: BoxFit.cover,

     ), ),

im getting the following error :(OS Error: No such file or directory, errno = 2)

What's the correct way to load user posts and images from api? 

Ive been told to use Image.network but nothing is being displayed when i provide the response path in it.

Any help would be appreciated.

[Shafqat Nadeem]

ClipOval(

                          child: Image.network(urltoimg),

                        ),

the code above might help you. just try it.

[Shafqat Nadeem]

just try to make it simple,

declare a future methord to load the api url , 

Map data;

String imgurl;

Future image_download_method() async {

http.Response image_url_response = await http.get("http://url-to-image");

data = json.decode(image_url_response.body);

setState(){

imgurl = data;

}

} 

@override

init () {

super.initiate();

//todo something here

image_download_method() ;

}

[bipin tripathi]

use cached_network_image plugin and widget below for profile picture

ClipOval(
  child: CachedNetworkImage(
    height: 30,
    width: 30,
    imageUrl: imageurl,
    fadeInCurve: Curves.fastOutSlowIn,
    placeholder: (context, url) => SizedBox(
      height: 30,
      width: 30,
      child: CircularProgressIndicator(
        strokeWidth: 1,
      ),
    ),
    errorWidget: (context, url, error) => Container(
      color: Colors.black87,
      width: 30,
      height: 30,
      child: Icon(
        MdiIcons.face,
        color: Colors.white30,
      ),
    ),
  ),
)

and your async function goes somewhat like this

void fetchImage()  async{

 var _imageurl = awai t  //your network call

 setState((){

 imageurl = _imageurl

 });