Latest Flutter Splash Screen Tutorial 2023 | Splash Screen Design UI

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

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

50% 1

Welcome to this instructive tutorial, where you'll master the art of crafting a captivating Flutter Splash screen using the native approach. Get ready to elevate your app's first impression using the flutter_native_splash package tailored specifically for Flutter.
► Flutter eCommerce App Course: • Professional Flutter E...
🎊 E-COMMERCE APP
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
🎁 DOWNLOAD SOURCE CODE: codingwitht.com/product/flutt...
❤️ FLUTTER E-COMMERCE APP PLAYLISTS
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
► Complete E-Commerce App : • Professional Flutter E...
► Section - 1 Configuration : • Professional Flutter P...
► Section - 2 Login App : • Professional Flutter P...
► Section - 3 eCommerce UI : • Flutter Complete Ecomm...
► Section - 4 Login Backend: • Flutter Firebase Cours...
► Section - 5 eCommerce Backend: • Flutter E-Commerce App...
❤️ SUBSCRIPTIONS
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
► Join Patreon to Access Premium Content: / membership
COURSES
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
► FLUTTER CRASH COURSE • Flutter Crash Course f...
► LOGIN APP FIREBASE • Flutter Login App - UI...
🧑‍💻 RELATED VIDEOS
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
► Custom App Bar: • Flutter Custom AppBar ...
► Custom Shape: • Flutter Clip Path Tuto...
► Circular image: • Search Bar and Horizon...
► Grid Layout & Product Design : • Gridview in Flutter wi...
► All Products Page Design • Flutter All Products P...
FOLLOW US ON SOCIAL MEDIA
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
💻 Facebook | / codingwithtea
💻 Instagram | / coding_with_tea
❤️ Subscribe | ru-vid.com...
CHAPTERS
00:00 Introduction
00:54 Add Native Splash Package
01:20 Create new file for Splash
01:56 Add color and image to native splash screen
03:40 How to add Native Splash Screen in Flutter
04:38 How to remove Native Splash Screen in Flutter
DETAILS
In this comprehensive guide, we won't just stop at the basics. You'll learn how to create and design Flutter Splash Screens for both light and dark modes, ensuring a seamless user experience no matter the environment. Say goodbye to a one-size-fits-all approach - discover how to use different icons and images for light and dark modes, allowing your app to adapt to the user's preferences effortlessly.
But that's not all! We'll delve into the intricacies of Android 12 Splash screen design, so your app stands out in the latest Android ecosystem. Customize your Splash screen by adding background colors, tweaking foreground colors, and seamlessly integrating images to create a visually stunning entrance to your app.
Whether you're a seasoned developer or just diving into the world of Flutter, this tutorial has something for everyone. Elevate your app's aesthetics, user experience, and functionality with the knowledge you'll gain here. Don't miss out on this opportunity to level up your Flutter skills and create impressive Splash screens that leave a lasting impression.
Don't forget to like, subscribe and hit the bell icon so you never miss an update!
#tstore #codingwitht

Наука

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

3 авг 2024

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

@ryansumbele3552 2 месяца назад

I recommend finishing this project tuotrial guys, i did just 90% of it and it was enough to get me a flutter developer job at an e-commerce company in my country.

@CodingwithT 2 месяца назад

Many many Congratulations 🥳 🙌 🎉🥳 I am glad it’s very helpful to you.

@CodingwithT 2 месяца назад

Can you please comment this on other videos or maybe in the first video ❤️

@ryansumbele3552 2 месяца назад

Okay sure.

@overbyte 5 месяцев назад

top man - thanks a lot dude

@CodingwithT 5 месяцев назад

You're very welcome! If you have any more questions or need further assistance, don't hesitate to ask. Happy to help!

@user-pu6tl8io8w 10 месяцев назад

"This tutorial is incredibly helpful! The step-by-step explanations and clear demonstrations made it easy to understand and apply. Thank you for sharing your expertise -

@CodingwithT 10 месяцев назад

Thank you so much dear 🤩

@disneldel 10 месяцев назад

thank you

@CodingwithT 10 месяцев назад

You're welcome.😊

@user-gf1yn4wu2s 7 месяцев назад

Can you please say me how you have that device in android studio as it has only Pixel devices

@taufeeqahmad3629 10 месяцев назад

