search

Carousels

hashtag
Carousels

hashtag
MUICarousel

A customizable carousel widget with auto-scrolling, indicators, and optional navigation buttons.

hashtag
Properties

  • images: List - List of image URLs for the carousel.

  • height: double - Height of the carousel; default: 200.

  • duration: Duration - Duration for each carousel item; default: 5 seconds.

  • borderRadius: double - Border radius for the carousel; default: 8.

  • padding: EdgeInsetsGeometry - Padding around the carousel; default: All sides: 8.

  • indicatorType: CarouselIndicatorType - Type of indicator to use; default: dot.

  • curve: Curve - Animation curve for carousel transition; default: Curves.easeInOut.

  • swipeDuration: Duration - Duration of the swipe animation; default: 500 milliseconds.

  • showIndicator: bool - Boolean to enable/disable indicators; default: true.

  • showButtons: bool - Boolean to enable/disable navigation buttons; default: true.

  • buttonType: CarouselButtonType - Type of navigation buttons; default: iconOnly.

  • maxWidth: double - Maximum width for the carousel; default: 430.

hashtag
Example Usage

Carousel with default height and dot Indicator

Logomodularuiwidgetsverdant-lokum-9bd5c2.netlify.appchevron-right
Carousel 1

Carousel with default height and line Indicator

Logomodularuiwidgetsverdant-lokum-9bd5c2.netlify.appchevron-right
Carousel 2

Carousel without buttons

Logomodularuiwidgetsverdant-lokum-9bd5c2.netlify.appchevron-right
Carousel 3

Carousel without indicator

Logomodularuiwidgetsverdant-lokum-9bd5c2.netlify.appchevron-right
Carousel 4

Carousel with rounded Buttons

Logomodularuiwidgetsverdant-lokum-9bd5c2.netlify.appchevron-right
Carousel 5

Parallex Carousel and line Indicator

Logomodularuiwidgetsverdant-lokum-9bd5c2.netlify.appchevron-right
Carousel 6

hashtag
Notes

  • Displays a carousel of images with auto-scrolling capability.

  • Supports customization of height, duration, border radius, padding, indicator type, animation curve, swipe duration, visibility of indicators/buttons, and maximum width.

  • Provides two types of indicators: dot and line.

  • Allows customization of navigation buttons with two options: iconOnly and textIcon.

  • Auto-scrolls through images with a specified duration.

hashtag
Components

hashtag
IndicatorDot

A component representing a dot in the carousel indicator.

hashtag
Properties

  • currentIndex: int - Current index of the carousel.

  • positionIndex: int - Index of the dot in the indicator.

hashtag
IndicatorLine

A component representing a line in the carousel indicator.

hashtag
Properties

  • currentIndex: int - Current index of the carousel.

  • positionIndex: int - Index of the line in the indicator.

PreviousMUISignUp CardNextAvatars

Last updated