image asset

Quick Tip – How to use Image assets and Image network in Flutter

Basics /

What is an Image asset in Flutter

Flutter Image.assets is a widget that displays an image from a file that is included in your Flutter app’s assets.

The assets are a directory or folder in your Flutter project that contains all the static files, such as images, fonts, and other media, that you want to include in your app. When you build your app, these files are copied into the app’s package, which is a file that can be installed on a device.

To use the Image.assets widget, you need to specify the path to the image file in the assets directory. For example:

Image.asset('assets/images/my_image.png')

This will display the image file located at assets/images/my_image.png in your Flutter app.

The Image.assets widget is useful for displaying static images that are bundled with your app, as opposed to images that are loaded from a network location or generated dynamically. It is important to note that the Image.assets widget does not automatically resize the image to fit the available space. If you want to control the size of the image, you can wrap it in a parent widget, such as a Container or a FittedBox, and set the size constraints on that widget.

What is an Image network in Flutter

n Flutter, the Image.network widget is a widget that displays an image from a URL. This is useful for displaying images that are hosted on a server or accessed through the internet.

To use the Image.network widget, you need to provide the URL of the image as a string. For example:

Image.network('https://example.com/images/my_image.png')

This will display the image located at the URL https://example.com/images/my_image.png in your Flutter app.

The Image.network widget is useful for displaying images that are not bundled with your app, and it is especially useful when you want to display images that are stored on a server or accessed through a network location. It is important to note that the Image.network widget does not automatically resize the image to fit the available space. If you want to control the size of the image, you can wrap it in a parent widget, such as a Container or a FittedBox, and set the size constraints on that widget.

How to use the Image asset in Flutter

To use the Image.assets widget in Flutter, you first need to include the image file in your Flutter app’s assets. To do this, you need to add a reference to the image file in the pubspec.yaml file, which is located in the root directory of your Flutter project.

In the pubspec.yaml file, you can specify the assets that you want to include in your Flutter app by adding a flutter section and then a assets subsection. The assets subsection should contain a list of file paths, each of which points to an asset that you want to include in your app.

For example, if you want to include an image file located at assets/images/FlutterAssets_logo_BG.jpg, you can add the following to your pubspec.yaml file:

flutter:
  assets:
    - assets/images/my_icon.png
    - assets/images/FlutterAssets_logo_BG.jpg

To include all assets under a directory, specify the directory name with the / character at the end:

flutter:
  assets:
    - assets/
    - assets/subdirectory/

Once you have added the reference to the image file in the pubspec.yaml file, you can use the Image.assets widget to display the image in your Flutter app. To do this, you need to specify the path to the image file in the assets directory. For example:

            Container(
              height: 150,
              child: Image.asset('assets/images/FlutterAssets_logo_BG.jpg')
            ),

//or

          SizedBox(
              height: 150,
              child: Image.asset('assets/images/FlutterAssets_logo_BG.jpg')
            ),

This will display the image file located at assets/images/FlutterAssets_logo_BG.jpg in your Flutter app.

image asset

How to use Image network in Flutter

To use the Image.network widget in Flutter, you need to provide the URL of the image that you want to display as a string. For example:

Image.network('https://example.com/images/my_image.png')

In this example, I shortened the link to the image with TinyURL, but it still works. The effect is exactly as above.

Container(
                height: 150,
                child: Image.network('https://tinyurl.com/flutterassets')
            ),

//or

SizedBox(
                height: 150,
                child: Image.network('https://tinyurl.com/flutterassets')
            ),

You can customize the appearance of the Image.network widget by setting various properties. For example, you can use the fit property to specify how the image should be resized to fit the available space, and you can use the color and colorBlendMode properties to apply a colour filter to the image.

Here is an example of how you can use some of the available properties to customize the appearance of the Image.network widget:

Container(
    height: 150,
    child: Image.network(
      'https://tinyurl.com/flutterassets',
      fit: BoxFit.cover,
      color: Colors.black54,
      colorBlendMode: BlendMode.darken,
    )
),

This will display the image located at the URL https://tinyurl.com/flutterassets in your Flutter app, and it will resize the image to fit the available space while maintaining the aspect ratio, apply a black colour filter with 50% opacity, and blend the filter using the darken blend mode.

You can read more about Images in Flutter in this post: Flutter Basics – How to use an image in Flutter

Related Posts