パッケージ、リポジトリ、アプリカテゴリを検索

m3_carousel のカバー
パッケージ詳細v2.1.5

m3_carousel

Material Design 3 カルーセル(https://m3.material.io/components/carousel/overview)の Flutter 実装。

AndroidiOSWebmacOSWindowsLinux
30日間ダウンロード
940
いいね数
45
Pub ポイント
160

パッケージをインストール

flutter pub add m3_carousel

パッケージ概要

公開情報に基づく選定ガイドです。参考としてご利用ください。

Material Design 3 カルーセルを実装する Flutter パッケージで、水平スクロール可能なレイアウトでコンテンツをモダンでインタラクティブかつ視覚的に魅力的な方法で表示します。公式の M3 チュートリアルからインスパイアされ、滑らかなアニメーション、レスポンシブデザイン、すべての主要プラットフォームでの直感的なユーザー操作をサポートしています。画像、カード、製品リストを奥行きと動きの効果とともに表示するのに最適です。Flutter アプリにスムーズに統合され、一貫性とアクセシビリティのために Material Design 3 の原則に従います。

用途

  • 画像ギャラリーの表示
  • 製品のハイライトを紹介する
  • 注目コンテンツの紹介
  • インタラクティブなオンボーディング画面の作成
  • 動的なカードベースのインターフェースの構築

主な機能

  • Material Design 3準拠
  • スムーズな水平スクロール
  • 深さとモーション効果
  • レスポンシブレイアウト
  • プラットフォームに依存しないサポート
  • カスタマイズ可能なアイテムの外観

適している対象

  • 現代のUIコンポーネントを必要とするアプリ
  • M3ガイドラインに従うデザイナー
  • メディア豊富なインターフェースを構築する開発者
  • クロスプラットフォームモバイルおよびウェブアプリ
  • 視覚的な魅力に焦点を当てるプロジェクト

注意事項

  • 大規模なデータセットに対してパフォーマンスチューニングが必要になる場合があります
  • M3以外のスタイルに対するカスタマイズが限定的
  • 中程度のコンテンツリストに最適
  • 小さな画面でのタッチジェスチャーの取り扱いには注意が必要です
  • 垂直カルーセルに最適化されていません

元の README

関連するソースリポジトリの README 原文のスナップショットです。最新の内容はリポジトリをご覧ください。

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.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

カテゴリー

依存関係

依存関係一覧 3 件

ソースリポジトリ

このパッケージを使用しているプロジェクト

データはまだありません。