搜尋套件、儲存庫與 APP 分類

flip_carousel 封面
套件詳情v0.0.3

flip_carousel

具有3D翻轉動畫的無限輪播。可將小部件和影像作為輸入分配給該小部件。可修改透視效果和卡片之間的間距。

AndroidiOSWebmacOSWindowsLinux
近 30 天下載
39
喜歡數
47
Pub 分數
160

安裝套件

flutter pub add flip_carousel

套件介紹

根據套件公開資料產生的選型評估,僅供參考。

Flip Carousel 是一個 Flutter 套件,提供無限的 3D 翻轉動畫輪播圖,用於顯示小部件或圖片。它支援自訂視角和卡片之間的間距,可在多個平台實現沉浸式且互動性強的內容呈現。該輪播圖可輕鬆整合到應用程式中,以順暢的翻轉過渡展示動態內容。適用於相簿、產品展示或任何需要吸引人的卡片式導航的 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;

```#

所屬分類

原始碼儲存庫

使用此套件的專案

暫無相關資料。