Flutter Sanity Image URL

Static Badge

A dart package to quickly generate sanity image urls. Ported from sanity-io/image-url.

Intented to be used together with the flutter_sanity package


Easily make use of all of the image related features provided by Sanity:

  • Allow editors of content to specify crops and hotspots, which will be respected in the app by creating the correct url.
  • Apply image transformations, like setting the width and height of an image through a ImageUrlBuilder.
  • Provides a SanityImage.fromJson() method that parses the image data from sanity into an object with all data and metadata being typed:
    • Access the sanity image color palette, for better styling based on images.
    • Access to lqip to implement low resolution image placeholders.

Getting started

dart pub add flutter_sanity flutter_sanity_image_url


See /example for a full example.

Displaying an Image:

  1. create an instance of ImageUrlBuilder which you can then use throughout your app.
  2. get an image url by chaining calls to the ImageUrlBuilder.

1. Creating a builder:

// sanityClient is an instance of SanityClient from flutter_sanity
final builder = ImageUrlBuilder(sanityClient);

ImageUrlBuilder urlFor(asset) {
  return builder.image(asset);

2. Using the builder:

using the builder design patten the options can be added in a chain, always call url() at the end to get the actual url of the image.

Image.network(urlFor(image).size(200, 200).url())

Accessing the image color palette data

Available colors in the pallette:

  • darkMuted
  • darkVibrant
  • dominant
  • lightMuted
  • lightVibrant
  • muted
  • vibrant

Each has color has the attributes:

  • background
  • foreground
  • title

Example of using the color pallette for an image:

// output: Color(0xff2c3b52)

See the example project for an example of styling text and background overlays based on the color pallette.

Accessing Low Quality Image Previews for low resolution image placeholders.

LQIP (Low-Quality Image Preview) is a 20-pixel wide version of your image (height is set according to aspect ratio) in the form of a base64-encoded string.

By using the flutter_sanity_image package you can use Low Quality Image Previews in two ways:

Use the provided placeholder widget:

ImagePlaceholder(lqip: pictures[0].lqip);

Access the lqip directly to implement into your own widget: