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:
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.
GetFlutter 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 GetFlutter UI Library.
Getting started will guide you how to start building a beautiful flutter application with GetFlutter 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:
Note: dependencies: getflutter: ^1.0.4
Keep playing with the pre-built UI components.
Example to use a simple basic image from the asset folder:
import 'package:getflutter/getflutter.dart'; GFImageOverlay( height: 200, width: 300, image: AssetImage('your asset image') )
Example to use a Circular image from the asset folder:
import 'package:getflutter/getflutter.dart'; GFImageOverlay( height: 200, width: 200, shape: BoxShape.circle, image:AssetImage('your asset image') )
Example to use Image Overlay:
import 'package:getflutter/getflutter.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') )
Here we discuss what Flutter Images are? And how we can use them in our Flutter app through GetFlutter 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.