https://github.com/paadevelopments/m3_carousel

A flutter implementation of the Material Design 3 carousel (https://m3.material.io/components/carousel/overview).
https://github.com/paadevelopments/m3_carousel

carousel carousel-component design flutter material material-design material-ui ui-components

Last synced: 4 months ago
JSON representation

A flutter implementation of the Material Design 3 carousel (https://m3.material.io/components/carousel/overview).

• Host: GitHub
• URL: https://github.com/paadevelopments/m3_carousel
• Owner: paadevelopments
• License: mit
• Created: 2023-12-11T00:54:55.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2025-10-02T00:22:03.000Z (9 months ago)
• Last Synced: 2025-10-02T01:16:44.406Z (9 months ago)
• Topics: carousel, carousel-component, design, flutter, material, material-design, material-ui, ui-components
• Language: Dart
• Homepage: https://pub.dev/packages/m3_carousel
• Size: 8.81 MB
• Stars: 11
• Watchers: 1
• Forks: 9
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# M3_Carousel

A flutter implementation of the [Material Design 3 carousel](https://m3.material.io/components/carousel/overview).

Built on the [`CarouselView`](https://github.com/flutter/flutter/blob/7e87f1f5bb5cdafa1efa1600d48b9e0a41dc4af1/packages/flutter/lib/src/material/carousel.dart).

## Feature Highlights

- Hero carousel with support for "left", "center" and "right" alignments.  

  ![](https://raw.githubusercontent.com/paadevelopments/m3_carousel/main/extras/hero.gif)

- Contained carousel. Extended view inclusive.  

  ![](https://raw.githubusercontent.com/paadevelopments/m3_carousel/main/extras/contained.gif)

- Uncontained carousel.  

  ![](https://raw.githubusercontent.com/paadevelopments/m3_carousel/main/extras/uncontained.gif)

## Installing

In your pubspec.yaml

```yaml

dependencies:

  m3_carousel: ^2.1.0 # requires Dart => ^3.0.5

```

## Usage

```dart

import "package:m3_carousel/m3_carousel.dart";

M3Carousel(

    type: CarouselType.hero,

    heroAlignment: HeroAlignment.center,

    onTap: (int tapIndex) => log(tapIndex.toString()),

    children: List.generate(10, (int index) {

        return ColoredBox(

            color: Colors.primaries[index % Colors.primaries.length].withOpacity(0.8),

            child: const SizedBox.expand(),

        );

    }),

),

```

See [example/lib/main.dart](https://github.com/paadevelopments/m3_carousel/blob/main/example/lib/main.dart)

for complete examples.

## Reference

Use of `CarouselView` is govern by the [`Flutter Authors LICENSE`](https://github.com/flutter/flutter/blob/7e87f1f5bb5cdafa1efa1600d48b9e0a41dc4af1/LICENSE)

## License

MIT license