Flutter Tutorial - Set Screen Background Image | Asset Image & Network Image

we want to set a screen background image for our flutter app and this image we want to load from the internet or from the assets folder which is the local device storage and we will also look at how we can darken and apply some gradient effects on top of the background image if you are new here subscribe to my channel and make sure to watch this video till the end let's get started by applying a background image to our flutter app and therefore we will look at two different approaches for the first approach you need to go to your build method to your scaffold body property and here you wrap then your whole content which is in this case this flutter logo inside of a container and within this container you have the property decoration where you can set a box decoration and here within this box decoration you can then set a background image and therefore we define here that our image should be loaded from the network from the internet and then you can define here a url to your image and therefore i define here a url to my jpeg image and now if a hot reload you see we have here already a background image inside and if you also want to stretch it to the full size then you simply need to add here within the decoration image this property fit and if you set it to cover then it has here the full screen size there are two big problems with this approach and i will simply show it to you by simply replacing this flutter logo by another widget and now if a hot reload you see that our image tags are only the size of the child widget and our child widget has here a size of 100 by 100 pixels and therefore this approach that we took here is working however you need to make sure that this widget which you put here inside is taking the whole width of your screen and how you can easily achieve that this text and the maximum spaces widget is by simply wrapping it inside of a list view and this will then make your content scrollable which you put here inside and it also stretches it then here to the maximum size alternatively you also could use here then a column widget however then you see that our image is not applied here to the whole width only to the whole height and therefore you also need to add here this cross axis alignment and then you set it to stretch and then our image is also applied here to the whole background and secondly you can put here then any widgets inside which should be displayed on top of your background image and of course if you want to center your widgets then you also can go here inside to your column and add this main axis alignment to center and with this your content will be centered all in all if you take this approach then you always need to make sure that the widget that you place inside of the child property is expanding to the whole size to the whole width and to the whole height another big issue that you have with this approach if you wrap here a container with this background image around is if you put here simply a text field inside and now if i click here on this text field then you see that our image is moving up as our keyboard is moving up and if i hide the keyboard again then you see it is always moving here and this is maybe not pretty cool for you and therefore we will look at a second approach and after this we also want to look at how we can darken our background image and also how we can apply here a linear gradient effect so that it is here at the bottom more dark and this is especially needed if you have here a light background image then you need to darken your image so that the text which is for example displayed in white is visible and that you can see it clearly before we darken our background image and also fix here this problem with this moving image we also want to look at how we can load this image here from our local storage because right now we display here an image from our network which we load from the internet and if you want to display an image from your local file storage then you can simply put an asset image inside and instead of this url image you define then here a local path to your image and therefore i have stored here within our assets folder this pizza image which we want to load but before you can display it within your app you also need to go to your pop spec jammer file and then here under this flutter tag you need to add then this asset stack and here you define then the assets folder and this is basically here this folder that i have created before and with this we say that we want to load here this pizza jpeg image and now after you have closed your application and after you have started it again then it will display here simply this pizza image within our application one important thing that you need to notice about the pizza jpeg image that you place within your assets folder is that you need to make sure that this image has you a small size so make sure that your image doesn't have here some megabytes instead it should have a really small size and this is really important otherwise if you have a large image and then go inside of your app then it takes some time until the image is loaded and this doesn't look so great therefore in case you face this issue that your image takes a long time to load then simply go to compress jpeg.com and here on this website you can compress jpeg images and also png images if you like therefore simply drag and drop your file here inside and then you can download here after some time decompressed image and you see that this image was reduced by 55 in size and with this if you take now the compressed image instead then you see that it takes you less time in loading however it was still slow because the image is still big and therefore always make sure that you have your not that high dimensions because this is really big and therefore our image takes also a lot of size instead you should have here a small size and also a small dimension like this one in case your image has still a big dimension you also can use for example some image manipulation tools or you can go to this website and here you can then upload your image file and then scroll here all the way down give it some other size for example 800 and width and click on resize image and lastly you can scroll here all the way down and then you can save here this image to your local file storage and like you can see this new image has then a much smaller size and also a smaller dimension and now if you start your application again for the first time then you see that the image is loaded more quickly and as more you reduce the size of the image the more quicker it will then load this image next we want to darken our background image and also apply here this linear gradient effect and we also want to fix here this moving image problem let's start by darkening this image and therefore you simply go to this decoration image and here inside you have a property color filter and then you need to place here the color inside with which you want to darken your image so in this case black and you also need to put here then this vent mode darken inside and now if you hot reload your app then you'll see that it turns black and this is especially the color that we have defined here which is then on top of our image and we also want to give it tsn some opacity so that we see here more of the image so in this case i have put here the opacity to 60 and if you reduce the opacity then you see more of the image and of course you can also put here then other colors inside for example red and then you have here this red color which is placed on top and this is also what you can do easily next we want to solve this issue of our moving image and to fix this is pretty simple so simply take here this whole container with your background decoration and then take it here out and instead wrap it then around your scaffold widget and as a result you will see that you have here this white background color and to fix this simply go to your scaffold and here you set then the background color to transparent and now if you hot reload you will see that the background image is again displayed and the cool thing about this approach is now if you click here on this text field then you see that the background image is not moving and another benefit of this approach is that you also don't need to care about what you place you inside of this body property so you also can put here a container with a height of 100 by 100 inside and you see that our background image expands then here to the whole width and to the whole height no matter the size of this widget that we place here inside and of course instead of this container you place in here all the widgets inside that should be displayed on top of your background image next we also want to look at how we can apply a gradient effect to our background image so that it is here displayed at the bottom more in black and here at the top less in black therefore let's start by going to the decoration image and here i put this color then for example to 20 instead of 60 so that we only darken this image a bit and on top of this image we want to place in here this linear gradient which makes here our image at the bottom more in black before we apply the gradient we want to copy here this asset image code and secondly we want to replace and hear this whole code by this background image widget and this is basically another widget that we want to create and inside of it of this image property we put then here this asset image inside and this background image widget that we want to create text and every time here the background image and then the widget that is displayed on top of this background image and therefore i have created here already this background image widget which takes in both of these parameters and within the build method i have already put the child widget inside and this is exactly this child property that we have defined within our background image widget all right and next to the child widget we also want to display again our background image and therefore we go here back to our background image widget and then we simply repeat this whole child widget inside of this container that we have created before so it's basically here exactly the same code that we have created before for applying our background image only that we have exchanged here now this chart and now if a hot reload you see again that our background image is displayed here inside and secondly we want to replace them this asset image here by the image property that we have here defined at the top and therefore i simply put here this image inside and this has then a big advantage so we can reuse this background image widget for multiple pages so we simply wrap them every time the scaffold around this background image widget and also make sure that you put here within your scaffold the background color to transparent and lastly you can then define here the background image so you can define an asset image or alternatively you also can place here then a network image inside which loads in an image from the internet alright and finally we want to apply then this gradient effect on our background image to apply this effect simply go to your background image widget and then simply wrap here this whole code inside of a shader mask and here you have then a property blend mode which we set to darken and secondly you need to define a shader callback and within this callback you define then the linear gradient that you want to apply on top of your image and to make this work you also need to call then on this lydia gradient this method create shader and you put here then the bounce inside of this callback and now we can define the linear gradient so simply define here two colors and now if i hot reload you see we have here a linear gradient from the left side to the right side and if you like you can also change here then the alignment so i put it here to center to bottom center and this means that this color starts here at the center position and our second color goes in here to the bottom center position that we have defined with the end property one big problem with the shader mask which we have right now is that the shader mask is also applied on top of our child widget and you can see it more clearly if i simply replace here this by a darker color and now if a hot reload you see that also everything like the widgets that we have on top are also darken and this is what we want to change therefore let's take here this whole source code and let's place it then inside of a new method build background and within our build background method we want to remove then the child property so we want to display only the background image and lastly we go then to this build background method and wrap it inside of a stack so that we can display multiple widgets on top of each other and first of all we want to display then the background image and on top of the background image we want to display then our child widget and now if a hot reload you see that only the background image is darkened and our child widget is not darkened and by the way if you want to get here this whole source code of this application then you can get it with the first link in the description and with the second link you can get access to my flutter courses where i teach you how you can become a better and more efficient developer hello everyone thank you so much for watching this video please make sure to give it a thumbs up and subscribe to my channel here to get the latest news about flutter and see you soon bye you

Channel: HeyFlutter․com

Views: 34,172

Keywords: android, app background, asset image, background, background image, change background, dart, flutter, flutter add background image, flutter background image, flutter set background image, flutter ui, gradients, how to add background image in flutter, image, ios, mobile, programming, set background in app, set image, ui

Id: sDS4c1C-Fdg

Length: 13min 38sec (818 seconds)

Published: Fri Jun 04 2021