Image Widget – Flutter Widget Guide By Flutter Agency

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.asset(String name, {
    Key key,
    AssetBundle bundle,
    this.semanticLabel,
    this.excludeFromSemantics = false,
    double scale,
    this.width,
    this.height,
    this.color,
    this.colorBlendMode,
    this.fit,
    this.alignment = Alignment.center,
    this.repeat = ImageRepeat.noRepeat,
    this.centerSlice,
    this.matchTextDirection = false,
    this.gaplessPlayback = false,
    String package,
    this.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

• semanticLabel: Semantic description of the image.

• excludeFromSemantics: Whether to exclude the image from semantics.

• scale: How much the image is scaled.

• width: Width of the image.

• height: Height of the image.

• colorBlendMode: How the color blended with the image.

• fit: How to inscribe the image into the space allocated during layout.

• alignment: How to align the image within its bounds.

• repeat: How to paint any portions of the layout bounds not covered by the image.

• centerSlice: The center slice for a nine-patch image.

• matchTextDirection: Whether to paint the image in the direction of the TextDirection.

• filterQuality: Image filter quality

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.