Flutter Tutorial - Build A Simple Image Slider Carousel | Flutter Carousel Slider

[@HeyFlutter]

This might help you :)
👉 12 Week Flutter Training from Newbie to Expert: heyflutter.com
Source Code: github.com/JohannesMilke/image_sliders_example
Page Transition Animation Tutorial: ua-cam.com/video/_R3E_aof69c/v-deo.html
Scroll To Index In ListView Tutorial: ua-cam.com/video/VOV2V0asFaE/v-deo.html
Simple Scrollbar Tutorial: ua-cam.com/video/uY6EFne_KkM/v-deo.html
Expandable ListView Tutorial: ua-cam.com/video/ReUa_Ws8EsY/v-deo.html
Hide AppBar On Scroll Tutorial: ua-cam.com/video/xzPXqQ-Pe2g/v-deo.html
Hide Bottom On Scroll Tutorial: ua-cam.com/video/pr_Go9I19SA/v-deo.html
Deep Dive SliverAppBar Tutorial: ua-cam.com/video/s_3ak-4u43E/v-deo.html
Show/Hide StatusBar Tutorial: ua-cam.com/video/tFPA1R4zvSg/v-deo.html
Slivers & Sticky Headers Tutorial: ua-cam.com/video/QVxd0K_74Pc/v-deo.html
Scroll To Top & End In ListView Tutorial: ua-cam.com/video/XWfg_d2t_Hk/v-deo.html
AppBar & Transparent AppBar Tutorial: ua-cam.com/video/BAshFKJptFg/v-deo.html
Bottom Navigation Bar Tutorial: ua-cam.com/video/xoKqQjSDZ60/v-deo.html
Animated Bottom Navigation Bar Tutorial: ua-cam.com/video/95PEDLxEEtg/v-deo.html
Hidden Drawer UI Tutorial: ua-cam.com/video/vZ7vdMok98g/v-deo.html
Draggable Bottom Sheet Tutorial: ua-cam.com/video/AjAQglJKcb4/v-deo.html
Scrollable Sheet Tutorial: ua-cam.com/video/zxdBIwZ4hN8/v-deo.html
Animated List Tutorial: ua-cam.com/video/E3SQOqUq8Mg/v-deo.html
Navigation Drawer Tutorial: ua-cam.com/video/ts9n211n8ZU/v-deo.html
Fix Bottom Overflowed By Pixels Tutorial: ua-cam.com/video/voARoVV_EDI/v-deo.html
Expansion Tile Tutorial: ua-cam.com/video/ReUa_Ws8EsY/v-deo.html
Create Invoice PDF Tutorial: ua-cam.com/video/z_5xkhEkc5/v-deo.html

[@l.l.3609]

It's incredible! For every design question I've got, you already brought up a perfect explanation. I am very grateful for your work!

[@patrickschubert5571]

Thank you for this very nice video and showing this opportunity!

[@HeyFlutter]

You’re most welcome, @patrickschubert5571! 🙂

[@pravinshinde_9353]

i was just thinking about adding this type of effect on the app i was working and your video pop up in my feed not going to lie you are god sent 😂😂

[@HeyFlutter]

Haha @pravinshinde_9353 Thank you so much

[@cavidanbagiri7837]

Krasava Teacher. Thanks for everything. l bought 4 udemy course about Flutter and Getx, But your tutorials is the best.

[@abbyhuh1460]

Your videos are a life-saver! Thank you so much for putting it together 😄

[@chipekowasa6571]

Your channel is my daily bread

[@chipekowasa6571]

@@HeyFlutter Awesome, looking forward to more content as usual.

[@54gulnara]

I works, with your fantastic help I did it very fast and without problems.

[@HeyFlutter]

Glad to hear that, Thank you @54gulnara! 😊

[@jerichokatende8151]

spot on , The exact explanation i wanted

[@HeyFlutter]

Great, Thank you @jerichokatende8151!

[@Indynakan0]

Complete and clear turtorial. Thankyou so much for an mazing work.

[@meghasathish6367]

your videos are amazing thank youuu

[@HeyFlutter]

Glad to hear that, You are most welcome @meghasathish6367

[@333tuberob]

Superb education in UI - Thankyou, I love Image applications 👍

[@mmokenape4730]

I have to say thanks again, I've been having so many issues with using this package and you made such a nice tutorial 😫🔥

[@mdfasiuddinraihan2049]

Thank u so much ...... Got what I needed After struggling 1 hour... ...

[@fadimhats5812]

Thanks dude, you're the best

