CarouselView.weighted constructor

const CarouselView.weighted({
  1. Key? key,
  2. EdgeInsets? padding,
  3. Color? backgroundColor,
  4. double? elevation,
  5. ShapeBorder? shape,
  6. WidgetStateProperty<Color?>? overlayColor,
  7. bool itemSnapping = false,
  8. double shrinkExtent = 0.0,
  9. CarouselController? controller,
  10. Axis scrollDirection = Axis.horizontal,
  11. bool reverse = false,
  12. bool consumeMaxWeight = true,
  13. ValueChanged<int>? onTap,
  14. bool enableSplash = true,
  15. required List<int> flexWeights,
  16. required List<Widget> children,
})

Creates a scrollable list where the size of each child widget is dynamically determined by the provided flexWeights.

The flexWeights parameter is required and defines the relative size proportions of each child widget.

While scrolling, the main-axis extent (size) of each visible item changes dynamically based on the scrolling progress. The cross-axis extent is determined by the parent constraints. As the first visible item scrolls completely off-screen, the next item becomes the first visible item, and has the same size as the previously first item. The rest of the visible items maintain their relative layout.

For example, if the layout weights are [1, 6, 1], the length of flexWeights indicates three items will be visible at a time. The layout of these items would be:

  • First item: Extent is (1 / (1 + 6 + 1)) * viewport extent.
  • Second item: Extent is (6 / (1 + 6 + 1)) * viewport extent.
  • Third item: Extent is (1 / (1 + 6 + 1)) * viewport extent.

Assuming a viewport extent of 800 in the main axis and the first item is item 0, there would be three visible items with extents of 100, 600, and 100. As item 0 scrolls off-screen, the extent of item 1 smoothly decreases from 600 to 100. For instance, if item 0 is 30% off-screen, item 1 should have decreased its size to 30% of the difference from 600 to 100; its extent would be 600 - 0.3 * (600 - 100). Similarly, item 2's extent would increase from 100 to 600, becoming 100 + 0.3 * (600 - 100).

As the initially visible items change size during scrolling, item 3 enters the view to fill the remaining space. Its extent starts at a minimum of shrinkExtent (or 0 if shrinkExtent is not provided) and gradually increases to match the extent of the last visible item (100 in this example).

When consumeMaxWeight is set to true, each child can be expanded to occupy the maximum weight while scrolling. For example, with flexWeights of [1, 7, 1], the initial weight of the first item is 1. However, by enabling consumeMaxWeight and scrolling forward, the first item can expand to occupy a weight of 7, leaving a weight of 1 as some empty space before it. This feature is particularly useful for achieving Hero and Center-aligned hero layouts indicated in the Material Design 3.

Implementation

const CarouselView.weighted({
  super.key,
  this.padding,
  this.backgroundColor,
  this.elevation,
  this.shape,
  this.overlayColor,
  this.itemSnapping = false,
  this.shrinkExtent = 0.0,
  this.controller,
  this.scrollDirection = Axis.horizontal,
  this.reverse = false,
  this.consumeMaxWeight = true,
  this.onTap,
  this.enableSplash = true,
  required List<int> this.flexWeights,
  required this.children,
}) : itemExtent = null;