Skip to content
Flex Storefront

Carousel

Displays a horizontal carousel. The component has different options for visual customization. It is agnostic of the content of the items.

Component source </>

Installation

To install with Mason CLI, run the following:

Terminal window
mason make flex_ui --component carousel

To install manually, copy and paste the component source files linked at the top of this page into your Flutter project.

Dependencies

External

This component uses the following dependencies by default:

  1. CarouserSlider is the underlying component.
  2. SmoothPageIndicator to display the “dots” representing each item.

Properties

NameTypeDescription
itemList<Widget>The items of the carousel
aspectRatiodouble?Aspect Ratio of the carousel, default is: 16 / 9
enlargeCenterPagebool?Whatever a zoom effect is applied on the item at the center (default: false)
pageSnappingbool?When true, the items snap into position when ending the scroll gesture (default: true)
enableInfiniteScrollbool?When true, the first items are rendered again after the last item, given an perception of infinite scroll (default: true)
autoPlaybool?The carousel scrolls automatically, proceed with caution since it could be perceived as a bad UX on mobile (default: false)
dotsEnabledbool?Enabled the dots below the carousel. Each dot represents an item. The dots are not tappable (default: false)
viewportFractiondouble?Tells how much width takes a single item. Should be inferior to 1.0 to display the start of the next item (scrolling incentive). Can also be used to show multiple items (inferior to 0.5 shows 2 items). Default is 0.8
padEndsbool?When enabled, the current item is centered. When disabled, the carousel starts at the left of the viewport (default: true)

Examples

Default