Flutter Tutorial - Set Screen Background Color | Gradient Background | In 7 Minutes

how to set the screen background color first of all we will set the screen to a single background color and we will also modify the app background color at the top and secondly we will create a background color with a gradient if you are new here subscribe to my channel and make sure to watch this video till the end let's get started by setting our screen to a single background color and we will also modify here this app bar at the top to set a single background color go to your build method and here to the scaffold and here inside you have a property which is called background color and then you can basically choose here a color and then we have here this orange background color and if you like you can also choose here many other colors so for example you choose your red and then you have here this red background color you also can go to google and here you can type in hex color and then you have here this color picker where you basically can choose any color that you like copy here then this hex code go back to your ide and then you create here a new color object and inside of it you paste in this hex code color and lastly replace this hashtag by xerox fff and now if your hot reload you have here exactly this background color that you have chosen before if you like you can also change the background color of the appa at the top therefore simply go to your app bar and here you have also a property which is called background color and then you can also choose here a different color in case you want to have for the whole screen the same color then you can also set your app bar background color to transparent and this looks then like this and our app also has here some shadow which we need to remove therefore you have within your app bar also a property elevation and with this if you set it to zero then the shadow will disappear importantly to notice here is that the background color which you have set for your screen is only for this individual page so if you go then to other screens then you see the background color is there not inside if you like to add the background color to multiple screens then you need to go simply to your main file and then you go here to the material app and here you create then a theme data and inside of it you have a property scaffold background color and here inside you can then set the background color which will appear on all the screens and now this screen has here this purple background color that we have defined and i also can go here to all the other screens they all have this purple background color however if i go here to this screen then you see this has here still the orange background color and this is because here within our scaffold we have defined the orange background color and if you supply it here then it will overwrite the global variant however if you delete it again then you see that he takes in the global variant that we have defined here within our seam data next we want to look at how we can add here a background color with a linear gradient and therefore we want to get started here with a background color of orange and our app bar is totally transparent and now to create this linear gradient go to your scaffold body property and here you simply wrap it then inside of a container widget and then you can supply here some decoration and here you need to add then a linear gradient where you need to define then some colors within this list and now if a hot reload you see here a gradient from the left to the right side and if i put here another color inside then you see it more clearly so here on the left side we have the first color orange and we have the second color on the right side if you like you can also go to your linear gradient and here you can set then a begin and end property and now i set it here to top center and bottom center and this means that our color here at the top the orange color starts here at the top center location and it goes then until the bottom center location so here we have then this blue gray color next we want to create here a more complex linear gradient with multiple colors therefore simply put here all the colors inside that you like and which you want to display on your screen so i have chosen here five different colors let's also make our appbar background color disappearing therefore you simply need to remove here the background color within your scaffold and this looks then like this however you don't see that the linear gradient is starting here from your appa and this is what we want to change to also start the gradient effect directly from your app bar you need to go to your scaffold and here you have a property which is called extend body behind appa so we extend here our whole body behind our abba so that it is here behind and now if i hot reload you see that the gradient effect is starting directly from the beginning of the screen right now our gradient starts here at the top center location so here we display them the first color and the last color will then end at the bottom center which is here this location and this is then here this green color to make it more interesting you also can change here then the location for example you put your top right inside so this is this location and the end should be then bottom left which is here then this location and now you see that our gradient is going from the top right to the bottom left corner and lastly you can then change how each of these colors here are then displayed within our screen so some of your colors you can also stretch further so that they get more space and you give other ones less space and you can do this with the property stops and here you need to put then as many items inside as you have here inside so in this case we have here five colors and therefore i also need to include here five stops and how it works is that you have then for each of your color a stop so in this case this stop here so for our first color we have here ten percent inside which means that our first color starts at zero and goes in up to ten percent to see it more clearly let's also exchange it here by a different color and now you see we have here this color which is then going up to ten percent the second color is then going up from ten percent to forty percent and this is then here this color let's also replace this color here by another color so i put it here to red and then you see it goes here up to 40 percent of the screen height the next color is then going up to 60 percent so it goes then from 40 percent to 60 percent and this is then here basically this color and then we also have another color which is going from sixty percent to eighty percent and the last color is then going from eighty percent to one hundred percent and this is then exactly here this green color which is going up to the end 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: 38,129

Keywords: android, colors, flutter, flutter background, flutter background color, flutter background color gradient, flutter gradient background, flutter gradients, flutter lineargradient, flutter page background color, flutter screen background, flutter theme, flutter tutorial for beginners, flutter ui, gradient, gradient background, gradient flutter, gradient linear flutter, gradients, gradients in flutter, ios, mobile

Id: eN62zlmjAEQ

Length: 7min 22sec (442 seconds)

Published: Thu Jun 03 2021