Flutter Onboarding Screen Tutorial - Flutter eCommerce App

[@alitalaee7468]

i watched 6 video of this tutorial. and it was amazing till here. thanks for your time

[@CodingwithT]

I am glad it’s useful

[@MachineLearning-rw7jd]

Wow! He provided even the assets for us in the source code! What a legend!

[@CodingwithT]

Thank you 🙏

[@illumi98]

@@CodingwithT hello. i write a question to you 8 days ago. please answer. i write the question once again here: Hi! in 10:19 i can't find "new | package" menu context in android studio 2023. is there a way to show the menu? or is it the same thing with the command line: "flutter create --template=package your_package_name"?

[@muhammadsiddiq3598]

@@illumi98 bro how did you access the code ,i saw its paid

[@murtazaahmad1539]

you are laying there are no assets free

[@CodingwithT]

Dear, start kits for both Admin panel and App are available free at $0 since the launch of this project. Every asset that may require plus additional files are included in the starter kit project. If you need a full source code of the app, then you have to pay.

[@hassanaly.1]

A much needed tutorial for the beginners.❤

[@CodingwithT]

Glad it's helpful ☺️

[@krishnashrestha4154]

While tapping nextPage function call, the page is loading directly, loosing smooth animation, Fixed it by //Update current page index and jump to the next page void nextPage() { print(currentPageIndex.value); if (currentPageIndex.value == 2) { //Login Screen } else { int page = currentPageIndex.value + 1; pageController.animateToPage( page, duration: const Duration(milliseconds: 300), // Adjust the duration as needed curve: Curves.easeInOut, // Adjust the animation curve if desired ); } }

[@CodingwithT]

It might be helpful for someone. Thank you 🙏

[@zeelax7345]

Thanks.

[@bell3746]

Thank you mister T, really gratefull for these videos, may Allah bless you

[@CodingwithT]

So nice of you

[@azeemhassanch]

Awesome work brother, keep making such great tutorials to help mankind.

[@CodingwithT]

Thanks, will do!

[@luis96xd]

Thanks for this tutorial!

[@CodingwithT]

You're welcome! 😊 I'm glad you found the tutorial helpful! 👍🎉

[@neglasuleiman2355]

perfect tutorial i cant wait to see the end if possible i need in deep tutorial on utilities helper and functions

[@CodingwithT]

Glad it's helpful 🐱

[@td8043]

hii i have the done the code correctly , my screen isnt getting updated of the backend part though. Could you help me out please

[@CodingwithT]

Make sure to have an Obx() widget or make sure to update the UI using setState if you are not using Getx

[@maazafridi2090]

Awesome Tutorial.... Thank u. keep it up

[@CodingwithT]

I'm glad it was helpful 😀

[@legardemontcho6739]

static Color darkContainer = Tcolors.white.withOpacity(0.1) can be changed by static const darkContainer = Color(0x1AFFFFFF). 1A here corresponds to 0.1 opacity. This way of doing things avoids creating a TColors class, which makes the code even cleaner. What do you think?

[@garycampbell7077]

The Idea behind the colors class is to be able to manage color differentiation in the containers. Your way is cleaner yet it is also less efficient in that, that particular container can only be used for a single purpose. It is better to have standardized containers that can be re purposed through the use of different color backgrounds etc. sometimes more is less. I like the way you're thinking though.

[@s.m.asaduzzaman7520]

whats the name of the website for gif icons? please

[@CodingwithT]

Visit icons8.com

[@cryptoairdroppp]

thank you for this amazing content, subbed :)

[@CodingwithT]

You welcome 😁

[@ahmedfouad1802]

Hi thanks you for amazing tutorials am following all the steps but next bottom on pressing didn’t go to next page also skip not working but swiping working.. what is missing or wrong please

[@CodingwithT]

Make sure skipPage and nextPage functions in the controller are correctly implemented and bound to the skip and next buttons' onPressed callbacks. If you need further assistance, feel free to ask.

