カテゴリー・パッケージ・リポジトリを検索

banner_carousel のカバー
パッケージ詳細v1.2.1

banner_carousel

インジケーターとアニメーション付きの水平スクロール可能なリストウィジェット。

AndroidiOSWebmacOSWindowsLinux
30日間ダウンロード
588
いいね数
147
Pub ポイント
150

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

flutter pub add banner_carousel

パッケージ概要

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

BannerCarousel は、スムーズなアニメーションと現在位置を示す視覚的なインジケーターを備えた水平スクロール可能なリストを提供する Flutter ウィジェットです。複数のプラットフォームで魅力的でインタラクティブな方法でバナー、画像、またはコンテンツのシリーズを表示するために設計されています。タッチジェスチャー、自動スクロール、カスタマイズ可能なインジケーターをサポートしており、アプリ内での注目コンテンツの紹介に最適です。最小限のセットアップで既存の Flutter プロジェクトにシームレスに統合できます。

用途

  • eコマースアプリで注目製品を紹介する
  • ニュースやメディアアプリにプロモーションバナーを表示する
  • オンボーディング画面のコンテンツを強調表示する
  • ナビゲーションインジケーターを使用して画像ギャラリーを表示する

主な機能

  • 水平スクロール可能なレイアウト
  • アイテム間のアニメーション遷移
  • カスタマイズ可能なインジケータードット
  • 自動スライドをサポート
  • ジェスチャー駆動型ナビゲーション
  • クロスプラットフォーム互換性

適している対象

  • モバイルおよびウェブアプリ開発者
  • インタラクティブなカルーセルを求めるデザイナー
  • 視覚コンテンツの強調を必要とするアプリ

注意事項

  • 大規模なデータセット用に最適化が必要になる場合があります
  • インジケータのスタイルにはカスタム設定が必要です
  • 1スライドあたりの重いウィジェットによるパフォーマンスへの影響

元の README

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

BannerCarousel

BannerCarousel is a custom widget that builds a FullScreen carousel or not, with animation on the indicators.

drawing

Parameters

  • banners - List of BannerModel
  • animation - boolean for indicator animation - Default true
  • indicatorBottom - indicator is below carousel - Default true
  • showIndicator - show indicator - Default true
  • height - Default double 150
  • initialPage
  • viewportFraction
  • borderRadius - Default 5
  • margin
  • activeColor
  • disableColor
  • customizedIndicators - Accepts a IndicatorModel model
  • onPageChanged
  • onTap
  • customizedBanners - List of Widget
  • spaceBetween - Double
  • pageController - PageController

Models

  • BannerModel
  • IndicatorModel

Example

List<BannerModel> listBanners = [
    BannerModel(pathImage: banner1, id: "1"),
    BannerModel(pathImage: banner2, id: "2"),
    BannerModel(pathImage: banner3, id: "3"),
    BannerModel(pathImage: banner4, id: "4"),
];
Default:
drawing
BannerCarousel(banners: listBanners)
FullScreen:
drawing
 BannerCarousel.fullScreen(
    banners: listBanners,
    animation: false,
 );
Custom Carousel:
drawing
BannerCarousel(
  banners: listBanners,
  customizedIndicators: IndicatorModel.animation(width: 20, height: 5, spaceBetween: 2, widthAnimation: 50),
  height: 120,
  activeColor: Colors.amberAccent,
  disableColor: Colors.white,
  animation: true,
  borderRadius: 10,
  width: 250,
  indicatorBottom: false,
),
Custom Banner:
drawing
BannerCarousel(
   animation: false,
   viewportFraction: 0.60,
   showIndicator: false,
   customizedBanners: [
        Container(
           decoration: BoxDecoration(
              border: Border.all(color: Colors.black,width: 2),),
              child: Image.network(BannerImages.banner1)),
        Container(
             margin: EdgeInsets.symmetric(horizontal: 20),
             decoration: BoxDecoration(
                  boxShadow: [
                     BoxShadow(
                        color: Colors.black.withOpacity(0.25),
                        spreadRadius: 0,
                        blurRadius: 4,
                        offset: Offset(0, 3),
                      ),
                    ],
               ),
              child: Image.network(BannerImages.banner2)),
         Container(
             margin: EdgeInsets.symmetric(horizontal: 20),
             decoration: BoxDecoration(
             border: Border.all(
                    color: Colors.green,
                    width: 3,
                  ),
                  borderRadius: BorderRadius.circular(50),
              image: DecorationImage(
              image: NetworkImage(
                        'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl-2.jpg'),
              fit: BoxFit.cover,
              ),
           ),
       ),
    ],
),
Ontap Event:
BannerCarousel(
  banners: listBanners,
  onTap: (id) => print(id),
)

カテゴリー

ソースリポジトリ

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

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