[@SalarAzad]

Very nice explanation, everything worked perfectly, saved me many hours of research, thank you!

[@swayamshreemohantyvlogs8126]

Again, you save me man. Awesome.

[@亞當-d6u]

Thank you very much, this video is wonderful!!!

[@HeyFlutter]

You are welcome, 亞當!

[@kausarfatima4371]

Incredible

[@HeyFlutter]

Thanks, @kausarfatima4371! 🙂

[@pookystudio6702]

Super super amazing content man 💥💥👍

[@haydarhilly6387]

That's was very clear and helpful. Thanks a lot.

[@HeyFlutter]

You're welcome, Haydar Hilly! 🙂

[@aminmirzakuchaki8903]

You are wonderful man, thank you so much

[@JorgeTorres-mx7bx]

Likaso amigo, excelente video, me ayuda mucho para un proyecto que estoy realizando, muchas gracias.

[@HeyFlutter]

Thanks, @JorgeTorres-mx7bx! 🙂

[@janammaharjan2699]

Your Tutorials are always great. Thank you

[@fardan511]

Thanks alot 💗

[@HeyFlutter]

You are welcome, @fardan511!

[@rauffer]

Thank you for this great tutorial!

[@edilsonroque6691]

Thaaaank you so much my friend

[@HeyFlutter]

You are welcome, @edilsonroque6691!

[@bhraman2277]

very nice tutorial. I was looking for this option, and its working now. Thanks a ton.

[@zurcnauj666]

best video ever!!!

[@HeyFlutter]

Glad you liked it, @zurcnauj666 😀

[@carolinedesouza7570]

Perfect video!! Thanks

[@ahmadprogrammer136]

Thank you sir fir this helpful tutorial
Can you tell me how to make the image slider at the top of screen after App bar directly?

[@HeyFlutter]

Thanks for the idea @ahmadprogrammer136 😀, i have added it in my list of future videos

[@rashidtwumasi6321]

I love your videos

[@marioguevara5954]

thanks a lot

[@HeyFlutter]

You’re most welcome, @marioguevara5954! 🙂

[@md.ruhulamin7963]

Thank you sir for this useful tutorial. Is it possible to create this Slider Carousel by using camera capture image?

[@funandgameswithzayn]

Hi there!
I liked you videos those a are very helpful.
I have a question. How i can customize viewportfraction. Because i want to show only left image as next image in app not the both next and prev image.
Please let me know

[@HeyFlutter]

Thank You Zain's Gaming! Follow this link: stackoverflow.com/questions/55317171/change-viewportfraction-dynamically-in-pagecontroller
I hope you will get your answer 🙂

[@funandgameswithzayn]

@@HeyFlutter thankyou for your reply as for now i want to ask that currently if we use carousal slider with multiple pictures on screen it shows us two pictures but when we slide it snaps both pictures and show us two new pictures but i want it to slide only one picture even if it is show multiple pictures on screen like move one picture at a time . Did you get my question?

[@nidhalmazhoud102]

good work again

[@subratpatro1570]

hello mike ,
iam trying to load images from my assets how to do that ?

[@emmanueljoseph2687]

Thank you very much for the quality lessons. I have a question:
Please, how can I change the background color in carousel slider?

[@HeyFlutter]

Hey, Emmanuel Joseph! Check out this solution: stackoverflow.com/a/61116773 I hope it may help you 😊

[@emmanueljoseph2687]

@@HeyFlutter
Thanks a lot.

[@emmanueljoseph2687]

@@HeyFlutter
Thanks a lot.

[@murshidahamed8317]

Sir your explanation are very good and easy to understand. Can you please add video on vertical tab bar view . specially how to use at the middle of the page i mean after 2 or 3 widget.
Thank you.

[@murshidahamed8317]

@@HeyFlutter sure sir i am struck on that for 3 days 😞 any way thank you sir...

[@mmokenape4730]

Thanks mate🔥

[@adityahiranwale1279]

Hello, Amazing video and very nicely done, Can you please tell me how to tap and open a particular image in the carousel and zoom in on it like the way we can do in amazon apps product carrousel.

[@HeyFlutter]

Thank You Aditya Hiranwale! Follow this link: stackoverflow.com/questions/43651708/how-do-i-pan-and-zoom-an-image
I hope you will get your answer 🙂

[@congtoannguyen1940]

Thank you for answering my previous question, I have one more I want to ask. Instead of using dot, can I use picture of the same product and pressing it will display the image like on amazon app

[@HeyFlutter]

