Flutter: Create Beautiful Material Splash Screen | Dart 2

[@siddheshtamhanekar3144]

The splash screen is still white you have just made widget which shows after splash screen.

[@HelloCodepur]

Check my flutter ui kit for native implementation

[@MatthewM770]

@@HelloCodepur where would I find the ui kit please?

[@balaji-venkatraman]

@@HelloCodepur Is there any way that i can suppress native splash screen with custom splash screen

[@amankaushik5833]

@@MatthewM770 on his github

[@GArvinthKrishna]

@@HelloCodepur where to find?

[@neelsharma1033]

thank you for teaching me Flutter...no matter what i search for I get the answer in your channel..good job man

[@vipinvijayan6034]

This is not splash screen. You cannot Customize programmatically splash screen on iOS. This is just a screen after the splash screen.

[@shellphil5439]

"Native Splash Screen"

[@cristiansprenger418]

It splashes. In the screen. It's a splash screen.

[@uzairleo2910]

actually you are right but only untill its in debug mode when its run in release mode then its become splash screen and there is no white screen any more also if not possible that option still you have choice to implement native splash screen bro

[@msopheak3371]

before the loading splash screen, the white screen displayed. how to remove this white screen or custom duration?

[@SpitFriX]

"Flutter: How to increase loading time of your app for fun"

[@swapnadumpeti9270]

create a app which shows only loading screen

[@ThEGeEeK]

Time.delay()

[@msopheak3371]

@@ThEGeEeK i am a begginer could you give the link or show me??

[@harshitsrivastava9903]

Thanks for Flutter Tutorial 🙏🙏

[@HelloCodepur]

One more thing to note guys is that this splash screen is not something recommended by android or ios , you might be seeing a white screen before this screen appears so that is also a splash screen but that is platform dependent and can have only one logo and a background which is recommended and you can't load your data and all.. I will make a separate video for platform specific splash screen

[@sunitgautam7547]

Please, do! Thanks a lot! Or is it available already?

[@Marty70072]

Also waiting for this! :)

[@nosmirck]

Good, because I was going to say that this is not a splash screen, this is a custom screen that shows at the beginning, that's it. The concept of a splash screen is100% platform dependant.

Waiting for it!

[@motiurrahmanimtiaz]

today joining fb group also. thx dear .

[@csiddharth380]

Thankyou very much man

[@edt723]

The initial entry into the splash screen seems to take a few seconds on Flutter. I know in Android we typically add the splash screen layout as a Theme (that way it loads instantly). I know you are using this method in your Flutter-UI-Kit, and it looks great! But how do we implement this for iOS?

[@koshiserver4346]

Which colorscheme is this ? It's beautiful.

[@dugenterprisesolutions9754]

Thank you very much ... you are the best Teacher. But how do I add a Webview_plus package after the Timer()? I tried inserting the widget as a callback parameter. Nothing worked

[@samjones50]

Brother I watch your video is very good, But I need some help from you.. can you please tell me how to move from splash screen to another without pressing any button. like from splash screen after 3 second it will autometically move from signup page. thanks in advance.

[@markdioneeb8997]

I appreciate your effort on this video, but the main purpose of splashscreen is to hide the white screen while loading, what happened on 19:39????

[@uchechukwuprincenwulu2026]

Many thanks for this. Very helpful.

[@Rishabhkumar-ug4qv]

U r awesome buddy

[@mohamedalsaee7018]

Keep up bro thank you so much

[@adhityafrimansyah3946]

The best part : 15:43 Thanks sir, btw xD

[@JHEVR]

"It's being deprecated in favor of Android embedding v2" could you do an updated version? please

[@killergoldfish117]

Great video, thank you.

[@yusuphh.kajabukama4029]

Please accept my humble appreciations from Tanzania!I enjoy learning flutter through your videos, thanks a lot and keep up the good work!by the way what is the color theme you are using!

[@jeffbowyer8886]

Yes I want to know that too. I know the video shows a mac version. Is there a PC version of that color scheme? I can't find one in extensions.

