CarouselViewV2 class

A Material Design carousel widget.

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

Material Design 3 introduced 4 carousel layouts:

  • Multi-browse: This layout shows at least one large, medium, and small carousel item at a time. This layout is supported by CarouselViewV2.weighted.
  • Uncontained (default): This layout show items that scroll to the edge of the container. This layout is supported by CarouselViewV2.
  • Hero: This layout shows at least one large and one small item at a time. This layout is supported by CarouselViewV2.weighted.
  • Full-screen: This layout shows one edge-to-edge large item at a time and scrolls vertically. The full-screen layout can be supported by both constructors.

The default constructor implements the uncontained layout model. It shows items that scroll to the edge of the container, behaving similarly to a ListView where all children are a uniform size. CarouselViewV2.weighted enables dynamic item sizing. Each item is assigned a weight that determines the portion of the viewport it occupies. This constructor helps to create layouts like multi-browse, and hero. In order to have a full-screen layout, if CarouselViewV2 is used, then set the itemExtent to screen size; if CarouselViewV2.weighted is used, then set the flexWeights to only have one integer in the array.

{@tool snippet}

This code snippet shows how to get a vertical full-screen carousel by using itemExtent in CarouselViewV2.

Scaffold(
  body: CarouselViewV2(
    scrollDirection: Axis.vertical,
    itemExtent: double.infinity,
    children: List<Widget>.generate(10, (int index) {
      return Center(child: Text('Item $index'));
    }),
  ),
),

This code snippet below shows how to achieve the same vertical full-screen carousel by using flexWeights in CarouselViewV2.weighted.

Scaffold(
  body: CarouselViewV2.weighted(
    scrollDirection: Axis.vertical,
    flexWeights: const <int>[1], // Or any positive integers as long as the length of the array is 1.
    children: List<Widget>.generate(10, (int index) {
      return Center(child: Text('Item $index'));
    }),
  ),
),

{@end-tool}

In CarouselViewV2.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 will follow the same layout as before. Using CarouselViewV2.weighted helps build the multi-browse, hero, center-aligned hero and full-screen layouts, as indicated in Carousel sepcs.

The CarouselControllerv2 is used to control the CarouselControllerv2.initialItem, which determines the first fully expanded item when the CarouselViewV2 or CarouselViewV2.weighted is initially displayed. This is straightforward for CarouselViewV2 because each item in the view has fixed size. In CarouselViewV2.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 CarouselViewV2.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 CarouselViewV2 and CarouselViewV2.weighted can build.

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

See also:

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

Constructors

CarouselViewV2.new({Key? key, EdgeInsets? padding, Color? backgroundColor, double? elevation, ShapeBorder? shape, WidgetStateProperty<Color?>? overlayColor, bool itemSnapping = false, double shrinkExtent = 0.0, CarouselControllerv2? controller, Axis scrollDirection = Axis.horizontal, bool reverse = false, ValueChanged<int>? onTap, bool enableSplash = true, CarouselIndicator? indicator, bool autoPlay = false, Duration autoPlayInterval = const Duration(seconds: 5), required double itemExtent, bool isWeb = false, required List<Widget> children})
Creates a Material Design carousel.
const
CarouselViewV2.weighted({Key? key, EdgeInsets? padding, Color? backgroundColor, double? elevation, ShapeBorder? shape, WidgetStateProperty<Color?>? overlayColor, bool itemSnapping = false, double shrinkExtent = 0.0, CarouselControllerv2? controller, Axis scrollDirection = Axis.horizontal, bool reverse = false, bool consumeMaxWeight = true, ValueChanged<int>? onTap, bool enableSplash = true, CarouselIndicator? indicator, bool autoPlay = false, Duration autoPlayInterval = const Duration(seconds: 5), required List<int> flexWeights, bool isWeb = false, required List<Widget> children})
Creates a scrollable list where the size of each child widget is dynamically determined by the provided flexWeights.
const

Properties

autoPlay → bool
Enables auto play, sliding one page at a time. Use autoPlayInterval to determine the frequency of slides. Defaults to false.
final
autoPlayInterval → Duration
Sets Duration to determine the frequency of slides when autoPlay is set to true. Defaults to 5 seconds.
final
backgroundColor → Color?
The background color for each carousel item.
final
children → List<Widget>
The child widgets for the carousel.
final
consumeMaxWeight → bool
Whether the collapsed items are allowed to expand to the max size.
final
controller → CarouselControllerv2?
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
enableSplash → bool
Determines whether an InkWell will cover each Carousel item.
final
flexWeights → List<int>?
The weights that each visible child should occupy in the viewport.
final
hashCode → int
The hash code for this object.
no setterinherited
indicator → CarouselIndicator?
The indicator widget for displaying the current item position.
final
isWeb → bool
Whether to enable web-specific handling for mouse wheel events.
final
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
onTap → ValueChanged<int>?
Called when one of the children is tapped.
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
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<CarouselViewV2>
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