Thank you, Cong Toan Nguyen! 🙂. Yes you can.

[@congtoannguyen1940]

@@HeyFlutter How can I do it, I haven't figure how to do it

[@baha908]

Great video. I have a problem with this extension. I want to set height dynamicly based on child widget so each element can have different height but couldn't do it. Any idea how it could be done?

[@iqraQazmi078]

i want smooth page indicator like as shown in your thumbnail of this video
in which active dots should be expanded and filled or inactive dots with stroke color.
How to code for this.

[@HeyFlutter]

Thanks for the idea @iqraQazmi078 😀, i have added it in my list of future videos

[@ahmedhelal9151]

Thank you sir, i have a question you add the dot indicator below the images ,
how can you add the dot indicator on the image ?

[@HeyFlutter]

Thank You Ahmed Helal! Follow this link: stackoverflow.com/questions/57613017/flutter-horizontal-list-view-dot-indicator
I hope you will get your answer 🙂

[@nikhilkumarjamwal5322]

Can you make a flutter video on carousel auto image slider with onTap() effect.
When tap on image open that image page(can be new window etc.).

[@HeyFlutter]

Thanks for the idea, @nikhilkumarjamwal5322! 🙂 I have added it to my list of ideas for future videos!

[@chuthi244]

thank your video .

[@casparbaumeister8614]

Thank you so much for all your content!
In your thumbnail the previous and next slider items are behind the center slide. Can you explain how to do that in Flutter?

[@HeyFlutter]

Thank You Caspar Baumeister! Follow this link: medium.com/flutter-community/how-to-create-card-carousel-in-flutter-979bc8ecf19
I hope you will get your answer 🙂

[@maverickwolf_]

@@HeyFlutter I went through the link you posted, that does not explain how to achieve the stack like look where the items are behind the central page

[@yusufnadaroglu4108]

@@maverickwolf_ Did you find any answer?

[@gandharvathite6181]

Hello, I have a doubt, can we implement multiple image sliders on a same page?
What if I use a scrollable view and display a set of multiple image sliders.
Will I be able to do that?
Waiting for your solution!

[@yasminekara9112]

Thank youu 💪

[@bluyetiinc7553]

Thank you.

[@اسروكورة]

thank you

[@ghulammurtaza7959]

which macbook you are using for flutter development ?

[@HeyFlutter]

Thank you, Ghulam Murtaza! 🙂. I am using macbook Pro.

[@narayanpaswan6558]

sir can i use fade in and fade out effect in this animation.Please reply as soon as possible.

[@HeyFlutter]

Thank you, Narayan Paswan! 🙂. Yes but you will have to make it custom.

[@amir_adamov]

is there any chanse to fit image till the borders of the screen?

[@bobby9568]

awesome!

[@Ange-PaterneDali]

thanks you a lot

[@HeyFlutter]

You’re most welcome, @Ange-PaterneDali! 🙂

[@sarathrkrishnan6610]

If we give autoplay true in this project. Will the smooth indicator work with autoplay?

[@HeyFlutter]

Thank You Sarath R Krishnan! Follow this link: pub.dev/packages/carousel_slider
I hope you will get your answer 🙂

[@petreefyedn0ire]

I wish this could take a callback so I can run a function once the slide happens. Or you have any ideas on how to do this?

[@petreefyedn0ire]

@@HeyFlutter I want a callback to be executed once each image scrolls. My plan is to have a container change color each time an image snaps to the center of the carousel

[@sepehramini6904]

hi i am trying to make the slides to overlap, is it possible with this package?

[@HeyFlutter]

Thank You @sepehramini6904! Follow this link: stackoverflow.com/questions/76637705/make-an-overlay-widget-in-flutter-to-slide-in-and-out-from-top-of-the-screen
I hope you will get your answer 🙂

[@twatchery]

Hey thanks for the tutorial! For some reason, everytime I rebuild the carousel, it doesn't display images from index 0 and sometimes starts at 1 or 2. The state is being preserved even thought I'm creating a new carousel object. Any help? Thanks!

[@twatchery]

@@HeyFlutter Thanks for the reply! I have done so, and narrowed down the problem to itembuilder, where the index doesn't start from 0 when I create a new CarouselSlider widget. Any help? Thanks!

[@rodro_m_]

how to squeeze the slider like the thumbnail? I mean side images come behind the center image

[@HeyFlutter]

Hey 😊, @rodro_m_! Check out this video: ua-cam.com/video/uHiTO1dfjUI/v-deo.html It contains what you are specifically looking for.

[@rajagopisurineni4641]

