flutter_multi_carousel

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

flutter pub add flutter_multi_carousel

パッケージ概要

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

カスタマイズ可能な設定でさまざまなタイプのカルーセルを作成できる汎用的なFlutterパッケージです。標準、カバーフロー、インタラクティブレイアウトなど、さまざまなカルーセルスタイルをサポートしており、スムーズなスクロールとレスポンシブデザインを実現します。画像、製品、コンテンツを視覚的に魅力的に表示するのに最適です。軽量で簡単に統合でき、アニメーション、インジケーター、スワイプジェスチャーをカスタマイズすることで柔軟性を提供します。複雑なセットアップなしに、動的で再利用可能なカルーセルコンポーネントを求める開発者向けに設計されています。

用途

画像ギャラリーの表示
製品一覧の紹介
インタラクティブなコンテンツスライダーを作成する
オンボーディング画面の構築
アプリで注目アイテムを紹介する
ビジュアルトランジションによるユーザー参加の向上

主な機能

複数のカルーセルタイプ（スタンダード、カバーフロー）
カスタマイズ可能なアニメーションとトランジション
組み込みのページネーションインジケーター
スワイプジェスチャーのサポート
レスポンシブレイアウトの処理
最小限の設定で簡単に統合可能

適している対象

モバイルアプリ開発者
UI/UXデザイナー
電子商取引アプリケーション
コンテンツ豊富なアプリケーション
インタラクティブプロトタイプ
動的コンテンツ表示を必要とするアプリ

注意事項

制限されたプラットフォーム固有のカスタマイズ
組み込みの自動再生制御なし
大規模なデータセットの手動処理が必要です
複雑なレイアウトには追加のスタイルが必要になる場合があります
非常に高いパフォーマンスを必要とするシナリオには最適化されていません
更新には外部リポジトリに依存しています

元の README

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

Flutter_Carosel

A simple Carousel Widget with multiple configuration option.

...
dependencies:
 ...
 flutter_multi_carousel: ^1.0.0
...

And install it using flutter packages get on your project folder. After that, just import the module and use it:

import 'package:flutter/material.dart';
import 'package:flutter_multi_carousel/carousel.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Carousel Demo',
      home: CarouselExample(),
    );
  }
}

class CarouselExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Carousel(
            height: 350.0,
            width: 350,
            initialPage: 3,
            allowWrap: false,
            type: Types.slideSwiper,
            onCarouselTap: (i) {
              print("onTap $i");
            },
            indicatorType: IndicatorTypes.bar,
            arrowColor: Colors.black,
            axis: Axis.horizontal,
            showArrow: true,
            children: List.generate(
                7,
                (i) => Center(
                      child:
                          Container(color: Colors.red.withOpacity((i + 1) / 7)),
                    ))),
      ),
    );
  }
}

For detailed demonstration refer this GitHub link

https://github.com/jaiswalshubham84/Flutter-Carousel

Getting Startedslide

Properties	Type	Default Value	Description
height	Double	null	Defines height of carousel.This field is required
width	Double	null	Defines width of carousel. This field is required
axis	Axis	Axis.horizontal	Defines axis of carousel.
type	Types	"simple"	Defines type of carousel. for ex: Types.simple, Types.slideSwiper, Types.xRotating, Types.yRotating, Types.zRotating, Types.multiRotating
onCarouselTap	Function	null	A callback function
arrowColor	Color	Colors.white	Define the color of arrow
arrowColor	Color	Colors.white	Define the color of arrow
showIndicator	Bool	true	Choice to show indicator in carousel
indicatorType	IndicatorTypes	bar	Defines the type of indicator. For ex: IndicatorTypes.bar, IndicatorTypes.dot, IndicatorTypes.bubble
initialPage	int	0	Start your carousel with custom initial page number
activeIndicatorColor	Color	Colors.white	Defines the color of active indicator
unActiveIndicatorColor	Color	Colors.black	Defines the color of unactive indicator
indicatorBackgroundColor	Color	Color(0xff121212)	Defines the background color of indicator
indicatorBackgroundOpacity	Double	0.5	Defines the opacity of indicator background
allowWrap	bool	true	Defines if the carousel should wrap once you reach the end or if your at the begining and go left if it should take you to the end