Search code examples
flutteripfs

How to display an ipfs image in Flutter

Getting an exception when using an ipfs url in Image.network return Image.network(nftData.result[index].metadata.image); in Flutter. How can I fix it?

════════ Exception caught by image resource service ════════════════════════════
Invalid argument(s): Unsupported scheme 'ipfs' in URI ipfs://qmrdmlnyxhwd4y58ks5xpxxezlsfn9pkhrqvn5ybfbmnqg/deluxeplot.gif
════════════════════════════════════════════════════════════════════════════════
Solution

  • The error is quite clear: ipfs scheme is not supported by common HTTP clients. In this case, you will need to resort to one of the HTTP gateways to translate the CID for you. Here is an example using ipfs.io gateway:

    https://ipfs.io/ipfs/qmrdmlnyxhwd4y58ks5xpxxezlsfn9pkhrqvn5ybfbmnqg/deluxeplot.gif

    Then it is trivial to write a function that translates any ipfs URI to an HTTP counterpart in your program.

    Check out the available gateways.