paadevelopments/m3_carousel

M3_Carousel

A flutter implementation of the Material Design 3 carousel. Built on the CarouselView.

Feature Highlights

• Hero carousel with support for "left", "center" and "right" alignments.
  https://raw.githubusercontent.com/paadevelopments/m3_carousel/main/extras/hero_v2.gif

• Contained carousel. Extended view inclusive.
  https://raw.githubusercontent.com/paadevelopments/m3_carousel/main/extras/contained_v2.gif

• Uncontained carousel.
  https://raw.githubusercontent.com/paadevelopments/m3_carousel/main/extras/uncontained_v2.gif

• Horizontal or vertical scrolling via axis.

Installing

In your pubspec.yaml

dependencies:
  m3_carousel: ^2.1.4 # requires Dart => ^3.12.0, Flutter >=3.38.0

Usage

import "package:m3_carousel/m3_carousel.dart";

M3Carousel(
    type: CarouselType.hero,
    heroAlignment: HeroAlignment.center,
    axis: Axis.horizontal,
    onTap: (int tapIndex) => log(tapIndex.toString()),
    children: List<Widget>.generate(10, (int index) {
        return ColoredBox(
            color: Colors.primaries[index % Colors.primaries.length]
                .withValues(alpha: 0.8),
            child: const SizedBox.expand(),
        );
    }),
),

See example/lib/main.dart for complete examples.

Reference

Use of CarouselView is govern by the Flutter Authors LICENSE

License

MIT license