Flutter Custom Splash Screen Tutorial | Flutter Native Splash Screen Guide

💼 Book a meeting: cutt.ly/Pegxp5rA
💎 Ultimate Flutter UI Kit: cutt.ly/3w6tqwFA
In this video, we will take a look at creating a custom splash screen for your Flutter application. The tutorial with showcase the fundamentals when it comes to creating native splash screens for Flutter apps. Furthermore, we will take a look at using the flutter_native_splash package to create our splash screen for Flutter. This guide will help you setup and navigate through the process of adding a fully functional splash page to your flutter application. This is an excellent guide for beginner Flutter developers, or anyone looking to learn about implementing splash screens in Flutter the proper way.
Resources:
Source Code: cutt.ly/UwLYSsxX
flutter_native_splash: pub.dev/packag...
Socials:
Website: hussainmustafa...
Github: github.com/hus...
LinkedIn: / hussain-mustafa-960920184
Twitter: / hussain34274892
Buy Me A Coffee: www.buymeacoff...
#flutter #fluttersplashscreen #fluttertutorialforbeginners #fluttertutorial

[@moneyman-ne9lw]

I appreciate the real-time coding examples and the troubleshooting tips you provided. Looking forward to implementing this in my projects!

[@m_hussain_mustafa]

You're very welcome!

[@rlt_app]

Incredibly helpful tutorial! Your explanations are crystal clear, and I appreciate the attention to detail in each step.

[@m_hussain_mustafa]

Glad you enjoyed it!

[@vihangaharshana]

thanks man i been trying to make the splash screen work for couple hours now. finally fixed it

[@m_hussain_mustafa]

Glad I could help

[@MHM-jy4uj]

The tutorial is well-paced, and I love the practical tips you included.

[@m_hussain_mustafa]

Glad it was helpful!

[@sa_lihrecords8687]

Nice presentation,keep going ❤

[@m_hussain_mustafa]

Thank you, I will

[@ilyas1569]

You are a life saver bro, thanks so much 🙏

[@m_hussain_mustafa]

You're welcome.

[@aouadicharaf1038]

❤❤❤ More complete projects plz! ❤❤❤

[@m_hussain_mustafa]

I’ll try to release more complete projects.

[@joelpeter1645]

I really appreciate your tutorials man thanks a lot 🤗

[@m_hussain_mustafa]

You’re very welcome. Thanks for your support.

[@shubhambajaj2611]

Thanks! This was helpful.

[@m_hussain_mustafa]

You're welcome!

[@shubhambajaj2611]

@@m_hussain_mustafa I am getting black screen on iOS rather than splash screen. Android is working fine tho. Would you be able to help? Thanks in advance

[@AnoopThiruonam]

Nice video! really helpful. Should I remove the package dependency after creating the required files?

[@m_hussain_mustafa]

Yes you can but since it is a dev dependency it is not included in the app build for production.

[@MrIMacro]

Could you please show us how to make the splash screen shows only once when the user runs the app for the first time?

[@saidbouzid1677]

Could you tell me how to get rid of the circle and display the entire photo?

[@aminarasheed5779]

thankyou so much🥰

[@m_hussain_mustafa]

You’re welcome 😊

[@marwanalaghbry1171]

how to solve the image cropped on android 12 is there specific dimensions to be applied ??

[@saliqjavid3908]

bro i had a doubt if i have to choose which screen to show first based on values in shared prefrences e,g i have to choose between login screen and home screen how will i achieve that

[@m_hussain_mustafa]

That is not the purpose of a splash screen you'll have to most probably create some logic during the initialization of your app to check if user is logged in or not and then redirect them to appropriate page.

[@Aprendecomodogue]

Thanks my friend, you helped me a lot.

[@m_hussain_mustafa]

You are welcome!

[@trexDubO7]

Subcribed🔥 Very helpful 🔥🔥🔥

[@m_hussain_mustafa]

You're welcome 😊

[@edwardphilipguarin6460]

i see ur logo is square like mine..but they will become circular..how to avoid that?

[@m_hussain_mustafa]

You cannot avoid this on android as of now.

[@vaarish1425]

I encountered an issue, i did everything thing but unable to fix my icon, which is displayed in circular, it's don't show proper, display in zoom in manner, so logo cropped, guide me

[@huso5279]