[@disneldel]

Thank you very much for the work and help But we start from part 4 to 6

[@CodingwithT]

You welcome. You can watch previous videos as well from the Playlist link provided in the description.

[@shehzadhussain491]

Clicking on next button of onboarding screen page navigates to 2nd page only after that next button doesn't work and this error occurs: The following _TypeError was thrown while handling a gesture: type 'int' is not a subtype of type 'Rx'

[@CodingwithT]

This error typically occurs when there's a mismatch in the expected type and the actual type being used. In this case, it seems like you might be trying to assign an int value to an Rx object, which is causing the error. To resolve this issue, ensure that you're using the correct types throughout your code, especially when working with reactive programming and Rx variables.

[@shehzadhussain491]

@@CodingwithT thanks i was missing the . value

[@drg7527]

Followed the codes line by line but im getting this problem too

[@drg7527]

I even replaced the nextPage function into the skip button to see if it works but it still doesn't

[@magedali4457]

What do you use for the TdeviceUtils, how do you make that code? is it a package? or because i really need it.

[@CodingwithT]

you can get the utils in the app project starter kit from the product link in the description

[@wissammerheb69]

Hi, perfect tutorial, I got this exception when trying to go nextPage() Exception has occurred. _AssertionError ('package:flutter/src/widgets/scroll_controller.dart': Failed assertion: line 158 pos 12: '_positions.length == 1': ScrollController attached to multiple scroll views.)

[@CodingwithT]

It seems like you have attached the same ScrollController to multiple scroll views, which is causing the assertion error. Make sure that each scroll view has its own unique ScrollController. If you're using a single ScrollController, consider using a separate one for each scroll view to resolve the issue.

[@MuhammadUsama-vv1wo]

Hello Sir!! at 22:50 i've done according to your instructions in the video, My whole code is error free and while swiping its working but i'm unable to navigate to next pages using next buttons and dot navigation buttons. Also it can't help me to go to the login page as i've created it & linked it successfully. Only Skip button is working properly. Can You tell me the reason and solution. Please

[@CodingwithT]

You can use Get.to(() => const LoginScreen()); for nextPage() function. after removing the comments of Get.to(LoginScreen())

[@muhammadkhalilurrehman6463]

@@CodingwithT have done this also but its not going too

[@cscpurnia1038]

Height and width not work. gif is not resize according to value given in height and width. please help me

[@CodingwithT]

You can also wrap it in a widget and give height and width of that widget.

[@fhihung]

perfect tutorial. Will you use other state management ?

[@CodingwithT]

That's the plan! For now GetX and after that other state managements as well.

[@FelipeCampelo0]

I am a very beginner. Could you please explain what is a controller in Flutter?

[@CodingwithT]

You can learn the flow in kzbin.info/www/bejne/eF69qpavZ5mJpNE at 03:06 and if you want to learn about getx controller watch this video kzbin.info/www/bejne/iKWqh36Jgb-hjZI at 04:33

[@Sonic20555]

شكرا من كل قلبي T❤

[@CodingwithT]

You're welcome! I'm glad I could help. ❤️

[@andal-s1726]

I thought It was helpfull I code as you show in vidéo, but skip and next button does not work.. I lost so many times to find where is the problem.. if someone has the solution plz help

[@CodingwithT]

Please make sure you have added onPressed properly and you can reach me at WhatsApp [phone]

[@phantuoi_it_247]

tôi nghĩ bạn quên dấu ' ( ) ' phía sau skipPage trong onboarding_skip

[@TeguhHarits]

hi sir what do you use for make this presentation slide show?

[@CodingwithT]

Hi, I didn't get you. Can you please explain more what you mean with presentation?

[@bill__j]

Hi Leader, please can you advise which software did you use to animate onbaording images

[@CodingwithT]

Images used in the onboarding are gif files

[@WaseemKhan-zc3ru]

Assalamu Alaykum can you provide me link for images used in on boarding GIF files if you provide me, it’s lots of help to me, jajak Allah khair…

