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.

^ This is you right now who thinks it did not work for you. Let me add a little trick to make it work. 😜

Go back to your Scaffold and remember that backgroundColor param? Edit it and give it a transparent colour. It will make the image in the background visible to you.

backgroundColor: Colors.transparent

Voila! Works like a charm now.

Figure 3: Background image added in Flutter using Container

GitHub Link

The code for this demo can be found on my GitHub account here.

Follow me for more such articles and if you love reading, join Medium using my link here -> hamzamateen345.