[@asgaraliyev8740]

me too :(

[@sarandhanushsarandhanush2470]

bro..please continue your flutter tutorials....

[@LordVodka313]

This was exactly what I needed. Liked and Subscribed!

[@tanmaypatel3268]

We have created splash screen but we are enabled to switch to the our main screen after splash screen so can you tell me how i can do it ?

[@praveenagrawal3828]

acha mazaak thaaa

[@iril]

thank you very much for your time and effort to create this tutorial.

[@HelloCodepur]

Your welcome. Thanks for being a part of this journey..

[@aryansethi5508]

Hey man thanks alot ! I tried to make my own splashscreen and it worked. There is one problem though. Like you printed a message in console after 5 seconds duration, what I did was use Navigator.pushnamed and passed my homepage() so that it shows after the splash screen. It worked but as soon as the splashscreen duration ends, I do enter into my homepage but with a 'back' symbol option on the top left corner of my screen and if I press that back button I go back to my splash screen. Please help me out

[@Abhi_9301]

Navigator.pushAndRemoveUntil( context, MaterialPageRoute(builder: (context) => WelcomePage()), (Route route) => false, ); Use "pushAndRemoveUntil" instead of push and don't forget to include the last line.. Happy coding..

[@msopheak3371]

Hello i need your help, how can i delete the White color or customize the seconds before loading to the App???

[@amirolahmadjamaluddin4160]

Tq for this awesome tutorial... nice job... more video mr pawan

[@HelloCodepur]

Your welcome. Thanks for being a part of this journey..

[@yoriichi28]

hello bro i want native screen animation.. how can i do it ... what i mean is when u start app it show first white screen then it show our custom splash screen but i want to animate that first white screen with logo .. help me pls>

[@Redonkeyulous]

Thanks for this amazing tutorial. Love Ya!!!

[@HelloCodepur]

Thanks 😍

[@floridosmarpepa8904]

I would like to use the circular progress indicator for a timer, each second it will take a chunk of it and delete it until nothing remains and timer 0 with sound alarm. How could I architect this kinda of system? No specific code but what's the best way I can manage do this? Maybe is another widget not the circular progress indicator?

[@TheNovaManagement]

Thanks for sharing your knowledge !!!

[@HelloCodepur]

Your welcome. Thanks for being a part of this journey..

[@joyalajohney467]

Very Useful buddy, Keep it UP ! :)

[@IshmeetSinghahuja]

Hi Pawan.. thank you for doing this .. your videos are amazing and great to learn from. Why don’t you open a patreon account and we can support you and your work monetarily .. thx for doing this and keep it up :)

[@HelloCodepur]

Hi Ishmeet, thanks. There is a patreon account - patreon.com/mtechviral

[@rajath8529]

Your doing crazy things buddy!!! Keep going..

[@jcrengarcia]

Thank you! Helped me a lot

[@oswaldmboussa9350]

this tutorial was very helpful to me

[@marcoantonioestrelloguadar4200]

