{"id":7367,"date":"2020-04-17T09:47:07","date_gmt":"2020-04-17T09:47:07","guid":{"rendered":"https:\/\/www.getwidget.dev\/blogs\/flutter-image-widget\/"},"modified":"2024-12-12T13:14:36","modified_gmt":"2024-12-12T13:14:36","slug":"flutter-image-widget","status":"publish","type":"post","link":"https:\/\/www.getwidget.dev\/blog\/flutter-image-widget\/","title":{"rendered":"How To Customise Flutter Image Widget with example Code"},"content":{"rendered":"

Flutter Image<\/a> 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.<\/p>\n

How to use Image in Flutter with GFimage<\/h3>\n

GFImages<\/strong><\/a> is a Flutter Images that also represents the data with its specific pictorial representation in a very different and more convenient way. It uses the assets folder to take the static images and to display them on the app or it even takes 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 an overlay of any kind of colors can be applied to it which gives a blurry effect on the picture.<\/p>\n

How to Get Started<\/h3>\n

Now here is the guide about how we should start developing Flutter Image Widget while using GetWidget<\/strong> UI Library.<\/p>\n

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

Install Package from pub.dev :<\/em><\/p><\/blockquote>\n

https:\/\/pub.dev\/packages\/getwidget<\/strong><\/a><\/p>\n

Import full package:<\/h3>\n

import ‘package:getwidget\/getwidget.dart’;<\/p>\n

Note: dependencies: getwidget: ^4.0.0<\/strong><\/p>\n

Keep playing with the pre-built UI components.<\/em><\/p><\/blockquote>\n

GetWidget Images<\/strong> is basically used to display the profile pictures of the users and to make it easy it has other types that can be used. In the below section we will see them with the example codes.<\/p>\n

Flutter Image using assetImage or Network Image<\/h3>\n

The Flutter basic Image<\/strong> is a simple image with a specific height and width property. It is widely used to show a banner image or to represent a product image etc.<\/p>\n

The below shows how the image can be used with Example Code.<\/p>\n

\n
import 'package:getwidget\/getwidget.dart';\n\nGFImageOverlay(\n  height: 200,\n  width: 300,\n  image: AssetImage('your asset image')\n)<\/code><\/pre>
Flutter image used with Asset or network image example code<\/span><\/figcaption><\/figure>\n
Flutter Circular Image using assetImage or network Image<\/h3>\n
A Flutter Circular Image<\/strong><\/a> is a rounded image that is mostly used as a profile picture or to show the profile of any kind of product, organization, or brand image to the users.<\/p>\n
\"\"