CarouselView class

A Material Design carousel widget.

The CarouselView presents a scrollable list of items, each of which can dynamically change size based on the chosen layout.

Material Design 3 introduces 4 carousel layouts:

  • Multi-browse: This layout shows at least one large, medium, and small carousel item at a time.
  • Uncontained (default): This layout show items that scroll to the edge of the container.
  • Hero: This layout shows at least one large and one small item at a time.
  • Full-screen: This layout shows one edge-to-edge large item at a time and scrolls vertically.

This widget supports uncontained carousel layout. It shows items that scroll to the edge of the container, behaving similarly to a ListView where all children are a uniform size. CarouselView.weighted enables dynamic item sizing. Each item is assigned a weight that determines the portion of the viewport it occupies. This allows you to easily create layouts like multi-browse, hero, and full-screen.

In CarouselView.weighted, weights are relative proportions. For example, if the layout weights is [3, 2, 1], it means the first visible item occupies 3/6 of the viewport; the second visible item occupies 2/6 of the viewport; the last visible item occupies 1/6 of the viewport. As the carousel scrolls, the size of the latter one gradually changes to the size of the former one. As a result, when the first visible item is completely off-screen, the following items should stay the same layout as before. Using CarouselView.weighted helps build the multi-browse, hero, center-aligned hero and full-screen layouts, as indicated in Carousel sepcs.

The CarouselController is used to control the CarouselController.initialItem, which determines the first fully expanded item when the CarouselView or CarouselView.weighted is initially displayed. This is straightforward for CarouselView because each item in the view has fixed size. In CarouselView.weighted, for instance, if the layout weights are [1, 2, 3, 2, 1] and the initial item is 4 (the fourth item), the view will display items 2, 3, 4, 5, and 6 with weights 1, 2, 3, 2 and 1 respectively.

The CarouselView.itemExtent property must be non-null and defines the base size of items. While items typically maintain this size, the first and last visible items may be slightly compressed during scrolling. The shrinkExtent property controls the minimum allowable size for these compressed items.

{@tool dartpad} Here is an example to show different carousel layouts that CarouselView and CarouselView.weighted can build.

** See code in examples/api/lib/material/carousel/carousel.0.dart ** {@end-tool}

See also:

  • CarouselController, which controls the first fully visible item in the view.
  • PageView, which is a scrollable list that works page by page.
Inheritance

Constructors

CarouselView({Key? key, EdgeInsets? padding, Color? backgroundColor, double? elevation, ShapeBorder? shape, WidgetStateProperty<Color?>? overlayColor, bool itemSnapping = false, double shrinkExtent = 0.0, CarouselController? controller, Axis scrollDirection = Axis.horizontal, bool reverse = false, ScrollPhysics? physics, required double? itemExtent, required List<Widget> children})
Creates a Material Design carousel.
const
CarouselView.weighted({Key? key, EdgeInsets? padding, Color? backgroundColor, double? elevation, ShapeBorder? shape, WidgetStateProperty<Color?>? overlayColor, bool itemSnapping = false, double shrinkExtent = 0.0, CarouselController? controller, Axis scrollDirection = Axis.horizontal, bool reverse = false, bool allowFullyExpand = true, ScrollPhysics? physics, required List<int>? layoutWeights, required List<Widget> children})
Creates a scrollable list where the size of each child widget is dynamically determined by the provided layoutWeights.
const

Properties

allowFullyExpand → bool
Whether the "squished" item is allowed to expand to the max size.
final
backgroundColor → Color?
The background color for each carousel item.
final
children → List<Widget>
The child widgets for the carousel.
final
controller → CarouselController?
An object that can be used to control the position to which this scroll view is scrolled.
final
elevation → double?
The z-coordinate of each carousel item.
final
hashCode → int
The hash code for this object.
no setterinherited
itemExtent → double?
The extent the children are forced to have in the main axis.
final
itemSnapping → bool
Whether the carousel should keep scrolling to the next/previous items to maintain the original layout.
final
key → Key?
Controls how one widget replaces another widget in the tree.
finalinherited
layoutWeights → List<int>?
The weights that each visible child should occupy the viewport.
final
overlayColor → WidgetStateProperty<Color?>?
The highlight color to indicate the carousel items are in pressed, hovered or focused states.
final
padding → EdgeInsets?
The amount of space to surround each carousel item with.
final
physics → ScrollPhysics?
The scrollPhysics to apply to the carousel layout.
final
reverse → bool
Whether the carousel list scrolls in the reading direction.
final
runtimeType → Type
A representation of the runtime type of the object.
no setterinherited
scrollDirection → Axis
The Axis along which the scroll view's offset increases with each item.
final
shape → ShapeBorder?
The shape of each carousel item's Material.
final
shrinkExtent → double
The minimum allowable extent (size) in the main axis for carousel items during scrolling transitions.
final

Methods

createElement() → StatefulElement
Creates a StatefulElement to manage this widget's location in the tree.
inherited
createState() → State<CarouselView>
Creates the mutable state for this widget at a given location in the tree.
override
debugDescribeChildren() → List<DiagnosticsNode>
Returns a list of DiagnosticsNode objects describing this node's children.
inherited
debugFillProperties(DiagnosticPropertiesBuilder properties) → void
Add additional properties associated with the node.
inherited
noSuchMethod(Invocation invocation) → dynamic
Invoked when a nonexistent method or property is accessed.
inherited
toDiagnosticsNode({String? name, DiagnosticsTreeStyle? style}) → DiagnosticsNode
Returns a debug representation of the object that is used by debugging tools and by DiagnosticsNode.toStringDeep.
inherited
toString({DiagnosticLevel minLevel = DiagnosticLevel.info}) → String
A string representation of this object.
inherited
toStringDeep({String prefixLineOne = '', String? prefixOtherLines, DiagnosticLevel minLevel = DiagnosticLevel.debug, int wrapWidth = 65}) → String
Returns a string representation of this node and its descendants.
inherited
toStringShallow({String joiner = ', ', DiagnosticLevel minLevel = DiagnosticLevel.debug}) → String
Returns a one-line detailed description of the object.
inherited
toStringShort() → String
A short, textual description of this widget.
inherited

Operators

operator ==(Object other) → bool
The equality operator.
inherited