can't wait to complete it ! Yesterday I bought the source code but I waiting for tutorials to complete it.

@CodingwithT 10 месяцев назад

Thank you 😊. I'm trying to speed it up.

@aouadicharaf1038 8 месяцев назад

❤❤❤

@CodingwithT 8 месяцев назад

💕

@HassanAli-od8gx 8 месяцев назад

Any specific reason to use splash.yaml file instead of creating a file splash.dart and call it in the main.dart file for few seconds. i usually see this approach in other tutorials.

@CodingwithT 7 месяцев назад

There is a default splash white screen when you run the app. This way we can replace that White screen with our splash. You can also implement the .dart file

@HassanAli-od8gx 7 месяцев назад

@@CodingwithT thanks for the reply.

@shahidwani6445 5 месяцев назад

Sir, what are the dimensions of images that u used for splash

@CodingwithT 5 месяцев назад

Not sure but I guess it’s 150 x 150 and also add some space around logo

@figmaguru 6 месяцев назад

Without visual how I start learning this tutorial 😢😢

@td8043 5 месяцев назад

When I’m running the command at 4:06 , first it showed run in the root directory. I did that , now it’s showing error in exception handling , there is no flutter_native_splash in pubsec.yaml even though there is

@CodingwithT 5 месяцев назад

did you run this? "flutter pub add flutter_native_splash"

@muhammadfaris1646 4 месяца назад

Maybe u need to rename the splash file into flutter_native_splash.yaml I have same issue because im using vs code as my IDE. I try using this method and it works for me

@td8043 4 месяца назад

Issue resolved

@aanmeegam.arivom 7 месяцев назад

hello brother, its not working in iOS emulator. its shows error as "CocoaPods not installed or not in valid state. Error launching application on iPhone 15 Pro Max."

@CodingwithT 7 месяцев назад

It happens sometimes when your IDE is unable to find some path. Here is the expected solution: sudo gem uninstall cocoapods && sudo gem install cocoapods restart IDE or Editor The last step should solve the issue if not close the project entirely. Note: CocoaPods often take more then 5 to 10 minutes or some people reported an hour so sit related and enjoy the ☕

@aanmeegam.arivom 7 месяцев назад

@@CodingwithT ok I will

@Dewnam 19 дней назад

When I run it says error on line 41, column 5 of pubspec.yaml: a dependency may only have one source. How do I fix this?

@CodingwithT 17 дней назад

It throws an error because of Indention. It is important to maintain Indention while adding a dependency in pubspec.yaml. If you didn't find the solution then I am here for your help.

@reemadhainy 2 месяца назад

when i run the app to see the splash screen i got an error in the dart analysis that says the name "MyApp" isn't a class in the location widget_test.dart , how can i sole it :(

@kiminara3045 14 дней назад

did you find a solution? ,please I have the same issue.

@CodingwithT 13 дней назад

Just delete the test file. Or you can give any class name to that you have created. This error is because the main.dart have only one class MyApp and you have removed it or changed the name of it.

@user-rw2cp8or2m 10 месяцев назад

I am from Yemen and when I open your website I faced this error 'Sorry, this item is not available in your location.'. Thanks for every things🌹

@CodingwithT 10 месяцев назад

I didn't get your question. My website is not available there?

@haikal1680 4 месяца назад

Error: unable to locate asset entry in pubspec.yaml: "assets/fonts/Poppins-Regular.ttf". Failed to compile application. how to fix this… when i removed font asset entry fir poppin light, it give me that

@CodingwithT 4 месяца назад

It seems like the error is indicating that the asset entry for the "Poppins-Regular.ttf" font is missing in your pubspec.yaml file. To fix this issue: Open your pubspec.yaml file. Ensure that you have the correct path to the "Poppins-Regular.ttf" font file listed under the "assets" section. It should look something like this: assets: - assets/fonts/Poppins-Regular.ttf Save the changes to your pubspec.yaml file. Run flutter pub get to ensure that Flutter fetches the font asset. After completing these steps, try running your application again. If you're still encountering issues, double-check the file path and ensure that the font file is located in the specified directory. Let me know if you need further assistance!

@Dewnam 19 дней назад

Hey when I run it it says” error on line 41, column 5 of pubspec.yaml: a dependency may only have one source.

@satishchouhan2809 8 месяцев назад

i need this type splash screen please tell me how to create this splash

