How to add background image to a container in Flutter?

Background images can be added to Container in Flutter using DecorationImage class. If you are adding the background image to a Container, you should use Decoration image inside BoxDecoration’s image property. You can also give a child element to the Container to write a text over the image as shown below.

You can try it yourselves on the Interactive example given below.

Code

In the example above we have used NetworkImage as the value for image property. You can also use other image providers like AssetImage or FileImage.

Here we have used BoxFit.cover as the fit property, which means the entire container will be covered by the image. You can also use BoxFit.contain, BoxFit.fitWidth, BoxFit.fitHeight or BoxFit.contain according to your needs

You can also give a border radius to the container while using BoxDecoration. Background Image is also useful if you need to write some text over the image. You can also use Stack to achieve this, but using Decoration Image is much more easier.

Tip – While using BoxDecoration, you should define the color property of the container inside the BoxDecoration and not outside it. Giving color outside the BoxDecoration may throw error.