Flutter Splash Screen tutorial with animation | Splash Screen 2023

[@badaruldin73]

@Codingwitht i follow your android toturials since my university for the completion of my fyp, and now flutter. Awesome teaching method.💗

[@CodingwithT]

Thank you 😊

[@rashidali6724]

Great tutorial Guru ji , I just started working with Getx and it is so cool ...

[@CodingwithT]

That's Great 😃👍 Best wishes

[@rashidali6724]

@@CodingwithT thank you sir ❤️

[@NicolasBUTET]

Hi, great tutorial but I have a problem with the navigation after the splashscreen has redirect to my HomePage. Impossible to navigate to another page, it always redirects to my HomePage. Do you have an idea ? Thanx.

[@CodingwithT]

Well as there are only 2 screens which might be either stateless or Stateful widgets so, it's difficult to say that it's default behavior. Have you created a controller with onReady()?

[@kairu7815]

for converting that stateless widgets to stateful widget for vscode. window: ctrl + . MAC: cmd + .

[@alquranalkarim6312]

Nice job thank you . But i have problem the first screen is flutter native splash of last course then comes this animation splash in second screen . How to remove flutter native splash of the last course ?

[@CodingwithT]

Thanks dear 😊. You can find the command to remove native splash from the link provided in the description. (Code & Resources)

[@aliappdevelop]

What about white screen before the splash screen? I know for that we need to use flutter_native_splash but there is limitation of multiple images. Do you have any idea regarding this solution?

[@CodingwithT]

You are right currently I have not figured out any ways 😕

[@achrafelaffas]

Hi, Thank you for the tutorial. Can you please update the pngs link?

[@Shahrukhkhan-ng5dp]

Images you used in app where we get it

[@zeeshanpc]

What text styles / font did you use for this screen ? Its not there in your theme, and text_theme files.

[@CodingwithT]

Please watch the theme tutorial kzbin.info/www/bejne/h2qpoKZ3mb1li5Y and after that you can get all the code from codingwitht.com/flutter-login-app

[@flutterIgnite]

Mast T. Dropping gold tutorials

[@CodingwithT]

Thank you so much! I'm glad you're finding the tutorials helpful. If you have any questions or need further clarification on any topic, feel free to ask. Happy coding!

[@nimesh519]

thank you very nice explaination neat and clean code also

[@CodingwithT]

Thank you 😊

[@GuzSurya]

Hallo, great tutorial. But why i still see white screen before custom splash screen show? How to remove it?

[@CodingwithT]

Because if you watched previous tutorial about native splash screen then that is the one you need to remove white screen.

[@TrikNgonlen]

A W E S O M E !

[@CodingwithT]

Thank You

[@vaibhavkumarpatel6863]

Why we are using the "t" tSplashImage in constant in flutter. Please explain what is the meaning of "t"

[@CodingwithT]

Buddy don't get confused with t. I just use t as Coding with T and make custom classes start with t to remember. You can use your own or just simple name. 🥂 Cheer's

[@WebDev.Farhan]

Can you give me the size of the splash image and splash top icon?

[@muhammadhassantahir8531]

I am just doing the same way but on my screen text images are showing in bigger sizes. Why?

[@CodingwithT]

It might be because you don't have padding around and the image is set to cover all space.

[@farhanjohari1990]

@@CodingwithT how to put the padding im still new to flutter...

[@MrFaizanh]

Can you please also display the files that you've imported in each file. That way it is easier to follow this tutorial.

[@CodingwithT]

Sure Faizan I will but you can grab these images from Icons8.com

[@mitcode1760]

@@CodingwithT hw to search it

[@abbasshah1418]

