How to Add a Background Image for Flutter App

Must Read

Top 5 Software Courses to land into Highest Paying Jobs

The software industry has been emerging as a big player in recent decades. It is the second most active...

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...

Next Greater node in a Linked List – Leetcode Problem #1019

In this article, we will discuss the solution for 1019th Problem from Leetcode - Next Greater Node In Linked...
Vamsi Tallapudihttps://www.coderefer.com
I'm Vamsi Tallapudi, Loves writing articles about the stuff I learn during my day as Full Stack Developer.

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

 

0
0
vote
Article Rating

Subscribe to our newsletter

To be updated with all the latest news, offers and special announcements.

Generic Category (English)728x90
Subscribe
Notify of
guest

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

0 Comments
Inline Feedbacks
View all comments

Latest News

Top 5 Software Courses to land into Highest Paying Jobs

The software industry has been emerging as a big player in recent decades. It is the second most active...

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...

Next Greater node in a Linked List – Leetcode Problem #1019

In this article, we will discuss the solution for 1019th Problem from Leetcode - Next Greater Node In Linked List. Let us see the question...

Linked List Deletion – Linked List Tutorial Series #3

In this article, we will discuss about linked list deletion. We will see how to delete a node in a Singly linked list. This article...

Linked List Insertion – Linked List Tutorial Series #2

Linked List Insertion, unlike array or list insertion, is not pretty straight forward. In this article, we will discuss about Singly Linked List insertion....
- Advertisement - The language of now: Tech courses from ₹ 490 for Computer Learning Month

More Articles Like This

Generic Category (English)728x90
0 0 vote
Article Rating
0
Would love your thoughts, please comment.x
()
x