Adding a Background Image in Flutter

How to add a custom background image in Flutter? Here we go!

backgroundColor: Colors.orange

The default background for the Flutter screen provided that one uses a Scaffold is always a shade of white colour. This colour can be changed simply by using the backgroundColor param of Scaffold but the aim of this article is bigger. We intend to add a new image behind the whole screen. We can even add a gif or a video too.

Create a new Flutter app and download a mobile wallpaper of your choice from Google. I chose this image.

Create a folder named assets in your project folder and add it to the pubpsec.yaml file as shown below. Make sure you add your image to the assets folder and the name should match otherwise asset not found error will be thrown.

Next, go to main.dart and wrap Scaffold with a Container widget. It seems weird but trust me, it will work! ;)

Now use the decoration param of the Container like this:

decoration: BoxDecoration()

Container has this param allowing developers to change colour, shape and other decorations of it including an image param. Use it and provide the required value as shown below.

Launch your app to see if it worked.