BoxDecoration: DecorationImage Fullscreen background image

Question

As per the Flutter docs I'm trying to use the DecoratedBox to load a fullscreen image as the background image for a Container.

my pubspec.yaml contains the relevant definition for an embedded asset:

flutter:
  uses-material-design: true
  assets:
    - assets/background.png

and the widget.dart tries to fill the background of a new Container as prescribed:

@override
  Widget build(BuildContext context) {
    return new Container(
            decoration: new BoxDecoration(
              color: Colors.purple,
              image : new DecorationImage(
                image: new ExactAssetImage('assets/background.png'),
                fit: BoxFit.cover,
              ),
            ),
     ),
  }

But I get the following error:

Unable to load asset: assets/background.png 

Image provider: ExactAssetImage(name: "assets/background.png", scale: 1.0, bundle: null)

Clearly the bundle is not resolving correctly. Does anyone have an idea of what exactly I'm doing wrong here?

Collin Jackson Collin Jackson · Accepted Answer · 2017-05-09T15:50:27

It works for me. A few things to double check:

Hot reloading/restarting won't change assets, so make sure you're doing a regular build.
Try uninstalling the app from the device and doing a clean build, sometimes the build system has a hard time replacing the old install (e.g. if your debug key changes)
Make sure that the actual asset as well as all the references to it are pointing to assets/background.png and not images/background.png (the default pubspec.yaml suggests putting images into a folder called images, but it doesn't matter as long as everything matches).
Try using AssetImage instead of ExactAssetImage
Make sure the Container either has a child or is in a place where it will be given a size by its parent (e.g. a Stack would be fine, but a Column would cause it to be 0x0 if it has no intrinsic size or child)

BoxDecoration: DecorationImage Fullscreen background image

1 Answers