Flutter Image:

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

Short video introduction of Flutter Image Widget:

Flutter Image Widget - Source Flutter.dev

GetWidget Images:

GFImages  also represents the data with its specific pictorial representation in a very different and more convenient ways. It uses the assets folder to take the static images and to display on the app orr it even takes a network images through the network image property and it also takes a special property called Image Overlay ie, Image Overlay set its picture as the background and any form of paragraph or text in its foreground and thus a overlay of any kind of colors can be applied to it which gives a blurry effect on the picture.

GetWidget Images have three different types:

Basic Image using assetImage or a network Image:

The basic Image is a simple image with a specific height and width property. It is widely used to show a banner images or to represent a product image etc.

Circular Image using assetImage or a network Image:

Circular Image is rounded image which is mostly used as a profile picture or to show the profile of any kind of products or organisations

Image Overlay with colorfilter property:

Image Overlay is used to set the images in the background and the text in the foreground and to give a blurry effect with the colorfilter property.

How to Start:

Now here is the guide about how we should we start developing Flutter Image Widget while using GetWidget UI Library.

Getting started will guide you how to start building a beautiful flutter application with GetWidget UI library. You have to install the package from pub.dev, import the package in your Flutter project.

Install Package from pub.dev :

https://pub.dev/packages/getwidget

Import full package:

import 'package:getwidget/getwidget.dart';

Note: dependencies: getwidget: ^1.0.4

Keep playing with the pre-built UI components.

Example to use a simple basic image from the asset folder:

import 'package:getwidget/getwidget.dart';

GFImageOverlay(
  height: 200,
  width: 300,
  image: AssetImage('your asset image')
)

Example to use a Circular image from the asset folder:

import 'package:getwidget/getwidget.dart';
 
 GFImageOverlay(
   height: 200,
   width: 200,
   shape: BoxShape.circle,
   image:AssetImage('your asset image')
 )

Example to use  Image Overlay:


import 'package:getwidget/getwidget.dart';
 
 GFImageOverlay(
   height: 200,
   width: 300,
   child: Center(
      child: Text('Light Overlay', style:TextStyle(color:getGFColor(GFColor.white))
  ),
   colorFilter: new ColorFilter.mode(
   Colors.black.withOpacity(0.20),
   BlendMode.darken),
   image: AssetImage('your asset image')
 )

Read more about Flutter Image Widget by GetWidget UI Library here:

GF Image
GFImage typically manages assets and dispalys the images
Getwidget

Conclusion:

Here we discuss what Flutter Images are? And how we can use them in our Flutter app through GetWidget Image component. Here we can use Overlay Image with a less code and code it beautifully with a variety of images and so as the circular and basic image.

FAQ's:

Q. Can we use network image in image overlay?

Ans: Yes, we can use any kind of image whether a asset image or a network image.

Q. Can we use circular image as a avatar image?

Ans: Yes, we can use circular image as a avatar image by adjusting the height and width of the image.