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.

  • Contained carousel. Extended view inclusive.

  • Uncontained carousel.

  • Horizontal or vertical scrolling via axis.

Installing

In your pubspec.yaml

dependencies:
  m3_carousel: ^2.1.5 # requires Dart => ^3.13.0, Flutter >=3.47.0

Migrating to material_ui

As of 2.1.5, this package imports Material from the material_ui package instead of package:flutter/material.dart. To migrate your app, add material_ui to your pubspec.yaml:

dependencies:
  material_ui: ^1.7.0

Then replace your Material imports:

// Before
import "package:flutter/material.dart";

// After
import "package:material_ui/material_ui.dart";

Every public m3_carousel type carries the M3 prefix (M3CarouselItem, M3CarouselController, M3CarouselView, ...), so it imports alongside material_ui without name clashes.

Usage

import "package:m3_carousel/m3_carousel.dart";
import "package:material_ui/material_ui.dart";

M3Carousel(
  type: M3CarouselType.hero,
  heroAlignment: M3HeroAlignment.center,
  axis: Axis.horizontal,
  onTap: (int tapIndex) => log(tapIndex.toString()),
  children: List<M3CarouselItem>.generate(10, (int index) {
    return M3CarouselItem(
      image: Image.asset("assets/i${index % 6 + 1}.png", fit: BoxFit.cover),
      title: Text("Item $index"),
      showScrim: const M3CarouselScrim.gradient(),
      onTap: () {},
    );
  }),
),

Available layouts: M3CarouselType.hero, M3CarouselType.contained, M3CarouselType.uncontained, M3CarouselType.uncontainedMultiAspect and M3CarouselType.fullScreen.

Customize spec defaults by installing an M3CarouselTheme extension:

MaterialApp(
  theme: ThemeData(
    extensions: const <ThemeExtension<dynamic>>[
      M3CarouselTheme(itemGap: 8, borderRadiusValue: 28),
    ],
  ),
);

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

Reference

Use of CarouselView is govern by the Flutter Authors LICENSE

License

MIT license

Libraries

A Material Design 3 carousel built on material_ui.