Flutter Onboarding Screen Tutorial | Habit App | speed code

Lean how to create onboarding screen in flutter for a Habit Tracker Flutter App. I will show how to create splash screen to replace the white screen or default flutter logo when launching the app. create an onboarding screen with dot indicator also I will set the onboarding screen to show only one time.
⭐ Project Starter files: github.com/ton...
⭐ Completed Code: github.com/ton...
Part 2 sign up page: • Sign Up page UI design...
Part 3 login page : • Login Page UI Design H...
⌛ Time Stamp
Starter Files Walkthrough - 0:19
Splash Screen - 0:47
Onboarding Page - 2:01
Onboard dot indicator - 8:23
Load onboard for first time only - 18:43
🤹Topics Covered:
flutter splash screen
flutter shared preference
👉 Recommended Laptops for Flutter Development:
HP Pavilion 15 Ryzen 5 amzn.to/3FqwxIF
Lenovo IdeaPad Slim 5 11th Gen amzn.to/30aS2Nm
ASUS VivoBook 14 (2021) amzn.to/2YyNI9W
ASUS ZenBook 14 (2020) amzn.to/3AjHVSM
Apple Mac Mini with Apple M1 Chip amzn.to/3oZ8gUj
#flutter #dart #androidApp #onboarding
🍧 UI Credit
www.pixeltrue....

[@FlutterMapp]

Awesome onboarding UI 🔥🚀

[@AyushPanditofficial]

Bro u are here

[@tonydavidz]

Thank you 🙌

[@quochoantran6771]

Thanks you so much! I like the way that you share with us your starter and final source code! It's help a lots!

[@tonydavidz]

Glad to hear that!

[@arshanali3729]

Can I have the complete code ? Theres only starter files in your github mentioned in the video's description

[@Cassandra-Shorts-ytb]

how good is the size of the background image as a splashscreen?
I have tried to use the background image as a splashscreen but why is my background image enlarged and the important part is not visible on the screen. the logo image also becomes very small different from my design.
any solution sir?

[@tonydavidz]

if you set fullscreen value to false in flutter native splash properties your background image will not enlarge.

[@daily_praise]

Thanks! Great video, really helpful. God Bless you

[@Apdeveloper]

What's your system configuration dude

[@tonydavidz]

its a hackintosh
CPU: Intel i-5 8500
Motherboard: Asus TUF Z-370 plus
Ram: 16GB Adata XPG
let me know if you want to know the full configuration.

[@lmarkrol]

is the onboarding screen only work once for the first time when the app installed?

[@tonydavidz]

Yes, the onboarding will only appear for the first time when launching app

[@goodmorning6286]

Can I see onboarding screens after uninstalling and reinstalled

[@tonydavidz]

yes, when you uninstall shared preference data will be cleared from your phone.so when you reinstall you will get onboard screens.

[@TrikNgonlen]

A W E S O M E !

[@ronaldsethoga667]

great work sir!!!

[@kenjikakashi]

Nice tutorial. I love it. Btw, where's the part where you created the splash screen?

[@harishlearnscode]

you directly get the splash screen using the flutter_native_splash library

[@princeyu3589]

Nice work bro. Btw let me ask bro. How to change the text of the different screen? Just like your text "We can help you to be a better version of yourself". I want to change the text in the second and the third screen but how?

[@tonydavidz]

inside onboarddata.dart file add Richtext to the onboard class property then in the onborading contents list call richtext add RichText widget with values.

[@yanzgex7800]

Good Job bro 👍

[@tonydavidz]

Thanks ✌

[@abinjohn8568]

Good job bro

[@tonydavidz]

Thanks

[@a.7853]

Where can I find the source code please?

[@tonydavidz]

i have given link to source in description

[@HuacayaJonny]

@@tonydavidz It seems only the code for the skeleton is linked? Could you recheck?

[@abhishekmaldikar9704]

UI/XI provide pls

[@tonydavidz]

Hi, Take a look at description link for ui design is at the bottom.

[@hegelmotokoua]

🙏 Your vs code police plz

[@tonydavidz]

police?

[@hegelmotokoua]

@@tonydavidz font police