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 :


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';

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

Example to use a Circular image from the asset folder:

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

Example to use  Image Overlay:

import 'package:getwidget/getwidget.dart';
   height: 200,
   width: 300,
   child: Center(
      child: Text('Light Overlay', style:TextStyle(color:getGFColor(GFColor.white))
   colorFilter: new ColorFilter.mode(
   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


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.


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.