[@kadercherif232]

Hello thank you for this beautiful work, but please where did you download your gif

[@CodingwithT]

Icons8 and Lottie

[@zumbarto]

How can I enable the horizontal guidelines? I mean this; MyApp (Root Widget) ├── Scaffold │ ├── AppBar │ │ └── Text (Title) │ └── Body │ ├── Column │ │ ├── Text (Message 1) │ │ ├── Text (Message 2) │ │ └── RaisedButton (Button)

[@CodingwithT]

In android studio, Go to settings=> languages and framework => flutter=> show UI guidelines to build widgets(make it true) and apply

[@bhardwaj_abhi3421]

what was the use of currentPageIndex in code , neither the dots nor the pageview is using this variable . Does changing the currentPageIndex trigger state change and rebuild widget tree ?

[@CodingwithT]

Exactly 👍

[@bhardwaj_abhi3421]

@@CodingwithT in next button clicked event currentPageIndex+1 is assigned to page variable and then pagecontroller is jumped to that page , how come here currentPageIndex is not assigned the incremented value ? and how does state got changed without change in currentPageIndex variable

[@omgitsammer]

Jumpto not working it should be jumptopage in all cases

[@TorreApps]

10/10!

[@CodingwithT]

Awesome 🤩 thank you

[@brunophambu8780]

I can't find the SmoothIndicator code in the video. However I see that you imported it, is it a native widget or am I the one who made a mistake?

[@CodingwithT]

Please re watch the video as it's a library that I imported in the pubspec

[@brunophambu8780]

​@@CodingwithTI was able to solve it by installing it directly from the command line with "flutter pub add smooth_page_indicator THANKS

[@caob1876]

It won't allow me to get an instance of the controller for the skip button? not sure how else to access instance

[@CodingwithT]

Not allowing?

[@mhamadhamed4941]

We should give you an award of some sort

[@CodingwithT]

Thank you so much! Your appreciation means the world to me! 🏆😊

[@MichaelAjayi-ez5yr]

Hello sir, please I am having an issue, when I tap the skip button, it's jumping to the first onboarding screen, what could be the problem?

[@muhammedemad9782]

because you did set the first boarding screen as home in the beginning

[@MichaelAjayi-ez5yr]

@@muhammedemad9782 pls what should I do to resolve that?

[@CodingwithT]

Hi, you can use pageController.jumpToPage(2); to navigate directly to the desired page. This should resolve the issue you're experiencing.

[@SeriatyTn]

can't find the code source in the description

[@CodingwithT]

Here is the link of the source code codingwitht.com/product/flutter-ecommerce-app-with-firebase/

[@ggdtechnology-uf1rw]

I want to buy this 29$ but let me know one thing can I use this for personal use or can I upload this into Playstore

[@CodingwithT]

In order to do the distribution you should get the extended license from the Envato

[@ggdtechnology-uf1rw]

@@CodingwithT Okay what is the cost of it

[@ggdtechnology-uf1rw]

@@CodingwithT I Just want to save my time. this is region why I want to purchase this app for commercial use

[@CodingwithT]

Visit here and also make sure to change your package name before publishing as it should always be unique. codecanyon.net/item/empower-your-development-journey-with-our-fullstack-flutter-ecommerce-solution-envato-exclusive/49680338

[@takundachamaona]

Sorry but when i finished my screen still goes from splash page to blank.. please help

[@CodingwithT]

Make sure you're properly navigating to the onboarding screen after the splash screen. If you are still facing the issue, you have to debug the code.

[@CodeEasy11]

My Splash screen is working in light and dark mode but my Onboarding screen is not working in dark mode can uh please help me out in this

[@CodingwithT]

Just make sure the theme is added and also you are using dark mode if else

[@smasaduzzaman9808]

Just Awesome

[@CodingwithT]

Thank you 😊

[@wog4299]

from where do you get these amazing gifs ?

[@CodingwithT]