What can i say man, Thank you

[@rajgopi4645]

I’ve one question on this, how can I make this continuously flow(like marquee text), is there any another widget we have in flutter or can we customise Carousal builder?
Thanks in advance

[@ai-bloggers]

Hello. Please make a lesson on how to make a link to each picture. Thank you.

[@HeyFlutter]

Thanks for the idea, Разработка мобильных приложений! 🙂 I have added it to my list of ideas for future videos!

[@felipegomes4894]

You are the best!!

[@HeyFlutter]

Thank you, Felipe Gomes! 🙂

[@boredUser69]

Hi Johannes. I followed your tutorial. It worked fine but the dots don't update when I slide the images. Do you know what is wrong? I tried to download your source code too but I couldn't, the button to confirm e-mail isn't clickable. Help please

[@boredUser69]

@@HeyFlutter Ok. I'll do that again. Thanks for reply 😉

[@AbirHasnat95]

I requested for source code, but 'Confirm Your Subscription' and 'Confirm Your Email' doesn't work.

[@StarBattle08]

Is there a way to make the image into fullscreen mode when we click them?

[@shashwat_dubey_]

wrap the image in an on tap function. on tapping, navigate to a different screen which displays the same image in full.

[@chintusharma1]

In the thumnail the images are overriding over each other.But In the video they are not can you make them slide over each other as in thumnail

[@HeyFlutter]

Thanks for your feedback, @chintusharma1! 🙂

[@rick1901]

3:37 I didn't want infiniteScroll so I set it to false, but how do you align the carousel to the left of the screen because I can't figure out how to remove the whitespace on the left that remains

[@HeyFlutter]

Thank You Appelpeer15! Follow this link: pub.dev/packages/carousel_slider
I hope you will get your answer 🙂

[@matheusfigueredo7543]

On desktop i cant drag the mouse to chage images, but if i set autoPlay to true the image slide normally, any idea how can i fix this?
On mobile everything works perfect

[@matheusfigueredo7543]

My code:
class _ProjectCarouselImagesState extends State {
double currePosition = 0;
CarouselController carouselController = CarouselController();
@override
Widget build(BuildContext context) {
return Container(
constraints: BoxConstraints(
maxWidth: widget.isMobile ? 450 : 650,
maxHeight: widget.isMobile ? 306 : 442,
),
width: widget.maxWidth,
height: widget.maxWidth * 0.68,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(6),
),
child: LayoutBuilder(
builder: (context, constraints) {
return Column(
children: [
SizedBox(height: constraints.maxHeight * 0.10),
Container(
width: constraints.maxWidth,
height: constraints.maxHeight * 0.80,
child: ScrollConfiguration(
behavior: ScrollConfiguration.of(context).copyWith(
dragDevices: {
PointerDeviceKind.mouse,
PointerDeviceKind.touch,
},
),
child: CarouselSlider.builder(
itemCount: widget.imagesList.length,
carouselController: carouselController,
options: CarouselOptions(
enlargeCenterPage: true,
enlargeStrategy: CenterPageEnlargeStrategy.height,
pageSnapping: true,
enableInfiniteScroll: false,
initialPage: 0,
scrollDirection: Axis.horizontal,
onPageChanged: (index, reason) {
setState(() {
currePosition = index as double;
});
}),
itemBuilder: (context, index, realIndex) {
return Container(
margin: EdgeInsets.symmetric(horizontal: 12),
child: Image.asset(
widget.imagesList[index],
fit: BoxFit.cover,
),
);
},
),
),
),
Container(
height: constraints.maxHeight * 0.10,
width: constraints.maxWidth,
alignment: Alignment.center,
child: DotsIndicator(
dotsCount: widget.imagesList.length,
position: currePosition,
),
),
],
);
},
),
);
}
}
i'm also using dots indicator, thats why i set this
onPageChanged: (index, reason) {
setState(() {
currePosition = index as double;
});
}),

[@HeyFlutter]

Hello, Matheus Figueredo! Follow this link: stackoverflow.com/questions/69232764/flutter-web-cannot-scroll-with-mouse-down-drag-flutter-2-5, I hope it will solve your problem. Thank You 🙂

[@dwikyalfiantama9091]

how to navigate next screen every image, can you give tutorial ?

[@dwikyalfiantama9091]

@@HeyFlutter thanks, i need it to do my project at university. I will wait for the next video

[@humanheart565]

