Adding a background image instantly makes our app’s UI look from zero to hero. In this article, we will discuss about how we can add a background image for Flutter App in 3 Simple steps.
1. Adding Image to our project
First we will be creating a folder named images in the root directory of our project. Let the folder name be images. We will be adding the respective image to this folder. In this example, I added bg.png to images folder.
Related Links
2. Declaring Assets
Now we need to declare that this new images folder must be included as assets in pubspec.yaml file as shown in the image below.
3. Adding the required code
Now lets see the required code to Add a Background Image for Flutter App. In order to display background image along the body, we will take help of BoxDecoration class.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| return Scaffold( | |
| body: Container( | |
| // Adding bg.png as a background image to this Container | |
| decoration: BoxDecoration( | |
| image: DecorationImage( | |
| image: AssetImage("images/bg.png"), | |
| fit: BoxFit.cover, | |
| ), | |
| ), |
We will use BoxDecoration() for declaring the decoration. This BoxDecoration takes image parameter. We will be assigning DecorationImage() object to it.
DecorationImage will take an image as parameter. Here will be declaring AssetImage as it is containing in our images folder. If we want to fetch it from Network, we will be declaring NetworkImage. Next, We will be adding fit as BoxFit.cover to show the image as full screen in Flutter.
Now we can see a beautiful image being added to our Flutter app’s background as shown below:
Whats Next?
More Flutter related articles are coming soon! You can subscribe to our Newsletter below. You can also follow the Flutter Udemy course from Google Experts below:
The Complete 2020 Flutter Development Bootcamp with Dart
