Native + Animated Splash Screen in Flutter | Flutter Tutorial [2022] | Android & IOS

Подписаться 5 тыс.

Просмотров 63 тыс.

50% 1

Splash screen is more important than you think it is, let me convince you with 3 reasons...👊
But first here's a written tutorial - www.flutteruid...
1. The first impression counts😉
the splash screen is like a greeting of the app to the user and forms the initial opinion whether to stay or leave in a fraction of seconds.
2. Improve UX 😍
Having a good designed Splash surely set a Tune for the rest of the app like the one from Amazon Kindle it surely sets the mood for reading.
3. Brand Awareness 🤙
Every Startup / Business owner wants the user to recognize their band logo/statement. well, the splash screen is the best place for it with no need to spend an extra penny.
Wanna Master Notifications in Flutter?
Join the waitlist and get huge special discounts - www.flutteruid...
Video asset from - / flutter.master
Source Code - [github.com/Flu...](github.com/Flu...)
Speed Codes -
Food Delivery App UI, like never seen before - [ • Flutter Project - Food... ]( • Flutter Project - Food... )
Meditation App Speed Code - • Meditation App UI from...
More tutorial from us -
Lottie animation in 220 seconds - • Lottie Animation in Fl...
**Animated Pull to Refresh in Flutter -** • Animated Pull to Refre...
Socials
Instagram - / flutteruidev
Twitter - / ui_flutter
Email - flutteruidevofficial@gmail.com
#flutter #flutterdev

Опубликовано:

11 окт 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 51

@sumitmahajan5722 2 года назад

This is much much easier than adding the asset manually in android manifest or elsewhere for native splash screen. This is amazing !! The bonus part was lit as well

@flutteruidev 2 года назад

Thanks bro, glad you like it 🥰

@oscarfuentes7866 Год назад

It's easier but it's not a good practice...

@Winged-F Год назад

Amazing !!! Could you explain how to make the home page open automatically after the animation time finished (4 sec) ??

@rmahmadkhan 2 года назад

In case of the animated splash screen, this seems like first, you're showing a native splash with black color and then a screen (Splash Screen) with video. What's the way to show the animation on native splash?

@flutteruidev 2 года назад

Sure there are new splash screen API for Android 12 Check this out developer.android.com/guide/topics/ui/splash-screen

@YouMatter-f3l 7 месяцев назад

i have created a stateful widget splash screen, is it possible to use this as native splash screen ?

@_anas_shuaib Год назад

I have a big problem, everything worked very well, but my problem is that the picture does not change no matter how hard I try, I deleted it! And I changed it, restart the project, everything is possible and even delete the application. However, the old one does not disappear at all. I hope to help you as soon as possible. Really

@flutteruidev Год назад

Can you provide a video i am not sure what arenyou talking about

@RonaldHuurman Год назад

me to color is oke , but no image

@nashah25 Год назад

@@RonaldHuurman For me the image is same old Flutter logo. But the color is coming.

@jimcomccabe3 Год назад

previously i had a FutureBuilder as home in my app in order to init firebase sdk and know if the user is logged in or not. Now if i place the splash screen as you say as home in my app where and how should i init firebase sdk?

@flutteruidev Год назад

Well i personal do firebase initialized ion in main function

@mohammedsolyman3891 Год назад

thank you very much

@jcperez7925 2 года назад

Error: Cannot run with sound null safety, because the following dependencies don't support null safety: - package:splashscreen

@flutteruidev 2 года назад

Hi , Check the flutter_native_splash_screen package

@mrwaseemmalik5766 Год назад

How to put custom screen in splash like label on top or bottom or two images in row in center etc

@flutteruidev Год назад

There are two ways 1 you can design a splash you want and create a png image which than we can add as native splash screen 2 you can create a screen which you can design however you want

@muhammednashaf8136 2 года назад

Hi, I tried the videoplayer method and it's working perfectly on the simulator but when I try it on a real device it's not working even though I tried with internet permission. Please help me to resolve the issue thanks

@flutteruidev 2 года назад

I guess there might be problem with the setup of video player package, once check the package docs

@ahmadnasir001 Месяц назад

How to add gif?

@istiaq6641 Год назад

Can I use lottie animation instead of video?

@flutteruidev Год назад

Yes you can

@richmondessel942 2 года назад

I have my own Custom Splash Screen animation in a form of code. How do i implement this?

@flutteruidev 2 года назад

Same way as we did the Nike animation. Simply replace the code with your animation the Nike one

@bebowael9707 Год назад

it's work but can i run it on desktop run it only works on mobile

@sardorbektalatov3078 2 года назад

the image on my app is showing small how can I increase the height and width just by height and width command works?

@flutteruidev 2 года назад

we too have deal with this. Redoing with a higher resolution image works

@sardorbektalatov3078 2 года назад

@@flutteruidev so I have increase image's hieght and width manually right thanks 😊

@bebowael9707 Год назад

how can i fix this error please " LateInitializationError: Field '_controller@21111393' has not been initialized."

@flutteruidev Год назад

Check if the control is initialized in initstate Or else Add a if statement to check _controller is not equal to null

@yoriichi28 Год назад

can u tell me without video how can i animated logo or native splash screen

@flutteruidev Год назад

You can try Lottie animation

@meba5649 Год назад

what if i want to make the splash screen a color gradient for light mode and different one for dark mode

@flutteruidev Год назад

There is package call flutter_native_splash_screen, Init we can pass different splash for light and dark mode

@MyStudio919 Год назад

Dear Sir, How to remove Native Splash Screen in Flutter. Please help me🙏

@flutteruidev Год назад

It's a good question, sure we will release a video in it, but check this blogpost which will help you out -codingwitht.com/how-to-add-flutter-native-splash-in-2022/#:~:text=To%20remove%20a%20flutter%20native,and%20package%20from%20the%20system.

@michaelisijola6881 Год назад

How do you override launch_background.xml with the above

@flutteruidev Год назад

Actually it is a video😁

@carlafuh9481 Год назад

Slow down the video and you will see this is not a splash screen. You simply made the splash screen dark, followed by the next screen that contains a video in a black background

@flutteruidev Год назад

You are not wrong, At the time of making this video, this was and till to this day is best way to add animated splash screen. Android 13 have add support to animated but it very limited, this way is far better both in term of reability and customisation

@prasaddd77 Год назад

How can I reduce the duration for which the splash screen stays on screen for flutter_native_splash?

@flutteruidev Год назад

We can't control the duration of native splash screen, the duration of native splash screen depends upon device performance

@diego.moraes Год назад

very good

@MuskanBajra Год назад

how to make it full screen splash screen if one has portrait video

@flutteruidev Год назад

On mobile you won't have problem, just check if the device is in portrait or landscape mode and based on the you can rotate the video either if the video player have any property to do that or you can always you transform