flutter_img

flutter_img

A Flutter widget with SVG code support and the ability to handle SVG, png, and jpg pictures from assets and the network. Cached photos can be handled by it.

The following files format are supported:

• JPG (Asset And network with cache)
• PNG (Asset And network with cache)
• JPEG (Asset And network with cache)
• SVG (Asset, network and code)

Usage

Basic example

Img(
  'https://miro.medium.com/v2/resize:fit:4800/0*bDz2chibrm3B6QZE',
  fit: BoxFit.fill,
  blurHash: 'LGSF|mNH~U?G-oR+Rkt6^%xZD+Ip',
)

Installation

❗ In order to start using flutter_img you must have the Flutter SDK installed on your machine.

Add flutter_img to your pubspec.yaml:

dependencies:
  flutter_img:

Install it:

flutter pub add flutter_img

Parameters

Param	Description
String src	src is the one and only positional parameter here, and it's required it will take the asset link, HTTP image link, or SVG code as a string. as you know it takes a string, so for SVG code make sure there is no new line.
double? height	If you want to set image height explicitly you can pass a height value or it will adjust the height based on image height and screen height
double? width	Similar to the height, the width parameter also can be used for explicit value
BoxShape? shape	The shape parameter can be used to change the shape of the image.
BoxBorder? border	The border parameter can be used to add the shape of the image.
BorderRadiusGeometry? borderRadius	using borderRadius You can add a border to the image
EdgeInsetsGeometry? margin	the margin of the image
EdgeInsetsGeometry? padding	the padding of the image
ColorFilter? colorFilter	The colorFilter allow you to set a color filter over the image
Widget? placeholder	The placeholder parameter allows you to provide any widget as a placeholder before the network image is fully loaded. this parameter only works with png, jpg/jpeg network images. asset images or SVG images will not be affected
String? blurHash	The blurHash parameter also allows you to load blurhash images before the network image is fully loaded. this parameter only works with png, jpg/jpeg network images. asset images or SVG images will not be affected. By default, if you don't provide placeholder blurhash will apply. and the default value is L5H2EC=PM+yV0g-mq.wG9c010J}I
Color? bgColor	bgColor will set the background color of the image
Widget? errorWidget	errorWidget parameter allows you to provide any widget that will visible if network request failed or any error happened during loading network image
final String? package	package is the name of the package where the image is located. It's only used for asset images

Example

Network Image with blurhash

Img(
  'https://miro.medium.com/v2/resize:fit:4800/0*bDz2chibrm3B6QZE',
  blurHash: 'LGSF|mNH~U?G-oR+Rkt6^%xZD+Ip',
  width: 400,
  height: 200,
)

SVG network Image

Img(
  'https://raw.githubusercontent.com/shafi-org/portfolio/master/src/assets/flutter-svgrepo-com.svg',
  width: 300,
  height: 300,
)

SVG Code

Img(
  '<svg width="317px" height="317px" viewBox="-30.5 0 317 317" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid"> <defs> <linearGradient x1="3.9517088%" y1="26.9930287%" x2="75.8970734%" y2="52.9192657%" id="linearGradient-1"> <stop stop-color="#000000" offset="0%"></stop> <stop stop-color="#000000" stop-opacity="0" offset="100%"></stop> </linearGradient> </defs> <g> <polygon fill="#47C5FB" points="157.665785 0.000549356223 0.000549356223 157.665785 48.8009614 206.466197 255.267708 0.000549356223"></polygon> <polygon fill="#47C5FB" points="156.567183 145.396793 72.1487107 229.815265 121.132608 279.530905 169.842925 230.820587 255.267818 145.396793"></polygon> <polygon fill="#00569E" points="121.133047 279.531124 158.214592 316.61267 255.267159 316.61267 169.842266 230.820807"></polygon> <polygon fill="#00B5F8" points="71.5995742 230.364072 120.401085 181.562561 169.842046 230.821136 121.132827 279.531454"></polygon> <polygon fill-opacity="0.8" fill="url(#linearGradient-1)" points="121.132827 279.531454 161.692896 266.072227 165.721875 234.941308"></polygon> </g> </svg>',
  width: 300,
  height: 300,
)

Image with background

Img(
  'assets/images/lockup_flutter_horizontal.png',
  bgColor: Colors.red,
  height: 100,
  width: 200,
)

Border and border radius

Img(
  'assets/images/lockup_flutter_horizontal.png',
  borderRadius: BorderRadius.all(Radius.circular(3)),
  border: Border.all(width: 2, color: Colors.red),
  width: 200,
  height: 100,
)

Circular Shape

Img(
  'assets/images/flutter-svgrepo-com.svg',
  shape: BoxShape.circle,
  bgColor: Colors.green,
  height: 200,
  width: 200,
  margin: EdgeInsets.all(10),
)

Color Filter

Img(
  'assets/images/lockup_flutter_horizontal.png',
  colorFilter: ColorFilter.mode(
    Colors.grey,
    BlendMode.saturation,
  ),
)