Hi! very good video, how can i do the "Steps" you have at the begining, i mean the skip and next button an the information? like the tutorial for the first time in the app, you have a video? :( that will help me a lot pleaseee

[@nightseeker8864]

How do u use the timer at the end, to link to another screen?

[@aanfcnig]

Am trying to do same

[@shariareshuvo9403]

According to this i have built a material splash screen and also navigate it to next screen. but there are some thing i can see 1. the real white splash screen also coming with this. 2.after the splash screen gone, from the next screen when i pressed back it always come back again to splash screen. Answer this please.

[@HelloCodepur]

You can watch my real splash screen tutorial

[@shariareshuvo9403]

@@HelloCodepur Oh PK ji. I have already watched it.

[@Mafranny]

Great job! Thanks for share your knowledge.

[@shafiqph4068]

Can we add MP4 format to splash screen

[@spade5713]

is there a way to animate or to add designs to this blank white screen at 19:42 , something like twitter has done, the moment you open the app you don't see a blank white screen but a blue screen with the twitter logo in the middle , can you make a video about it

[@danm7696]

What theme are you using for vscode?

[@MattBracewell71]

Thanks for your great Flutter content Pawan. You're contributing to the growth of the Flutter community :-) I hope you'll cover how a splash screen is used to inform the user on the progress of app loading/initialisation. So far my mini experiments have yielded results that just don't seem to warrant a splash screen - which is great! I'd imagine that I'll want to implement a splash screen whenever I need to load some data that the app relies upon for basic functionality - right? Kind regards

[@HelloCodepur]

yes ! and your welcome. Thanks for being a part of this journey..

[@haque5234]

Great work keep it up!!

[@TiagoBacana]

ARMAZING

[@deepjyotibaishya7576]

how can i enable one time splash screen like i tntro slider .. if {Splash done one time} than Do not need to show 2nd time

[@bohdansamusko]

Nice tutorial, Thanks! Is there a way to remove a white screen which is displayed while starting the app?

[@HelloCodepur]

yes read the pinned comment and ill make a video on that too

[@JobSearchKro]

how to add another screen in this splash screen pls help

[@edneymesquita7334]

What theme are you using?

[@ivaskuu]

Nice! What theme of colours are you using with VSCode?

[@JoeMGL12]

How can I change the color of the progress indicator?

[@deepjyotibaishya7576]

sir, its working nice but its show again and again intro splash screen how to set this one time

[@berkantay435]

Dude I need the name of your vscode theme. Really liked it!

[@HelloCodepur]

Don't remember now but it was some peacock theme I guess

[@blogsanjeevTechnical]

Congratulations for binary 10010+subs achievement... Bol pawan... Keep it up.. Kyoki Party abhi baki hai. #blogsanjeevtechnical

[@HelloCodepur]

thanks bro

[@AhmedHasanAl-Qadhi]

good

[@androidindusa6115]

Impressive... What editor you are using by the way ?

[@HelloCodepur]

i use Vscode

[@simonkalu]

My VScode editor does not show flutter debugger correctly even when my installation was done right. What could be causing this kind of issue

[@peet91pop]

good work , thanks pawan

[@HelloCodepur]

Your welcome. Thanks for being a part of this journey..

[@sarandhanushsarandhanush2470]

can i do flutter freelance jobs...i have a slight experience in flutter development

[@vijayakumard4084]

why its showing white screen after launching the app

[@komalbarde4091]

there is a white screen before we launch the app how can we eliminate that

[@abiwaqas5867]

Don't you always stuck at splash screen if you press back button??

[@CodeWithSajjan]

bro please create tutorial on Chatting App

[@mcotechtv4180]

How to add image in bro instead of creating a circle

[@ONEON26]

Hello, when you start a flutter app, the screen is dark or white for few secs. How to eliminate this?

[@HelloCodepur]

You should read my pinned comment for that

[@ramjisubedi1991]

before the loading splash screen, the white screen displayed. how to remove this white screen?

[@anishkalra2219]

How to navigate to another page from the splash screen ?

[@petercalin9455]

that wasn't a Splash Screen but a page after the Splash Screen. compare the way your WhatsApp opens to the way its App opens and you'll see the difference

[@MyChanneltutzzzzz]

helpful video

[@AndreyPiterov]

Thanks, Pawan. Great explanation. But is there a walkthrough screen tutorial already?

[@HelloCodepur]

yes

[@swatibhattarai3303]

Can I use this source code and modify it for my own company?

[@_azeem_muzammil]

Bro, whenever you type a letter the app hot reloads, how did you do that?, For me, I have to save each time. That is fine but yours seems to be awesome. 😎

[@uchechukwuprincenwulu2026]

Visual Studio Code yeah? use Debug mode.

[@fahedsayyad6757]

how to remove white splash screen is my problem help me

[@ramjisubedi1991]

When pressing the back button, the splash screen shows why? Is this correct splash screen

[@labrucine]

Ramji Subedi no

[@Abhi_9301]

@@labrucine Kariokar Kariokar 15 hours ago Navigator.pushAndRemoveUntil( context, MaterialPageRoute(builder: (context) => WelcomePage()), (Route route) => false, ); Use "pushAndRemoveUntil" instead of push and don't forget to include the last line.. Happy coding..

[@sarandhanushsarandhanush2470]

post a video of flutter freelancing

[@TusharRai2]

How the Stateful widget code is auto written, is there any plugin for that and how to do it in android studio

[@HelloCodepur]

it’s template available in all the IDEs

[@TusharRai2]

But when I am typing StatefulWidget it only write the typed code it doesn't popups any template code

[@HelloCodepur]

write stful

[@TusharRai2]

Yes this worked thanks

[@RaviPrajapati-ih4js]

Video start 4:30

[@shubhamagarwal8432]

This is not the splash, This is the first controller. Please put the splash on launcher thing. The white screen which is coming in the starting is the splash. Please make video on that.

[@MF2PBH]

I have some issue in running flutter Device connected the doctor check crashed

[@MF2PBH]

What can I do

[@motionsegment]

how can i install the emulator you used in this video ?? i can't find any way to install it thanks

[@dagabangel]

i believe its vscode

[@petercalin9455]

emulator = Windows OP, Simulator = iOS OP in this video, he used a *Mac Book* in Windows you can't open a Simulator

[@sanelekhumalo6901]

How do i put an animation on the splash screen?

[@jay403]

where can i find its source code. Please add link here.

[@codehovafromflycombinator3622]

subscribed.

[@alisimon9010]

how do i navigate to the other information in the app when Splashscreen duration is finished?

[@HelloCodepur]

You can pass the data through constructor

[@alisimon9010]

thank you. keep making great videos

[@fulltoss3646]

It is not a splash screen, splash screen should be added from Xcode for IOS, In your project actual splash screen is that white screen, in IOS splash screen comes immediately, not after white screen delay

[@vrkv380]

After 5 seconds, from splashscreen i go to Intro screen but when i click the mobile back button and go to splash screen again the timer set on splashscreen wont work and splashscreen hangs. why?

[@andiasrafil6570]

replace pushNamed in void goToHome to pushReplacementNamed

[@Abhi_9301]

Kariokar Kariokar 15 hours ago Navigator.pushAndRemoveUntil( context, MaterialPageRoute(builder: (context) => WelcomePage()), (Route route) => false, ); Use "pushAndRemoveUntil" instead of push and don't forget to include the last line.. Happy coding..

[@Abhi_9301]

@@andiasrafil6570 Kariokar Kariokar 15 hours ago Navigator.pushAndRemoveUntil( context, MaterialPageRoute(builder: (context) => WelcomePage()), (Route route) => false, ); Use "pushAndRemoveUntil" instead of push and don't forget to include the last line.. Happy coding..

[@honchogameplay4753]

What is this emulator?

[@panchanimittal2212]

It is not working on my project

[@ikedacripps]

hi, link to facebook group not working

[@biswajitbehera1]

Flutter hot reload automatically in every second how?

[@HelloCodepur]

i save the file every second in vscode via settings

[@bhavneetsingh5864]

Noob question how to change from full screen to regular screen

[@shubhamarora547]

please sir aap hindi mein bhi video banaye

[@oscardiez8521]

17:00

[@MaxwellSotoRamos]

This not a splash screen, is just a "screen"

[@CarlosYN]

this is not the correct way to add a splash screen to you app, this way you only make the app more slow and make the user waste time, the correct way is putting the splash screen as backgroung for you main page

[@HestonSinurayaJogja]

This is not a splash screen, this is just an ordinary page which delay your app to show. To author, please don't misguide people.

[@HelloCodepur]

There are 2 videos I have made for splash screen. You can check them out

[@kamilpius8185]

Its not real splashscreen!

[@lazboi2787]

This is not splash screen.

[@besttouristplaces2595]

Bhai kya bacho ki coding sikha rha h, white screen is still showing. There is nothing to learn from this video. If you are good developer try to remove this default splash screen i e white screen