I'm glad you're enjoying the gifs! I source them from various platforms, but one of my favorite resources is icons8.com.

[@wog4299]

@@CodingwithT thanks

[@muhammadrabeet9550]

sir i want to deploy my own app like olx in pakistan and i want to build it by using skills can you help us??

[@CodingwithT]

Please reach me at [e-mail] or WhatsApp at [phone]

[@dhirajjadhav5236]

is it having both user and admin interfaces

[@CodingwithT]

Yes

[@CodingwithT]

Admin panel is coming Soon

[@thephalcon]

Sir I am new which one is gud flutter or native Android

[@CodingwithT]

Both have pros and cons but as per the market demands. Go for Flutter

[@SomeshGumachi]

next page has bug i solved by adding listener to controller to solve.

[@sohelindian1988]

kindly provide splash screen image size as well as onboarindg image size

[@CodingwithT]

For the Splash screen size is 460 x Width & Height where as the icon inside is only 250 x width & height. This means, the icon should have a space around it. For the Onboarding you can use any size because we are making sure to assign only 60% width to the total screen.

[@ayushpanchal3646]

why you have had depression installed in your machine sir! XD , you know what am talking about

[@muhammadsiddiq3598]

?

[@CodingwithT]

It seems like you're referring to a playful comment about encountering unexpected issues or errors while working on a project. While it's common for developers to encounter challenges and frustrations during development, it's important to maintain a positive attitude and seek solutions to overcome obstacles. If you're facing any specific issues or need assistance with your project, feel free to ask, and I'll do my best to help!

[@ayushpanchal3646]

@@CodingwithT brother i was talking about valorant installed in your machine 🤦🏻‍♂️thank you for concern tho

[@usamayounis8208]

hey sir i want a assets folder how to get this folder

[@CodingwithT]

You can get the starter kit from the product link in the description.

[@leulsolomon6588]

where can we get those gif icons, the website please

[@CodingwithT]

You can get those from icons8.com or Simply download the project Starter kit from the link in description

[@BansariRadadiya]

i have error in onBorading.dart image data invalid

[@CodingwithT]

Check the url and if extension

[@alghanykennedy]

please sir, share image & asset used

[@CodingwithT]

You can download the project Structure with all the images and assets with complete app structure and helper classes from the link in the description.

[@Huma786-tm6fv]

Sir ya image kaha sy ly gy website

[@CodingwithT]

You can get these from icons8.com

[@musautmani6706]

Is it paid code and resources or we can get free?

[@CodingwithT]

You can get the resources and structure for just $1 or more as much as you want to give away. 🥰

[@usamayounis8208]

i need a souce code sir bcz i am a beginner

[@CodingwithT]

You can get the source code from the link in the description

[@usamayounis8208]

i think sir this is a paid a @@CodingwithT

[@divyanshsao3846]

how to get similar gifs??

[@CodingwithT]

You can get them from icons8.com

[@divyanshsao3846]

@@CodingwithT thankyou and your videos are very informative , thanks for creating it

[@tapukoko4507]

You play valorant.. haha I do too. Lvl60 tho 😅

[@CodingwithT]

😁

[@aouadicharaf1038]

❤❤❤

[@shaibfavour5632]

@CodingwithT Please how do i resolve this issue when i run my pub get command ("12 packages have newer versions incompatible with dependency constraints.")

[@CodingwithT]

To resolve this issue, try updating your dependencies in pubspec.yaml to compatible versions or run flutter pub upgrade to update all packages to their latest versions. You might need to adjust version constraints if necessary

[@thyagosouza8087]

My freiend, in the content of the last button of the image 'next', how do I modify just it? Help me pls! in onboarding_next_button.dart: onPressed: controller.nextPage, child: controllerValue == 2

[@CodingwithT]

You have to wrap it with Obx in order to redraw the design

[@bilalahmedkhan941]

Sir (get/get.dart) file missing

[@CodingwithT]

Add that in the import or check if you are using Get package