Flutter Carousel Slider with Dots | Flutter eCommerce UI Design

Welcome to this insightful Flutter eCommerce tutorial, where we will explore the creation of a Flutter Carousel slider complete with navigation dots and horizontal scrolling capabilities.
► 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 | kzbin.info...
DETAILS
Our journey begins with the utilization of the ClipRRect Widget to add rounded corners to the images, enhancing their visual appeal. We'll then delve into the Carousel Slider widget, enabling smooth horizontal scrolling of the images, allowing users to navigate through your app's content effortlessly.
To further refine the user experience, we'll craft navigational dots using the Container widget and align them precisely with the slider using GetX. This ensures that your users can easily track their progress within the carousel.
By the end of this tutorial, you'll have the skills and knowledge to design a captivating and user-friendly Flutter Carousel slider for your eCommerce app. Let's dive in and start creating this dynamic and engaging component!

[@user-wx1lo8ex2l]

your work is really great !! Big thanks for your effort.Can you tell me how to make images adaptable to web page view and not only phone screen ?

[@TanveerAhmad-yg1jv]

Thank you bhai for uploading videos on a daily basis routine. May Allah give you more success.

[@CodingwithT]

So nice of you

[@pranaytejachethireddy9035]

@@CodingwithT yes

[@adityasahu5262]

Why didn't we used smooth page indicator here. Like we did in onboarding screen design ? It can also be used right ?

[@CodingwithT]

Yes you can use that. I just make it simple and also for the learning purpose. 🎉

[@maazafridi2090]

awesome........

[@CodingwithT]

Thank you 😊

[@abderrazakschannel4491]

This live will be available on the channel as a video?

[@CodingwithT]

Yes it will. You can watch it anytime

[@mahmoud_hamdy_flutter]

best one

[@CodingwithT]

Thank you for the compliment! I'm glad you found the video helpful.

[@divyanshmehta2287]

Is the promoslider widget reusable since we are using homeController to manage the state. So if we use promoslider more than once than wont those two use same controller instance ? which might mess up the states...

[@CodingwithT]

Nice question. The widget is reusable which is designed and to handle the navigation of each slider you have to manage its state.

[@Nethaji_Karthick]

Particular zone level app development like Swiggy

[@Mrlikeandshare]

thanks siiir

[@CodingwithT]

You welcome

[@luisangelparra2011]

Please include the promo banner images into the the project Starter kit

[@CodingwithT]

Thank you for your advice. i will add that in starter kit

[@anisurrehman4274]

@@CodingwithT Sir Abitak apne Add nahi kia Promo Banner anisurrehman

[@murtazaali9346]

where can I get starter kit?

[@sohelindian1988]

where to get promobanner images or kindly send promo banner sizes?? Jazakallahu khair in advance.

[@CodingwithT]

You can download these assets and images inside the project Starter kit from the link in the description. As far as Sizes are concerned, you can choose any size but make sure all the banners have the same size.

[@TheArtOfWarStrategy]

@@CodingwithT you didn't include promo banner images in the starter kit that's we need the size of the image please

[@bhuvan6926]

Bro...in assets folder... You haven't added categories and banners ... Images.... Where i can get those???

[@CodingwithT]

Not added? All the things are added in the starter kit

[@bhuvan6926]

@@CodingwithT ok brother... Thank you

[@user-qd6ez3go9j]

with fairebase?

[@CodingwithT]

Yes Firebase will be attached in upcoming Backend videos. 🎉

[@muvut3144]

Sir ye Facebook google icons kese download karen.....or app jo font folder me jo app ne add kiye wo kese karen.....??😢

[@CodingwithT]

You can download the starter kit with all the assets for free

[@sohelindian1988]

but where ?@@CodingwithT

[@YasirKhan-ue7np]

Please make one video on how to make responsive flutter UI?

[@CodingwithT]

There are two types when it comes to Design Apps. Responsive design and Adaptive design. I'll create a video on it. Meanwhile you can also search 🔎🎉

[@natheerasm]

Please upload a video sign in and sign up validation used firebase

[@CodingwithT]

That will be in the next section of this playlist

[@Nibyyy816]

which emulator you are using ??

[@CodingwithT]

It's a physical device

[@sadaqatmustafa4638]

Which device are you using for development purposes? p.s: Keep uploading. Your videos are very helpful

[@CodingwithT]

Thank you, I will. Device is a physical android phone to run apps and HP for development. Along with that mac and again physical IPhone to test iOS parts.

[@murtazaali9346]

where can i get starter kit?

[@CodingwithT]

From the link in the description. Just choose Starter kit and download that for free

[@CreativeMindOfficials]

What is the images size.

[@CodingwithT]

If you want the same images then you can download the starter kit for free from the link in the description

[@user-ji6dg6wt1s]

how to give space between each item ?

[@CodingwithT]

You just have to change the CarousalOptions( viewportFraction: 1) to any number. Space will add when you go down from 1 to 0. E.g add 0.8 as a viewportFraction so space will be added

[@user-ji6dg6wt1s]

no, i need the image to visible fully , didn't need to see other images , but then also space not adding between each image@@CodingwithT

[@Nethaji_Karthick]

This app like multiventor registration, upload img, tag , description and fully Payment integration, and delivery boy app and all in one administration,

[@CodingwithT]

Yes it'll be something like that.

[@CreativeMindOfficials]

Images Size of slider

[@CodingwithT]

Size of the image is different only you have to get the rectangular images

[@user-ot7fn4cz7d]

I Already download the starter kit, I need the Source code please🙏🥺

[@CodingwithT]

You can download that too and link is in the description

[@aouadicharaf1038]

❤❤❤

[@CodingwithT]

🎉

[@07umar.akhtar]

taimour bhai jis speed main ap sikha rae mainay Burhay ho jana LOL love ur way of teaching but thora speeed pakrain please please

[@CodingwithT]

Hahaha 🤣 ab to Daily video aa rhi h 🥶🥳

[@AmriFatma-xj3mo]

Thanks a lot can u help me for my app dev for free 😢

[@CodingwithT]

Please reach out to me at WhatsApp Message Coding with T on WhatsApp. wa.me/447456285429

[@techapptal]

[@CodingwithT]

💕