Flutter Splash Screen- Remove white screen before splash screen

[Music] hello everyone welcome back to flutter mystery um today i i just wanted to talk about um something um um this plus screen thing um you know one thing i've noticed is that that flutter made their app um and made of um a splash screen in it so mostly you you can um tell when you create a new app you see a white screen loads before any other page loads yes so i was looking online and i was searching for a solution and i came across this and i think i have to share with you guys and it will help most of you who want to also um who have attention for this same thing like i was doing yes and then i think it will help it will help all of us so um what we're going to do is that [Music] i'm going to show you how to add a logo or an image to that and white screen or do away with that white thing and then put an image there um like this app you see when you open it the logo load first like this or like this you know there is nothing like white screen or like this you see or even like this yeah so uh what we're going to do is we can you know we have two types you can make you can add the image you know like a smaller size and the flutter will add the white screen to it but um sometimes the image roots before the white screen yeah and i don't like it like i really love like this it loads with my logo and then it vanishes so that's what we're going to do today so i will reach mass much time what you're going to do is to create a new um let's create a new shutter project and then we call it flatter okay and then quickly quickly we call it flutter and then there and that's how we we finish so the project is loading okay so after it loads it's very simple so it won't take much time i'm hoping it takes just five minutes so that we finish so this is let's use this same window this is our new project let's run the project first and then see what will like if there is any error to tackle before or if there's no error we'll move over what we have to do [Music] and i know there wouldn't be any error at all there wouldn't be any error because um we haven't even started and everything is set up correctly um so and if you haven't subscribed yet please don't forget to do so because you know your subscription and motivates us to do more to do more videos you know to bring to you more and more and more videos after this video we're going to continue with the e-commerce application um the grocery application that i have i'll be coming up with e-commerce too and so you see this white screen that is what i'm talking about this is white screen you know you have to wait for the white screen to finish before your splash screen loads and it weighs it wastes much time so what you do is we will quickly we will quickly we have to move to our android this folder go to app source go to main resource and then the drawable in the drawable you have your launch background and this is the white thing that has been loading this is it android color white this is what we do so um what you have to do is they've they have everything here already so you only um they've commented the item out so you will activate it by clearing those staffs and then you will comment this thing up the first thing that is showing i mean this you will have to comment it off by adding distance to it like this you see and now this is working so um what we'll quickly do is we will add this you know it's not composing but some of the app doesn't work so the best thing is to add it to the item like this gravity center and then i'll add an image to it i'll call the image image like this and you're supposed to add it to this because this is where it picks it from the mid map folder and here are the mid-map folders the map map here they are all in the resource folder in the android so after the drawable map map map these folders this is where you add your image you see and sometimes i something that helps me i don't know um the image will stay in the middle but i wanted to [Music] like match um the parent you see something like this just as how we do in android java you know in android yes so i just want to make the image much there you know sometimes it does not it leaves spaces behind so but when i do this it merges with the corners and there will no be left to us something like this so quickly i have my image you know i added this is the main logo let me just show it to you this is the logo so i added this logo to a white background like this you see this is how it is see so let me copy this image [Music] copy it let me tell you the side the size is thousand four hundred by two five six zero you see okay and then here in my mid-map folders like this i will paste i will paste the image in all of them like this [Music] like this okay so now i have the image in all the midmark folders let me quickly save this i will save it and then let me uninstall the app from um from the how do we call it emulator okay so let me round it up and let's see what happens so the app is running a gradle task and then let's wait for what happened whether it knows the image automatically or it still displays the wide screen let's see what happens so um what is happening okay okay so this is what i'm talking about you see it loads the image just quickly with no white background and it's very awesome uh so thank you for watching this video and then hit the like button if you really enjoyed it and you like it and if it has solved your problem you hit the like button and then make sure you subscribe before living thank you thank you thank you so so much have a blessed day and while i'm back i'm back for good we have a lot of project to do so stay connected always and have a blessed day bye

Channel: Flutter Mystery

Views: 7,545

Keywords: Flutter, Flutter Splash Screen, Flutter UI

Id: aCfM4JdP2Qc

Length: 8min 13sec (493 seconds)

Published: Thu Oct 22 2020