Hello i create image slider for selling products from different seller
So if click on any image to show more details about products its taking to slider screen fine.. the problem is if press back and click on another image from another seller the error shows controller doest match the property tab3 because length i put 3 for single seller so the slider can show only 3 images.. but for same time if come back and tap on another seller's images so error that tab 3 doesn't match please tell

[@HeyFlutter]

Hello, Human Heart! Follow this link: pub.dev/packages/carousel_slider, I hope it will solve your problem. Thank You 🙂

[@JohnLiuFromHK]

please help, when I tried to click the dot the second time, there is an error saying "Null check operator used on a null value". I can't find the reason ;(

[@JohnLiuFromHK]

@@HeyFlutter thanks, i think its the hot reload, it fixes the issue. Lol

[@vlsnsatyas]

how to make it to move to next image on tap or touch of current

[@HeyFlutter]

Thank You Satyanarayana kvl! Follow this link: pub.dev/packages/carousel_slider
I hope you will get your answer 🙂

[@maxdegreat566]

Can this be vertical? Or does it have to be horizontal?

[@maxdegreat566]

I just saw it has s scroll direction in the pub.dev docs

[@maxdegreat566]

Great vid, i always check ur page before others 👍🏾

[@danielm3977]

The package has a big drawback. isn't null-safety.

[@gauravvblogs4042]

plz sir github code
your coding is dont understad

[@HeyFlutter]

Thank You Gaurav Vblogs!. I showed the main functionality, which is important for this package. Learn more about it here: github.com/JohannesMilke/sponsorware

[@sanaishaq7306]

Null safety error as soon as I add smooth_page-indicator.

[@HeyFlutter]

Thank You sana Ishaq! Follow this link: flutter.dev/docs/null-safety
I hope you will get your answer 🙂

[@cheems6559]

Use hot restart....this will solve the problem

[@muhammadafzal237]

Nice.
This is working perfectly.
But I am following your other video that tells how to make video player in flutter, that is not working, I got stucked to play videos from firebase database.

[@miguelsouza7438]

Dude for really, it's a shame need to share with 8 friends to get access to source code OMG

[@imbsalstha]

what if i need to play video in slider?

[@HeyFlutter]

Thank you, Bishal Shrestha! 🙂 That can also be done easily instead of displaying image you can use video_player package for displaying videos

[@VShari12]

Lets say we ll have 20 imgs. Showing 20 dots is not a good option. How can i show just five and switch to the next one every 4th page?

[@HeyFlutter]

Thank You Vlad Hagiu! Follow this link: stackoverflow.com/questions/57613017/flutter-horizontal-list-view-dot-indicator
I hope you will get your answer 🙂

[@Theomniscientmedia]

Cons: It does not support even number of slides if you don't want a partial slide view.

[@HeyFlutter]

Thanks for your feedback, @Theomniscientmedia! 🙂

[@Bunny-rn7uh]

im trying to access source code but the button isn't working ! is this just a clickbait thing ? also one guy already raised the issue but you didn't resolved it yet

[@HeyFlutter]

Thanks, Creative Bunny! 🙂Check out this: github.com/JohannesMilke/sponsorware#2-why-didnt-i-get-an-email-even-if-i-have-sent-already-a-request-on-your-website

[@adriancabahug2331]

How to add text at the center of the image ?

[@adriancabahug2331]

@@HeyFlutter yea but i dont know how to implement that code to yours

[@HeyFlutter]

Thank You Adrian Cabahug! Follow this link: medium.com/flutterworld/flutter-text-over-image-bb045a129bae
I hope you will get your answer 🙂

[@sohampati9232]

anyone getting error: Undefined Name 'urlImage'?

[@HeyFlutter]

Thank You Soham Pati! Follow this link: stackoverflow.com/questions/72520973/undefined-name-flutterabsolutepath
I hope you will get your answer 🙂

[@yeonjin8]

My android studio says carousel slider is undefined 🥺

[@HeyFlutter]

Thank you SilverRubyJane💜, make sure to follow the tutorial step by step 🙂

[@letmeflutter6644]

awxm tutorial

[@PaulBrassington_flutter_expert]

A terrible mistake to deny Flutter developers your code, I've tried so many times but never works, put in email, github name but never works. Allow developers to your code and become more popular Johannes Milke

[@PaulBrassington_flutter_expert]

@@HeyFlutter Your videos are excellent and explanations are good, the topics are superb, so please just put a link to Github where we can download the code. Please, please, please.

[@kheireddineattala1281]

This does not remotely have the right to be as good in as little time

[@HeyFlutter]

Thank you, KHEIREDDINE ATTALA! 🙂