Aoa guys casn someone Tell me what he did at 9:09 Code: Navigator.push.Replacement(context, MaterialPageRoute (builder: (context) => Welcom_ _ _ _?) im facing an error : Undefined name 'Welcome'.

[@CodingwithT]

It's a WelcomeScreen() and this Navigator.pushReplacement is Simply removing the previous screen and open the Welcome Screen

[@БогданОвсиенко-ы4ъ]

hello, thank you for the video. What image sizes should I use?

[@CodingwithT]

That depends on where you are using the image.

[@SuperAussi3]

Thanks a lot 🎉

[@CodingwithT]

You welcome 🤠

[@rodrodrigues1729]

Awesome!

[@CodingwithT]

Thanks 👍

[@rodrodrigues1729]

@@CodingwithT how could I make them fade out before the redirect?

[@etazoku6387]

Hello, first i would say you do a great tutorial. I dont know if it's normal but when i start the application, the native SplashScreen of flutter still start and after my own splash screen is play. Is that normal and there is a way to change that ? Thanks for this tutorial

[@CodingwithT]

Hi, thank you. About your question. If we talk about practicality, only one splash screen should be used. If you want to use native splash which is recommended then you shouldn't use this custom animated splash.

[@etazoku6387]

@@CodingwithT Ok thank you, I think I expressed myself badly, when I launch my application for the first time, the flutter logo appears then after my splashscreen launches, is there a way to directly have my SplashScreen ? but once my application is launched and I do realod hots, I only have the splashscreen that appears

[@mehakjiwani864]

same issue, has it been fixed ? @@etazoku6387

[@Saurabhhhh]

Can you please make a web admin panel of this application!! also show how to add push notifications. it would be helpful ⚡️ Thankyou.

[@CodingwithT]

That's a Great 😃👍 Suggestion. I'll try to incorporate it

[@jabidhasan8512]

How can i get those images that you have used in the project sir ?

[@CodingwithT]

You can get such images from Icons8.com

[@faruktabutcuogullar2614]

native splash screen did not disappear for me. First native splash screen then custom splash screen opens. How can I fix this?

[@CodingwithT]

You don't have to create/call a custom splash screen, when you have a native splash. If you don't want your custom splash screen to be appeared, just don't call it.

[@dhanashrigirase157]

can you please provide images which are used in video at website i cant get it

[@CodingwithT]

Sure I will make them available in the website

[@repkuc]

how i can delete or deactivate native splash screen in my app? in pubspec i was comment all lines with native splash screen. but it shows anyway

[@CodingwithT]

Please read the post given in the video description to deactivate the native Splash

[@mehwish3043]

how to get same images ?

[@hafsaabid586]

from which site can i get such kind of animated images?

[@CodingwithT]

Go to icons8.com

[@Same7z]

Super

[@CodingwithT]

Thank you 😊

[@muhdluqman1358]

Can you make video responsive web,android,ios?

[@CodingwithT]

For Android & IOS this series will be helpful as we try to make an app that will be able to run on any size of mobile device. Will also create a responsive app for all three. 🤠✌️

[@toshinenkosen9976]

Hello, can you share your AVD Skin with us ? thank for the tutorials by the way.

[@CodingwithT]

It's a physical device. 🤓

[@Noumandev]

bhi muja splash top icon chahi ha kidr sa mila ga??

[@CodingwithT]

Wo m ny kud design kiya tha Photoshop m

[@Noumandev]

apka pas para ha to send kar do bro @@CodingwithT

[@nisarg8477]

didn't discuss how to changes images in dark mode ?

[@CodingwithT]

I suggest you watch my new playlist of e-commerce in which I talk about this in Login Screen design. But simply you can create a variable which checks the active screen mode. Inside build method create a variable like.. final isDarkMode = Theme.of(context). brightness==Brightness.dark; And now use the isDarkMode variable in your design to change the image. Image(isDarkMode? AddDarkImageUrl : AddLightImageUrl;

[@programmermasud8657]

i can't find the assets

[@CodingwithT]

Sorry dear, I'll share them tomorrow morning

[@programmermasud8657]

@@CodingwithT thanks

[@CodingwithT]

Not a problem 🤠

[@akhilps9626]

where i can get those pngs?

[@CodingwithT]

From the description link. Or visit CodingwithT.com/flutter-login-app

[@mitcode1760]

can't download images fro drive. 404

[@ariesxd6571]

The welcome one is missing nor shown

[@CodingwithT]

Welcome screen?

[@ariesxd6571]

@@CodingwithT solved sir thank you very much sir

[@CodingwithT]

That's Great 👍🤠

[@Matrix-jp2jn]

@@CodingwithT welcome screen is missing

[@jaydeepadvani8001]

Hello please create Playlist with configuration Apis

[@CodingwithT]

Noted 😃

[@Nuur_Rajput]

we've created animation in 10 mins of this video .... what's the point of doing all that after 10 mins ???? is it necessary???

[@CodingwithT]

Its a State Management and It helps to use Separation of concern and make our life easy.

[@khawlakhawla4344]

Your work is so attractive to me but why you don't share the images😕😕

[@CodingwithT]

Thank you dear, actually images causing Copyright issues that's why

[@livebandar6615]

@@CodingwithT atleast say us where to buy it

[@CodingwithT]

Dear I'll this image with you 😊

[@Hamza-yq7sj]

Images link not worked......

[@CodingwithT]

Sorry! I'll update it today.

[@incognitoguy2395]

@@CodingwithT Please update it...

[@muniirabdullahi4481]

@@CodingwithT Please update image link

[@UtifeInc.-up1jf]

I don’t understand GetX... can you please make a separate tutorial

[@CodingwithT]

Sure, I will

[@sanaishaq7306]

image link is not working, 404

[@CodingwithT]

Oops 🤫. I'll update it 😃

[@allhzzenmiserable2295]

link download image error 404

[@appkartsolution2961]

Hi

[@CodingwithT]

Hi ✌️🤠

[@odtu4948]

where is images bro

[@CodingwithT]

Link is in the description

[@sanjapkoki]

Getx just erases everything i have learned so far about stateless and stateful widgets