Image Asset Widget

Introduction of Image Asset Widget

In Flutter, there isn’t a specific “Image Asset” widget, but I assume you are referring to displaying an image using the Image asset widget. The Image.asset widget is commonly used to display images that are bundled with the app as assets.

Before start discussing about the Image Asset Widget, We should setup the Asset Image Widget Environment by editing the Pubspec file.

Pubspec Yaml

assets:
  - lib/img/

Below is an explanation of the Image asset widget with key properties:

assetName: The path to the image asset. This should be the asset’s location in the project directory.

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

width and height: Optionally set the width and height of the image.

Image.asset(
  'assets/images/my_image.png',
  width: 100,
  height: 100,
),

fit: Defines how the image should be inscribed into the space specified by width and height. Options include ‘BoxFit.contain’, ‘BoxFit.cover’, ‘BoxFit.fill’, etc.

Image.asset(
  'assets/images/my_image.png',
  fit: BoxFit.cover,
),

alignment: Aligns the image within its container.

Image.asset(
  'assets/images/my_image.png',
  alignment: Alignment.bottomRight,
),

color and colorBlendMode: Apply a color filter to the image and specify a blend mode.

Image.asset(
  'assets/images/my_image.png',
  color: Colors.blue,
  colorBlendMode: BlendMode.overlay,
),

repeat: Repeat the image in the specified direction.

Image.asset(
  'assets/images/my_image.png',
  repeat: ImageRepeat.repeatY,
),

filterQuality: Specifies the quality of the image when scaled. Options include ‘FilterQuality.low’, ‘FilterQuality.medium’, and ‘FilterQuality.high’.

Image.asset(
  'assets/images/my_image.png',
  filterQuality: FilterQuality.high,
),

Final Code: This is the final code with the combination of some above Image Asset Widget properties.

import 'package:flutter/material.dart';

class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        height: 500,
        width: 350,
        child: Image.asset(
          'lib/img/profile-hussamhm.jpg',
          fit: BoxFit.contain,
        ),
      ),
    );
  }
}

The Image.asset widget is an essential tool for displaying images in Flutter applications, especially when working with images included as assets in the project. By using the properties mentioned above, you can customize the appearance and behavior of the displayed images based on your application’s requirements.

Thank for visiting Hybrid App Development
Posted by Hussam HM