How to add image as app background in flutter
Hi developers,
In this article i will be teach you with pics how to set image as a background in flutter and if you don't know how to install flutter and implement it and set sdk path into android studio then you can check my previous article on this 👉 How to install Flutter in android studio and set SDK path
and if you want this article in video format then check our YouTube channel.
Follow the following steps one by one and if you stuck and face any problem then feel free to comment and contact me in any social media.
Step 1:Create new folder into your project
For using the images in your project, First you need to add save images and then use them and here we will be going to create a new folder and into it we will be saving the images we are going to use in our project further.
Following are the procedures which you should follow one by one
- Go to your project name folder and then Right click of your mouse.
- You will see option named new then click on it.
- Now option named Directory will show up as like you can see below 👇 in the pic and now click on it.
- Give a name of folder and here i am giving the name of folder as images.
 |
| Create a new folder |
Step 2: Save pics/images into project's folder
At above we created folder named images into the project and now we have to keep images which we are going to use in our project and here we will be keep that into the folder we created.
But its not an easy task and if you already works in android studio then you will know how to save pics into the folder in android studio because the procedure in same.
1.First copy the pic you want to be used in the project.
2.Now in android studio Right click on the folder you created where you want to keep your pics.
3.Now there is an option named Open In and just right click on it.
4.After that you will see an option named Directory Path so just click on it.
5.Now it will show the folder(images) into the drive in pc so open it.
6.Now paste the pic/image you copy before here in this folder.
7.Now the pics/images which we will be use will in the folder named images which we created earlier in this article.
Step:3 Implement it into the project
First you need to tell project that there is an image and for that you need to follow simple steps
1.Open pubspec.yaml
2.Go to flutter ➧ assets ➧
Write the path of your image
Here you should be careful about the indentation
After that click on Pub get which option showed at the top right
3.Here i am creating a new file and if you don't know how to do that then you can see my previous article on that and below is the source code and every file which i explain earlier in this article.
3.Here i am creating a new file and if you don't know how to do that then you can see my previous article on that and below is the source code and every file which i explain earlier in this article.
4.In main.dart file remember to call the file where we wrote our code because when project run then main.dart will be the first file which will be run.
Output:
