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

flip_carousel のカバー
パッケージ詳細v0.0.3

flip_carousel

3Dフリップアニメーション付きの無限カルーセル。ウィジェットと画像の両方をウィジェットの入力として割り当てられます。視点とカード間のスペースを変更できます。

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

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

flutter pub add flip_carousel

パッケージ概要

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

Flip Carousel は、ウィジェットや画像を表示するための無限で 3D フリップアニメーション付きのカルーセルを提供する Flutter パッケージです。カーディナルの間の視点と間隔をカスタマイズ可能で、複数のプラットフォームで没入感があり、インタラクティブなコンテンツ表示が可能です。滑らかなフリップ遷移で動的なコンテンツを紹介できるため、アプリに簡単に統合できます。ギャラリー、製品表示、またはカードベースのナビゲーションが必要な任意の UI に最適です。

用途

  • インタラクティブ画像ギャラリー
  • プロダクトショーケースインターフェース
  • 動的コンテンツスライダー
  • モバイルアプリのオンボーディング画面
  • デジタルフリップブック体験

主な機能

  • 3D フリップアニメーション付きの無限スクロール
  • カスタマイズ可能な視点とカードの間隔
  • ウィジェットと画像の両方をアイテムとしてサポートしています
  • クロスプラットフォーム互換性
  • 滑らかで反応性の高いタッチ操作

適している対象

  • インタラクティブなUIを構築する開発者
  • 視覚的に豊かなカルーセルを求めるデザイナー
  • 魅力的なコンテンツの提示を必要とするアプリ
  • Android、iOS、Web、macOS、Windows、Linux をターゲットとしたプロジェクト

注意事項

  • 大規模なデータセットではパフォーマンスに影響を与える可能性があります
  • 最適なビジュアルを得るためには、画角の微調整が必要です
  • 基本的なスタイリングを超えるカスタマイズは限られている
  • 適度なカード枚数に最適で、スムーズな進行を維持する

元の README

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

A simple infinite horizontal carousel with flip animation which can be used for both image and widgets

📱 Usage

Import package in your file

import 'package:flip_carousel/flip_carousel.dart';

Use FlipCarousel widget

FlipCarousel(items:cardItems);

Give a list of data and set the properties as you wish


List<dynamic> cardItems = [
    'https://i.ibb.co/QYdQHBw/batman2.jpg',
    'https://i.ibb.co/vwhykYp/spider1.jpg',
    'https://i.ibb.co/H4VrQS4/spider2.jpg',
    Container(color: Colors.amber, child: const FlutterLogo()),
  ];



FlipCarousel(
        items: cardItems,
          transitionDuration: const Duration(milliseconds: 400),
          isAssetImage: false,
          border: Border.all(width: 5, color: const Color(0xFFFFFFFF)),
          width: 250,
          height: 400,
          fit: BoxFit.cover,
          perspectiveFactor: 0.002,
          layersGap: 30,
          
          onChange: (int pageIndex) {
            print(pageIndex);
          },
          onTap: () {
            print("tap");
          },
        ),

Customization

  • You can add both widgets and ImageUrls as input.
  • make sure that you have set the the [ isAssetImage ] value base on your source.

Here is the rest of properties that can be modyfied


  /// List of image/widgets to be shown in the carousel; Accepts two types of link.
  /// For example: `https://...jpg` for online images and `assets/...` for local images.
  final List<dynamic> items;

  /// Specifies the type of image addresses in [imagesLink].
  /// Must be `false` if [imagesLink] contains online images.
  /// Must be `true` if [imagesLink] contains local images.
  final bool assetImage;

  /// Set as the image slider [width].
  /// Defaults to 300.
  final double width;

  /// Set as the image slider [height].
  /// Defaults to 450.
  final double height;

  /// Returns the page index after animation is done .
  final Function(int pageIndex)? onChange;

  /// Runs the given code onPress .
  final Function()? onTap;

  /// Set as the main frames [backgroundColor].
  final Color? backgroundColor;

  /// Determines the value of the [fit] property of the images
  /// Defaults to BoxFit.cover.
  final BoxFit fit;

  /// Determines the space between two [H3DCard].
  /// Defaults to 30.
  final double layersGap;

  /// Determines the perspective transformation of the [H3DCard] when being animated.
  /// Defaults to 0.0015.
  final double perspectiveFactor;

  /// Determines the space between two [H3DCard].
  /// Defaults to 30.

  final BoxBorder? border;

  /// Determines the [borderRadius] of the [H3DCard].
  /// Defaults to 30.

  final BorderRadius borderRadius;

  /// Determines the clip behaviour of the child widget.
  /// Defaults to [Clip.hardEdge].

  final Clip childClip;

  /// Determines [Duration] of transition animation.
  /// Defaults to 500 milliseconds.
  final Duration transitionDuration;

  /// Determines [Visibility] of the transition arrows.
  /// Defaults to True.

  final bool arrowControllersVisibility;

  /// Determines [Color] of the transition arrows.
  /// Defaults to [Colors.white].
  final Color arrowControllersColor;

  /// Determines [tag] of the selected  [H3DCard].
  final String heroTag;

```#

カテゴリー

ソースリポジトリ

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

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