@CodingwithT 8 месяцев назад

I created this using Photoshop

@karansukhani6389 5 месяцев назад

flutter_native_splash is run successfully but when I am running it the same flutter logo pops up

@CodingwithT 5 месяцев назад

Try removing flutter native and add again.

@karansukhani6389 5 месяцев назад

I tried it but the same appears with the flutter logo ,It is not showing the image I added @@CodingwithT

@SA-nx1pp 5 месяцев назад

facing same problem@@CodingwithT

@IzzatH-pk4xx 2 месяца назад

do you resolve this already? I just restart my devices and last resort, restart android studio

@karansukhani6389 2 месяца назад

@@IzzatH-pk4xx Yes it is resolved

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

where you have design your logo please share the link

@CodingwithT 16 дней назад

You will get the logo with the assets from the App project starter kit codingwitht.com/product/flutter-ecommerce-app-with-firebase/

@fabriciomedeiros987 10 месяцев назад

Hi, what's images sizes ?

@CodingwithT 9 месяцев назад

you can get images from cwtstore.gumroad.com/l/Flutter-Project-Starter-Kit.

@fabriciomedeiros987 9 месяцев назад

@@CodingwithT thank you!

@sampletest-vi1zn 2 месяца назад

Android 14 Not Proper Show Image In Center , Round Circle Inside Image , How To Remove Round Circle In Splash Screen ?

@CodingwithT 2 месяца назад

Make sure its not added in the image you are uploading

@dhruvnarang2111 4 месяца назад

can you provide me the same images of the splash Screen as you added?

@CodingwithT 4 месяца назад

you can get the assets for free from the App Project Starter kit from the link codingwitht.com/product/flutter-ecommerce-app-with-firebase/

@fathimaifla9215 3 месяца назад

Sir please help me my splash screen isn't working . I have 8gb ram laptop

@CodingwithT 3 месяца назад

Make sure you have proper indentation (spacing) in the splash file and everything is properly added

@ghulammurtaza7959 10 месяцев назад

yar is course ki videos jaldi lao

@CodingwithT 10 месяцев назад

Bro i don't have a team, i am working individually. I am trying my best to speed up the process. 😊

@figmaguru 6 месяцев назад

Please provide assets file or size of all assets like image,icons and illustration ☹️🤕

@CodingwithT 6 месяцев назад

It's added in the description 🎉

@alghanykennedy 10 месяцев назад

sir i have error, image is not showing. Please help

@CodingwithT 10 месяцев назад

Please recheck your image size and check if its properly added. Also check indentation(spacing).

@alghanykennedy 10 месяцев назад

@@CodingwithT what size i should use sir?

@maazafridi2090 8 месяцев назад

2 spaces from the left side@@alghanykennedy

@erperejildo 8 месяцев назад

why is my image being cut?

@CodingwithT 8 месяцев назад

Add spacing in your image

@erperejildo 8 месяцев назад

@@CodingwithT how much?

@adamilham_ 7 месяцев назад

Can I have the assets file pls?

@CodingwithT 7 месяцев назад

Please download the free starter kit which has all the assets 😀

@cisco3854 7 месяцев назад

If you try this for Android 12 && above you will have a huge headache because of the splash screen package.

@CodingwithT 7 месяцев назад

I'm using Android 12 and it's working fine.

@awisadestiny5459 7 месяцев назад

How did you resolve it because I'm currently facing similar issue, the image isn't showing

@cisco3854 7 месяцев назад

@@awisadestiny5459 I have a final exams these days , and the solution of this issue is so freaken long and hard , so as soon as l finished I will send you a message, but the only way I know to solve it is from Android studio.

@yoityoboy 4 месяца назад

i'm having that problem, how did you fix it??

@illumi98 3 месяца назад

Im using android 12, pixel 8 emulator. And it runs just smooth

@gante3313 7 месяцев назад

The image I want to add to my application does not fit into the box given to me. The box is too small, the image is 600,600px. I would be very happy if you help me how to edit (image) flutter_native_splash: ^2.3.7 flutter_native_splash: color: "#22092C" android: true ios: false fullscreen: true android_12: image: lib/assets/devv.png branding: lib/assets/yeni2.png

@CodingwithT 7 месяцев назад

Just spacing around your image and upload it again.

@gante3313 7 месяцев назад

@@CodingwithT Thank you very much, good luck bro