Wednesday, December 4, 2024
HomeFlutterHow to Add a Background Image for Flutter App

How to Add a Background Image for Flutter App

-

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.


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,
),
),

view raw

background

hosted with ❤ by GitHub

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

 

Vamsi Tallapudi
Vamsi Tallapudi
Architect Technology at Cognizant | Full Stack Engineer | Technical Blogger | AI Enthusiast

LEAVE A REPLY

Please enter your comment!
Please enter your name here

This site uses Akismet to reduce spam. Learn how your comment data is processed.

LATEST POSTS

Follow us

1,358FansLike
10FollowersFollow
398SubscribersSubscribe

Most Popular