Image Widget – Flutter Widget Guide By Flutter Agency

What is Image Widget ?

Image Widget is generally a simple component that represents a thing or a group of things pictorially or which simply boosts the message or the text with a pictorial example to make the user understand better through the images that are displayed along with the paragraphs or the blog of data.

The images that will be displayed must be stored in particular folders. While in android the images must be stored in res/drawable folder by default, in Flutter you can define where the images are stored.

To add a list of image paths or a list of directories that contain images in “pubspec.yaml” file. Each path must be relative to the application’s root directory. please note that if you use a path to a directory, it will only load assets on that directory excluding its sub-directories. If the path refers to a directory, it must be ended with.

Official Image class document can be found from ImageClass

Image constructor will look like below :

Image Image({
  Key? key,
  required ImageProvider<Object> image,
  Widget Function(BuildContext, Widget, int?, bool)? frameBuilder,
  Widget Function(BuildContext, Widget, ImageChunkEvent?)? loadingBuilder,
  Widget Function(BuildContext, Object, StackTrace?)? errorBuilder,
  String? semanticLabel,
  bool excludeFromSemantics = false,
  double? width,
  double? height,
  Color? color,
  Animation<double>? opacity,
  BlendMode? colorBlendMode,
  BoxFit? fit,
  AlignmentGeometry alignment = Alignment.center,
  ImageRepeat repeat = ImageRepeat.noRepeat,
  Rect? centerSlice,
  bool matchTextDirection = false,
  bool gaplessPlayback = false,
  bool isAntiAlias = false,
  FilterQuality filterQuality = FilterQuality.low,
})

Declare image path in a ” pubspec.yaml ” like below :

  flutter:
    assets:
      - assets/file-name.jpg
      - assets/file-name-2.jpg

Finally, we can use them, just put the name as the parameter will show the picture.

Image.asset(
          'assets/nature.png',
        ),

We will get output like below:

Image Widget

Image size by setting width and height

These two parameters control the size of the size. The type is double, the example is below :

Image.asset(
         'assets/nature.jpg',
          height: 200,
          width: 200,
        ),

Scale: The image will look bigger if the scale is less than 1

  Image.asset(
    'assets/images/file-name.jpg',
     scale: 0.8
 )

Fit image size :

This property will set image size will be fitted to its width.

 Image.asset(
        'assets/nature.jpg',
        fit: BoxFit.fitWidth,
      ),

Blend image with a color :

Image.asset(
        'assets/nature.jpg',
        colorBlendMode: BlendMode.darken,
      ),

Properties

name: The name of the image file to display from the asset bundle.
key: Unique identifier for this widget in the widget tree.
bundle: The asset bundle containing the image. Defaults to the main bundle if not specified.
semanticLabel: Describes the image in text for screen readers.
excludeFromSemantics: If true, the image will be excluded from screen reader’s context.
scale: The scale factor to apply to the image. It’s used to adjust the image’s pixel density.
width, height: Specify the width and height to size the image. Null means adapt to the parent size or content.
color: If specified, this color is applied to the image using colorBlendMode.
colorBlendMode: Determines how the color is applied to the image.
fit: How the image should be fitted into the widget bounds. For example, BoxFit.cover scales the image to cover the widget area.
alignment: Alignment of the image within its bounds.
repeat: How the image should be repeated if it does not fill the widget bounds.
centerSlice: Specifies a 9-patch image. It’s a rectangular section that can be stretched to fit the content.
matchTextDirection: Whether the image should flip horizontally in RTL text direction.
gaplessPlayback: If true, the new image does not wait for the old image to fade out before displaying.
package: Name of the package from which the image is loaded, if the image is in a package.
filterQuality: The quality of filtering to use when scaling an image. Affects the quality and performance of image scaling.

User can also display network image using below Code Snippet :

Image.network(
      'https://flutter.io/images/catalog-widget-placeholder.png',
      height: 150,
      width: 150,
    )

Which will display the Flutter logo in the center of the screen.

Thanks for reading.
Keep Fluttering !!!

FlutterAgency.com is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget Guide, Flutter Projects, Code libs and etc.

FlutterAgency.com is one of the most popular online portal dedicated to Flutter Technology and daily thousands of unique visitors come to this portal to enhance their knowledge on Flutter.

Written by Nirali Patel

Nirali Patel is a dedicated Flutter developer with over two years of experience, specializing in creating seamless mobile applications using Dart. With a passion for crafting user-centric solutions, Nirali combines technical proficiency with innovative thinking to push the boundaries of mobile app development.