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

  Рет қаралды 86,706

HeyFlutter․com

HeyFlutter․com

Күн бұрын

Build an Image Slider Carousel in Flutter with indicator and dots, and add to the image slideshow an autoplay animation.
Click here to Subscribe to Johannes Milke: kzfaq.info...
👉 12 Week Flutter Training | heyflutter.com
👉 Flutter Masterclass Courses | heyflutter.com/masterclass
Source Code | github.com/JohannesMilke/imag...
My Courses | heyflutter.com
Follow Newsletter | johannesmilke.com/#/newsletter
SUBSCRIBE HERE
bit.ly/JohannesMilke
SUPPORT & SPONSOR ME
github.com/sponsors/JohannesM...
RESOURCES
Page Transition Animation Tutorial: • Flutter Tutorial - Pag...
Scroll To Index In ListView Tutorial: • Flutter Tutorial - Scr...
Simple Scrollbar Tutorial: • Flutter Tutorial - Cre...
Expandable ListView Tutorial: • Flutter Tutorial - Exp...
Hide AppBar On Scroll Tutorial: • Flutter Tutorial - How...
Hide Bottom On Scroll Tutorial: • Flutter Tutorial - How...
Deep Dive SliverAppBar Tutorial: • Flutter Tutorial - Sli...
Show/Hide StatusBar Tutorial: • Flutter Tutorial - Sho...
Slivers & Sticky Headers Tutorial: • Flutter Tutorial - Sti...
Scroll To Top & End In ListView Tutorial: • Flutter Tutorial - Scr...
AppBar & Transparent AppBar Tutorial: • Flutter Tutorial - App...
Bottom Navigation Bar Tutorial: • Flutter Tutorial - Bot...
Animated Bottom Navigation Bar Tutorial: • Flutter Tutorial - Ani...
Hidden Drawer UI Tutorial: • Flutter Tutorial - Hid...
Draggable Bottom Sheet Tutorial: • Flutter Tutorial - Dra...
Scrollable Sheet Tutorial: • Flutter Tutorial - Dra...
Animated List Tutorial: • Flutter Tutorial - Ani...
Navigation Drawer Tutorial: • Flutter Tutorial - Sid...
Fix Bottom Overflowed By Pixels Tutorial: • Flutter Tutorial - Fix...
Expansion Tile Tutorial: • Flutter Tutorial - Exp...
Create Invoice PDF Tutorial: www.youtube.com/watch?v=z_5xk...
TIMELINE
0:00 Introduction Image Slider Carousel
0:24 Create Image Slider Carousel
1:50 Set Autoplay In Image Slider Carousel
2:16 Set Space Between Slider Images
2:28 Show Only One Slider Image With Whole Width
2:53 Enlarge Center Slider Image
3:18 Disable Snapping In Image Slider Carousel
3:36 Disable Infinite Scrolling In Image Slider Carousel
3:49 Add Dots Indicator In Image Slider Carousel
6:27 Set Initial Page In Image Slider Carousel
6:46 Navigate To Any Image Slide With Manual Navigation Buttons
7:51 Navigate To Any Image Slide With Indicator & Dots
SHARE | SUBSCRIBE | LIKE FOR MORE VIDEOS LIKE THIS
*********
SOCIAL MEDIA: Follow Us :-)
Twitter | / heyflutter_
Linkedin | / heyflutter
LEARN MORE
SOURCE CODE | github.com/JohannesMilke
ARTICLES | / johannesmilke
PLAYLISTS
All Flutter Videos | • Flutter Tutorial - Flu...
Widgets - Flutter | • Flutter Tutorial - Flu...
Plugins - Flutter | • Flutter Tutorial - Flu...
Animations - Flutter | • Flutter Tutorial - Tra...
Designs - Flutter | • Flutter Tutorial - Flu...
Firebase - Flutter | • Flutter Tutorial - Pag...
State Management - Flutter | • Flutter Tutorial - Riv...
CREDITS
Copyright song "Corporate Technology" by scottholmesmusic.com
#Flutter #Tutorial #JohannesMilke
LIKE & SHARE & ACTIVATE THE BELL
Thanks For Watching :-)
bit.ly/JohannesMilke