my icon has somehow a low graphic. do you know why this happens? i did everything like i supposed to

[@user-gp9ky3xw8k]

You cover essential topics very well. Thanks for this useful video. Are you thinking of making a video for in-app subscription? RevenueCat etc. Have a nice day!

[@m_hussain_mustafa]

Hi, I'd love to create a video on this topic, but it is much more complicated than what can be covered in one video.

[@roninspect4357]

thanks a lot!

[@m_hussain_mustafa]

You're welcome 😊

[@josephgomis1282]

Really helpful. Thanks for sharing. Can you please show how to use animated splash screen using Lottie?

[@m_hussain_mustafa]

Thank you. I’ll try to create a video tutorial on that.

[@josephgomis1282]

@@m_hussain_mustafa Great, I'm tuned!

[@TechHarbor2.0]

Thanks for this video and can you make a playlist of e commerce App with admin panel with firebase ❤❤

[@m_hussain_mustafa]

Hi, I will try creating a video on this topic.

[@andersr163]

merci et pour l'animation lottie json

[@m_hussain_mustafa]

You're welcome.

[@osamamahmoud4841]

hello , what is the splash screen image size to show in the same way in your app please provide us more details about image size

[@muhendis_]

thank you 🌙

[@m_hussain_mustafa]

You're welcome 😊

[@prasanthsakthivel]

Your videos are very helpful….Can you do videos on deployment in Play store and Apple Store?

[@m_hussain_mustafa]

Hi, Yes I'll try to create a video on this topic.

[@imranhossain3511]

sir I am using webview inside listview. but the scrolling is not smooth. is there any way to optimize this? it is too laggy

[@m_hussain_mustafa]

Hi, I wouldn't be able to help you with just this limited amount of information. If you require personalized help I'd recommend booking a meeting with me.

[@acornerofherheart-jr9pl]

hey i tried this but my app is taking logo icon as splash by default though i have given path of the image calendar which i want as splash but its taking logo as splash and not my mentioned image..... can u have solution?

[@m_hussain_mustafa]

Hi, I believe you have not done the configuration in the proper manner. Your app is just using the default splash screen as of now.

[@maazafridi2090]

Assalamoalaikum... i have used this package.. this is very good package. but I don't find any parameter what if I want to add static some text below our splash logo... which parameter I have to use... ............................ waiting...

[@mohamaddody1338]

can i increase the size of the image?

[@m_hussain_mustafa]

Yes you can specify in the configuration properties.

[@Adekacci-backup]

can't set background_image to android(I'm using android 14). What I really want is to set a splash screen that have some text at bottom, an icon in the center and another text just below the icon. I think we can't add text to flutter_native_splash so I created an image and am trying to set it as background image. Please help me, somebody

[@Fazz-mt8lr]

Sir i am doing my final year project in application development but the problem is university will approve my idea when i will implement machine learning or Aritificial intelligence in my app. So how can i implement Ai or ML in my app plZ make a video

[@m_hussain_mustafa]

Hi, I'll try my best to create a video on this. In the mean time I would recommend taking a look at running tflite models in Flutter.

[@Fazz-mt8lr]

@@m_hussain_mustafa okay💕

[@mohanamanikantaodugu37]

how can i give the size for the image

[@m_hussain_mustafa]

Hi, There should be an option to specify the sizing for the image, I recommend taking a look at the documentation for the package.

[@yashrajsinhzala6548]

what if I want to replace the native splash screen with my Flutter screen which has custom design & auth implementation. So that my screen appears as splash screen insteads of native splash ??

[@m_hussain_mustafa]

I believe you can't completely remove a native splash screen due to underlying paltform limitations atleast that is what I know you'd have to do somekind of workaround. Like show the native splash screen first and then show your own splash screen page once Flutter launches the app and make it look exactly like the native splash and then maybe animate it from there into some other design. This is a hacky way. :)

[@olaattar8166]

Pleeease can you make a video for how to make a splash screen with lottie animation

[@m_hussain_mustafa]

Hi, Although I already have a tutorial on Lottie animations on my channel, I will still try my best to create a video on this topic.

[@sakshishingne4795]

What if we don't want these native screen and remove it completely?

[@m_hussain_mustafa]

I don’t think you are able to completely remove these native screens.

[@pyaesonehan19]

[@m_hussain_mustafa]

Thanks alot. :)