how to load Image in flutter

Today in this post we will learn to load images. Whenever we make an app, there is a need for images in it, if we are making something attractive then it is quite difficult to make it attractive without an image. In this, the youth look very attractive when the image gets separated, we will learn to implement images in our project in different ways.

Load Image via URL

When we have to load an image from a URL, we use image.network for that. We enter the URL and can set the width and height of the first image as per our requirement and can make the fit: boxFit.cover. So that the image will be displayed as per the height and width. If the image does not get loaded. If due to any reason we can display txt there also through errorbuilder.

Image.network(
            'https://kidlingoo.com/wp-content/uploads/flowers_name_in_english.jpg',
             width: 300,  // Set width
         height: 200, // Set height
         fit: BoxFit.cover,
         
            loadingBuilder: (context, child, loadingProgress) {
              if (loadingProgress == null) return child;
              return Center(
                child: CircularProgressIndicator(),
              );
            },
            errorBuilder: (context, error, stackTrace) {
              return Text("Failed to load image");
            },
          ),
          
          
  Output      

          
      

    
          
Load Image via assets          

Loading images from assets is a very simple process. To load images from assets, first create a directory named assets in your project, inside that create another directory named images and then you can upload your images there. Then set the path of assets in the pubspec.yaml file.

  
  
  
  
              Image.asset(
                "assets/images/logingimg.png",
                width: 250, // Aap chahein to size adjust kar sakte hain
                height: 150,
                fit: BoxFit.cover,
              ),
Output

Circle Image

Loading circle image Sometimes we need a circle image in our project, like while making a profile or creating a header in the side menu, then we often need a circle image there, otherwise we can use circle image in our projects in all the places. 

To create a circle image in Flutter we use the circle avatar, then set the radius and by giving the path of the background image assets, we can load our circle image. The code of the circle image is given below.

CircleAvatar(
                  radius: 40,
                  backgroundImage: AssetImage("assets/images/img_1.png"), // Direct image as background
                ),
                
           

Output