Пікірлер: 161
@HeyFlutter
@HeyFlutter 2 жыл бұрын
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: kzfaq.info/get/bejne/lbhjeMKS1MyaaZc.html Scroll To Index In ListView Tutorial: kzfaq.info/get/bejne/jLWGZblhxtmqkXk.html Simple Scrollbar Tutorial: kzfaq.info/get/bejne/q79meKmfysWvm4E.html Expandable ListView Tutorial: kzfaq.info/get/bejne/iMuFlMKI2J6po40.html Hide AppBar On Scroll Tutorial: kzfaq.info/get/bejne/ruCAi9SCkrbJYps.html Hide Bottom On Scroll Tutorial: kzfaq.info/get/bejne/ptiPetJqrpedg3U.html Deep Dive SliverAppBar Tutorial: kzfaq.info/get/bejne/qcVjlM5emduYY3k.html Show/Hide StatusBar Tutorial: kzfaq.info/get/bejne/qqyAdJSDmeDag5s.html Slivers & Sticky Headers Tutorial: kzfaq.info/get/bejne/h7yol5N8xJ2YgJc.html Scroll To Top & End In ListView Tutorial: kzfaq.info/get/bejne/jr2WmsKVl9rDeJ8.html AppBar & Transparent AppBar Tutorial: kzfaq.info/get/bejne/eKejm6l8r9bYdps.html Bottom Navigation Bar Tutorial: kzfaq.info/get/bejne/rtV7pLSbuKq-ZmQ.html Animated Bottom Navigation Bar Tutorial: kzfaq.info/get/bejne/b5uAeKd93auppJs.html Hidden Drawer UI Tutorial: kzfaq.info/get/bejne/rMBnqcd-1NGdaJs.html Draggable Bottom Sheet Tutorial: kzfaq.info/get/bejne/d9BxhMqdr7HHkmg.html Scrollable Sheet Tutorial: kzfaq.info/get/bejne/sN6Udayov5rMfmw.html Animated List Tutorial: kzfaq.info/get/bejne/e5mDhLKiutecfZs.html Navigation Drawer Tutorial: kzfaq.info/get/bejne/qtlpoZViltSciok.html Fix Bottom Overflowed By Pixels Tutorial: kzfaq.info/get/bejne/rNVxhdKHu8WpdH0.html Expansion Tile Tutorial: kzfaq.info/get/bejne/iMuFlMKI2J6po40.html Create Invoice PDF Tutorial: kzfaq.info/get/bejne/sMVlq86ZqtHHZQ.html
@l.l.3609
@l.l.3609 2 жыл бұрын
It's incredible! For every design question I've got, you already brought up a perfect explanation. I am very grateful for your work!
@abbyhuh1460
@abbyhuh1460 2 жыл бұрын
Your videos are a life-saver! Thank you so much for putting it together 😄
@mmokenape4730
@mmokenape4730 3 жыл бұрын
I have to say thanks again, I've been having so many issues with using this package and you made such a nice tutorial 😫🔥
@bhraman2277
@bhraman2277 2 жыл бұрын
very nice tutorial. I was looking for this option, and its working now. Thanks a ton.
@janammaharjan2699
@janammaharjan2699 2 жыл бұрын
Your Tutorials are always great. Thank you
@Indynakan0
@Indynakan0 2 жыл бұрын
Complete and clear turtorial. Thankyou so much for an mazing work.
@SalarAzad
@SalarAzad 2 жыл бұрын
Very nice explanation, everything worked perfectly, saved me many hours of research, thank you!
@333tuberob
@333tuberob 3 жыл бұрын
Superb education in UI - Thankyou, I love Image applications 👍
@rauffer
@rauffer 2 жыл бұрын
Thank you for this great tutorial!
@aminmirzakuchaki8903
@aminmirzakuchaki8903 2 жыл бұрын
You are wonderful man, thank you so much
@swayamshreemohantyvlogs8126
@swayamshreemohantyvlogs8126 2 жыл бұрын
Again, you save me man. Awesome.
@carolinedesouza7570
@carolinedesouza7570 2 жыл бұрын
Perfect video!! Thanks
@pookystudio6702
@pookystudio6702 2 жыл бұрын
Super super amazing content man 💥💥👍
@mdfasiuddinraihan2049
@mdfasiuddinraihan2049 2 жыл бұрын
Thank u so much ...... Got what I needed After struggling 1 hour... ...
@cavidanbagiri7837
@cavidanbagiri7837 2 жыл бұрын
Krasava Teacher. Thanks for everything. l bought 4 udemy course about Flutter and Getx, But your tutorials is the best.
@fadimhats5812
@fadimhats5812 2 жыл бұрын
Thanks dude, you're the best
@haydarhilly6387
@haydarhilly6387 2 жыл бұрын
That's was very clear and helpful. Thanks a lot.
@HeyFlutter
@HeyFlutter 2 жыл бұрын
You're welcome, Haydar Hilly! 🙂
@patrickschubert5571
@patrickschubert5571 9 ай бұрын
Thank you for this very nice video and showing this opportunity!
@HeyFlutter
@HeyFlutter 9 ай бұрын
You’re most welcome, @patrickschubert5571! 🙂
@mmokenape4730
@mmokenape4730 3 жыл бұрын
Thanks mate🔥
@nidhalmazhoud102
@nidhalmazhoud102 3 жыл бұрын
good work again
@rashidtwumasi6321
@rashidtwumasi6321 2 жыл бұрын
I love your videos
@user-vx8lh4xi9l
@user-vx8lh4xi9l Жыл бұрын
Thank you very much, this video is wonderful!!!
@HeyFlutter
@HeyFlutter Жыл бұрын
You are welcome, 亞當!
@meghasathish6367
@meghasathish6367 4 ай бұрын
your videos are amazing thank youuu
@HeyFlutter
@HeyFlutter 4 ай бұрын
Glad to hear that, You are most welcome @meghasathish6367
@bobby9568
@bobby9568 3 жыл бұрын
awesome!
@jerichokatende8151
@jerichokatende8151 5 ай бұрын
spot on , The exact explanation i wanted
@HeyFlutter
@HeyFlutter 5 ай бұрын
Great, Thank you @jerichokatende8151!
@baha908
@baha908 2 жыл бұрын
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?
@bluyetiinc7553
@bluyetiinc7553 3 жыл бұрын
Thank you.
@chuthi244
@chuthi244 2 жыл бұрын
thank your video .
@user-ks5rv8wz4w
@user-ks5rv8wz4w 2 жыл бұрын
thank you
@yasminekara9112
@yasminekara9112 2 жыл бұрын
Thank youu 💪
@54gulnara
@54gulnara 5 ай бұрын
I works, with your fantastic help I did it very fast and without problems.
@HeyFlutter
@HeyFlutter 5 ай бұрын
Glad to hear that, Thank you @54gulnara! 😊
@pravinshinde_9353
@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
@HeyFlutter Жыл бұрын
Haha @pravinshinde_9353 Thank you so much
@kausarfatima4371
@kausarfatima4371 Жыл бұрын
Incredible
@HeyFlutter
@HeyFlutter Жыл бұрын
Thanks, @kausarfatima4371! 🙂
@edilsonroque6691
@edilsonroque6691 2 ай бұрын
Thaaaank you so much my friend
@HeyFlutter
@HeyFlutter 2 ай бұрын
You are welcome, @edilsonroque6691!
@md.ruhulamin7963
@md.ruhulamin7963 3 жыл бұрын
Thank you sir for this useful tutorial. Is it possible to create this Slider Carousel by using camera capture image?
@fardan511
@fardan511 10 ай бұрын
Thanks alot 💗
@HeyFlutter
@HeyFlutter 10 ай бұрын
You are welcome, @fardan511!
@zurcnauj666
@zurcnauj666 6 ай бұрын
best video ever!!!
@HeyFlutter
@HeyFlutter 6 ай бұрын
Glad you liked it, @zurcnauj666 😀
@gandharvathite6181
@gandharvathite6181 2 жыл бұрын
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!
@subratpatro1570
@subratpatro1570 2 жыл бұрын
hello mike , iam trying to load images from my assets how to do that ?
@amir_adamov
@amir_adamov 2 жыл бұрын
is there any chanse to fit image till the borders of the screen?
@JorgeTorres-mx7bx
@JorgeTorres-mx7bx Жыл бұрын
Likaso amigo, excelente video, me ayuda mucho para un proyecto que estoy realizando, muchas gracias.
@HeyFlutter
@HeyFlutter Жыл бұрын
Thanks, @JorgeTorres-mx7bx! 🙂
@marioguevara5954
@marioguevara5954 8 ай бұрын
thanks a lot
@HeyFlutter
@HeyFlutter 8 ай бұрын
You’re most welcome, @marioguevara5954! 🙂
@chipekowasa6571
@chipekowasa6571 2 жыл бұрын
Your channel is my daily bread
@chipekowasa6571
@chipekowasa6571 2 жыл бұрын
@@HeyFlutter Awesome, looking forward to more content as usual.
@murshidahamed8317
@murshidahamed8317 3 жыл бұрын
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
@murshidahamed8317 3 жыл бұрын
@@HeyFlutter sure sir i am struck on that for 3 days 😞 any way thank you sir...
@twatchery
@twatchery 2 жыл бұрын
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
@twatchery 2 жыл бұрын
@@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!
@ahmedhelal9151
@ahmedhelal9151 2 жыл бұрын
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
@HeyFlutter 2 жыл бұрын
Thank You Ahmed Helal! Follow this link: stackoverflow.com/questions/57613017/flutter-horizontal-list-view-dot-indicator I hope you will get your answer 🙂
@ahmadprogrammer136
@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
@HeyFlutter Жыл бұрын
Thanks for the idea @ahmadprogrammer136 😀, i have added it in my list of future videos
@rick1901
@rick1901 2 жыл бұрын
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
@HeyFlutter 2 жыл бұрын
Thank You Appelpeer15! Follow this link: pub.dev/packages/carousel_slider I hope you will get your answer 🙂
@casparbaumeister8614
@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
@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_
@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
@yusufnadaroglu4108 Жыл бұрын
@@maverickwolf_ Did you find any answer?
@adityahiranwale1279
@adityahiranwale1279 2 жыл бұрын
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
@HeyFlutter 2 жыл бұрын
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 🙂
@chintusharma1
@chintusharma1 6 ай бұрын
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
@HeyFlutter 6 ай бұрын
Thanks for your feedback, @chintusharma1! 🙂
@iqraQazmi078
@iqraQazmi078 7 ай бұрын
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
@HeyFlutter 7 ай бұрын
Thanks for the idea @iqraQazmi078 😀, i have added it in my list of future videos
@rajagopisurineni4641
@rajagopisurineni4641 2 жыл бұрын
What can i say man, Thank you
@rajgopi4645
@rajgopi4645 2 жыл бұрын
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
@StarBattle08
@StarBattle08 3 жыл бұрын
Is there a way to make the image into fullscreen mode when we click them?
@shashwat_dubey_
@shashwat_dubey_ 3 жыл бұрын
wrap the image in an on tap function. on tapping, navigate to a different screen which displays the same image in full.
@humanheart565
@humanheart565 3 жыл бұрын
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
@HeyFlutter 2 жыл бұрын
Hello, Human Heart! Follow this link: pub.dev/packages/carousel_slider, I hope it will solve your problem. Thank You 🙂
@danielogunsola9389
@danielogunsola9389 2 жыл бұрын
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?
@danielogunsola9389
@danielogunsola9389 2 жыл бұрын
@@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
@rodro_m_
@rodro_m_ Жыл бұрын
how to squeeze the slider like the thumbnail? I mean side images come behind the center image
@HeyFlutter
@HeyFlutter Жыл бұрын
Hey 😊, @rodro_m_! Check out this video: kzfaq.info/get/bejne/q66Zh7JiyczOhX0.html It contains what you are specifically looking for.
@funandgameswithzayn
@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
@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
@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?
@congtoannguyen1940
@congtoannguyen1940 2 жыл бұрын
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
@HeyFlutter 2 жыл бұрын
Thank you, Cong Toan Nguyen! 🙂. Yes you can.
@congtoannguyen1940
@congtoannguyen1940 2 жыл бұрын
@@HeyFlutter How can I do it, I haven't figure how to do it
@emmanueljoseph2687
@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
@HeyFlutter Жыл бұрын
Hey, Emmanuel Joseph! Check out this solution: stackoverflow.com/a/61116773 I hope it may help you 😊
@emmanueljoseph2687
@emmanueljoseph2687 Жыл бұрын
@@HeyFlutter Thanks a lot.
@emmanueljoseph2687
@emmanueljoseph2687 Жыл бұрын
@@HeyFlutter Thanks a lot.
@nikhilkumarjamwal5322
@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
@HeyFlutter Жыл бұрын
Thanks for the idea, @nikhilkumarjamwal5322! 🙂 I have added it to my list of ideas for future videos!
@boredUser69
@boredUser69 2 жыл бұрын
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
@boredUser69 2 жыл бұрын
@@HeyFlutter Ok. I'll do that again. Thanks for reply 😉
@AbirHasnat95
@AbirHasnat95 2 жыл бұрын
I requested for source code, but 'Confirm Your Subscription' and 'Confirm Your Email' doesn't work.
@JohnLiuFromHK
@JohnLiuFromHK 2 жыл бұрын
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
@JohnLiuFromHK 2 жыл бұрын
@@HeyFlutter thanks, i think its the hot reload, it fixes the issue. Lol
@narayanpaswan6558
@narayanpaswan6558 Жыл бұрын
sir can i use fade in and fade out effect in this animation.Please reply as soon as possible.
@HeyFlutter
@HeyFlutter Жыл бұрын
Thank you, Narayan Paswan! 🙂. Yes but you will have to make it custom.
@sepehramini6904
@sepehramini6904 Ай бұрын
hi i am trying to make the slides to overlap, is it possible with this package?
@HeyFlutter
@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 🙂
@sarathrkrishnan6610
@sarathrkrishnan6610 2 жыл бұрын
If we give autoplay true in this project. Will the smooth indicator work with autoplay?
@HeyFlutter
@HeyFlutter 2 жыл бұрын
Thank You Sarath R Krishnan! Follow this link: pub.dev/packages/carousel_slider I hope you will get your answer 🙂
@matheusfigueredo7543
@matheusfigueredo7543 2 жыл бұрын
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
@matheusfigueredo7543 2 жыл бұрын
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
@HeyFlutter 2 жыл бұрын
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 🙂
@vlsnsatyas
@vlsnsatyas 2 жыл бұрын
how to make it to move to next image on tap or touch of current
@HeyFlutter
@HeyFlutter 2 жыл бұрын
Thank You Satyanarayana kvl! Follow this link: pub.dev/packages/carousel_slider I hope you will get your answer 🙂
@danielm3977
@danielm3977 3 жыл бұрын
The package has a big drawback. isn't null-safety.
@ai-bloggers
@ai-bloggers Жыл бұрын
Hello. Please make a lesson on how to make a link to each picture. Thank you.
@HeyFlutter
@HeyFlutter Жыл бұрын
Thanks for the idea, Разработка мобильных приложений! 🙂 I have added it to my list of ideas for future videos!
@felipegomes4894
@felipegomes4894 Жыл бұрын
You are the best!!
@HeyFlutter
@HeyFlutter Жыл бұрын
Thank you, Felipe Gomes! 🙂
@dwikyalfiantama9091
@dwikyalfiantama9091 3 жыл бұрын
how to navigate next screen every image, can you give tutorial ?
@dwikyalfiantama9091
@dwikyalfiantama9091 3 жыл бұрын
@@HeyFlutter thanks, i need it to do my project at university. I will wait for the next video
@ghulammurtaza7959
@ghulammurtaza7959 Жыл бұрын
which macbook you are using for flutter development ?
@HeyFlutter
@HeyFlutter Жыл бұрын
Thank you, Ghulam Murtaza! 🙂. I am using macbook Pro.
@Theomniscientmedia
@Theomniscientmedia 2 ай бұрын
Cons: It does not support even number of slides if you don't want a partial slide view.
@HeyFlutter
@HeyFlutter 2 ай бұрын
Thanks for your feedback, @Theomniscientmedia! 🙂
@VShari12
@VShari12 2 жыл бұрын
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
@HeyFlutter 2 жыл бұрын
Thank You Vlad Hagiu! Follow this link: stackoverflow.com/questions/57613017/flutter-horizontal-list-view-dot-indicator I hope you will get your answer 🙂
@maxdegreat566
@maxdegreat566 3 жыл бұрын
Can this be vertical? Or does it have to be horizontal?
@maxdegreat566
@maxdegreat566 3 жыл бұрын
I just saw it has s scroll direction in the pub.dev docs
@maxdegreat566
@maxdegreat566 3 жыл бұрын
Great vid, i always check ur page before others 👍🏾
@DjVsal
@DjVsal 2 жыл бұрын
what if i need to play video in slider?
@HeyFlutter
@HeyFlutter 2 жыл бұрын
Thank you, Bishal Shrestha! 🙂 That can also be done easily instead of displaying image you can use video_player package for displaying videos
@sanaishaq7306
@sanaishaq7306 2 жыл бұрын
Null safety error as soon as I add smooth_page-indicator.
@HeyFlutter
@HeyFlutter 2 жыл бұрын
Thank You sana Ishaq! Follow this link: flutter.dev/docs/null-safety I hope you will get your answer 🙂
@cheems6559
@cheems6559 2 жыл бұрын
Use hot restart....this will solve the problem
@miguelsouza7438
@miguelsouza7438 2 жыл бұрын
Dude for really, it's a shame need to share with 8 friends to get access to source code OMG
@Bunny-rn7uh
@Bunny-rn7uh 2 жыл бұрын
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
@HeyFlutter 2 жыл бұрын
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
@sohampati9232
@sohampati9232 2 жыл бұрын
anyone getting error: Undefined Name 'urlImage'?
@HeyFlutter
@HeyFlutter 2 жыл бұрын
Thank You Soham Pati! Follow this link: stackoverflow.com/questions/72520973/undefined-name-flutterabsolutepath I hope you will get your answer 🙂
@adriancabahug2331
@adriancabahug2331 2 жыл бұрын
How to add text at the center of the image ?
@adriancabahug2331
@adriancabahug2331 2 жыл бұрын
@@HeyFlutter yea but i dont know how to implement that code to yours
@HeyFlutter
@HeyFlutter 2 жыл бұрын
Thank You Adrian Cabahug! Follow this link: medium.com/flutterworld/flutter-text-over-image-bb045a129bae I hope you will get your answer 🙂
@gauravvblogs4042
@gauravvblogs4042 2 жыл бұрын
plz sir github code your coding is dont understad
@HeyFlutter
@HeyFlutter 2 жыл бұрын
Thank You Gaurav Vblogs!. I showed the main functionality, which is important for this package. Learn more about it here: github.com/JohannesMilke/sponsorware
@letmeflutter6644
@letmeflutter6644 2 жыл бұрын
awxm tutorial
@yeonjin8
@yeonjin8 Жыл бұрын
My android studio says carousel slider is undefined 🥺
@HeyFlutter
@HeyFlutter Жыл бұрын
Thank you SilverRubyJane💜, make sure to follow the tutorial step by step 🙂
@muhammadafzal237
@muhammadafzal237 2 жыл бұрын
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.
@kheireddineattala1281
@kheireddineattala1281 Жыл бұрын
This does not remotely have the right to be as good in as little time
@HeyFlutter
@HeyFlutter Жыл бұрын
Thank you, KHEIREDDINE ATTALA! 🙂
@PaulBrassington_flutter_expert
@PaulBrassington_flutter_expert 2 жыл бұрын
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
@PaulBrassington_flutter_expert 2 жыл бұрын
@@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.
@Ange-PaterneDali
@Ange-PaterneDali 2 ай бұрын
thanks you a lot
@HeyFlutter
@HeyFlutter 2 ай бұрын
You’re most welcome, @Ange-PaterneDali! 🙂
Flutter Carousel Slider with Dots | Flutter eCommerce UI Design
23:27
How to win a argument
9:28
ajaxkmr
Рет қаралды 414 М.
Secret Experiment Toothpaste Pt.4 😱 #shorts
00:35
Mr DegrEE
Рет қаралды 32 МЛН
Clowns abuse children#Short #Officer Rabbit #angel
00:51
兔子警官
Рет қаралды 79 МЛН
A clash of kindness and indifference #shorts
00:17
Fabiosa Best Lifehacks
Рет қаралды 134 МЛН
Every Flutter App needs this!
10:15
HeyFlutter․com
Рет қаралды 55 М.
🖥📱RESPONSIVE DESIGN • Flutter Tutorial
8:03
Mitch Koko
Рет қаралды 275 М.
Top 30 Flutter Tips and Tricks
6:50
Flutter Mapp
Рет қаралды 544 М.
React Native vs Flutter in 2024 - Make the RIGHT Choice (Difference Explained)
10:31
Daniel Dan | Tech & Data
Рет қаралды 158 М.
Psychology Behind UI/UX Design | Harrish Murugesan | TEDxUTA
18:01
iPhone 15 Pro Max vs IPhone Xs Max  troll face speed test
0:33
Лучший браузер!
0:27
Honey Montana
Рет қаралды 492 М.