搜索插件、代码仓与 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;

```#

所属分类

源码仓库

使用此插件的项目

暂无相关数据。