Search code examples
flutteranimated-gif

Show animated GIF in Flutter from assets

I want to show an animated gif as the background of my home page. Below is my code.

return Scaffold(
  appBar: AppBar(
    title: Text(widget.title),
    centerTitle: true,
  ),
  body: Column(
    children: <Widget>[
      new Image(image: new AssetImage('/assets/heaven.gif')),
    ]
  ),
);

But it is not showing on the home screen. I'm getting only a white background.

I have added the asset folder in assets in pubspec.yaml. My assets folder path is /lib/assets

assets:
- lib/assets/
Solution

  • The lib folder should be used for your source code. Assets should be placed in a different folder at the top of your project - often given the name assets.

    projectFolder -+
               +- pubspec.yaml
               +- /lib
               +- /assets

    Update the pubspec.yaml to reflect the new path assets/ instead of assets/lib/.

    Finally change the code to remove the leading /. AssetImage('assets/heaven.gif') instead of AssetImage('/assets/heaven.gif'). (The new keyword is optional and can be dropped, too.)