52

I am trying to display gif in flutter.

I am using the code

Image(image : NetworkImage(message.image_url))

But it shows error:

Another exception was thrown: Exception: HTTP request failed, statusCode: 403, https://media.giphy.com/media/13AXYJh2jDt2IE/giphy.gif%20
Monu Kumar
  • 873
  • 2
  • 8
  • 10
  • update : i can display gifs from url "http://media2.giphy.com/media/FiGiRei2ICzzG/200_d.gif" but not from "https://media.giphy.com/media/NTY1kHmcLsCsg/giphy.gif " – Monu Kumar Jul 27 '18 at 11:22
  • This url will also work: https://giphy.com/media/FiGiRei2ICzzG/200.gif – Chetan Goyal Jul 07 '20 at 23:30
  • 3
    Is this question related to Giphy website, or to a Flutter functionality to display gif? – Longa Oct 03 '20 at 05:41

7 Answers7

86

Place your gif in your images folder of your project and mention it in pubspec.yaml file,just like you do for images.

Image.asset(
  "images/loading.gif",
  height: 125.0,
  width: 125.0,
),
Suragch
  • 484,302
  • 314
  • 1,365
  • 1,393
BraveEvidence
  • 53
  • 11
  • 45
  • 119
20

This is what used in Flutter Gallery app to display .gif from web

Image.network('https://example.com/animated-image.gif')
Danylo
  • 5,152
  • 2
  • 17
  • 13
12

I found a way with which you can download and add giphy.com's gif in your application using @Nudge answer.

Here is the trick which you can use-

Sample Giphy's .gif URL - https://giphy.com/gifs/congratulations-congrats-xT0xezQGU5xCDJuCPe

  1. You have to split the last part of url after -.

  2. Insert the last part in the following url: https://giphy.com/media/{URL_PART}/200.gif.

  3. In this case, URL_PART will be xT0xezQGU5xCDJuCPe. Simply replace it in the above url.

  4. You will get the following output url: https://giphy.com/media/xT0xezQGU5xCDJuCPe/200.gif

Check it out. I hope it will help someone. ;)

EDIT:

Recently, Giphy changed their url format to https://i.giphy.com/media/${URL_PART}/200.gif (Special thanks to @Rivaan for mentioning it out).

Now, new url would become: https://i.giphy.com/media/xT0xezQGU5xCDJuCPe/200.gif

Chetan Goyal
  • 435
  • 5
  • 14
3

Giphy does not allow you to load the image. There's nothing that flutter can do about it: https://en.wikipedia.org/wiki/HTTP_403

Selim
  • 1,064
  • 11
  • 23
  • i think giphy needs an api key to access some of their gifs, something you need to pay for – Fonix Dec 05 '19 at 09:58
1

When adding a new resource to assets, restart the ide

Ray Rojas
  • 151
  • 1
  • 8
1

An update to @Chetan Goyal 's answer. It throws an exception of incorrect image data now.

To display URL from Giphy that looks something like https://giphy.com/gifs/congratulations-congrats-xT0xezQGU5xCDJuCPe, we need to extract the part after hyphen i.e. xT0xezQGU5xCDJuCPe and add it to this URL: https://i.giphy.com/media/${URL_PART}/200.gif

Hope it helps someone.

Rivaan Ranawat
  • 21
  • 4
1

From assets

Place your gif in your images folder of your project and mention it in pubspec.yaml file,just like you do for images.

    Image.asset(
    "images/loading.gif",
    height: 125.0,
    width: 125.0,
),

From Network

Use a network Image to display gif from url.

Image.network('https://example.com/animated-image.gif')

Aslam Tarakwadiya
  • 11
  • 2