Flutter动画卡片展示插件flutter_animated_cards的使用

Flutter动画卡片展示插件flutter_animated_cards的使用

flutter_animated_cards

一个完全可自定义的动画卡片小部件，具有3D动画等功能。该组件在Android和iOS上均可使用。

安装

在pubspec.yaml文件中添加以下依赖，并导入到你的文件中。

dependencies:
  flutter_animated_cards: ^0.0.2

import 'package:flutter_animated_cards/flutter_animated_cards.dart';

快速开始

将AnimatedCards添加到小部件树中：

child: FlutterAnimatedCards(
  list: _cardList,
  model: _cardModel,
)

卡片模型

class CardModel {
  final String title;                  // 必填
  final String imagePath;              // 必填 例如："assets/images/image.png"
  final String description;            // 可选
  final Color color;                   // 可选 如果你想为每个卡片设置不同的颜色，则添加此参数
  final List<Color> colorList;         // 可选 如果你想为每个卡片应用不同的渐变，则添加此参数
}

使用模型类构建FlutterAnimatedCards

如果你在模型类中添加了Color参数，并为每个列表项分配了一个新的不同颜色，那么你的小部件看起来会像这样：

带有模型颜色的卡片

带有模型颜色的卡片

带有模型渐变的卡片

带有模型渐变的卡片

示例代码：

CardModel(
  title: 'Colors, Vibrant',
  description: 'Gardening is how I relax. It\'s another form of creating and playing with colors.',
  color: Color(0xfff9d9e2),  // 添加你选择的颜色，为每个列表项添加不同的颜色
  imagePath: "assets/images/colors.png"
),

CardModel(
  title: 'Budapest, Hungary',
  description: 'Meet the CardModel with rich history and indescribable culture',
  colorList: [Color(0xFF4CAF50),  // 添加你选择的渐变，为每个列表项添加不同的渐变
    Color(0xFF00BCD4),
    Color(0xFF99ca3d)],
  imagePath: "assets/images/city_image.png"
),

不传递任何颜色给模型类的FlutterAnimatedCards

这是另一种给卡片添加颜色或渐变的方法。现在你需要添加cardWithSingleColor或cardWithGradientColors，如下面所示：

单一颜色的卡片

单一颜色的卡片

单一渐变的卡片

单一渐变的卡片

示例代码：

child: FlutterAnimatedCards(
  list: _cardList,
  model: _cardModel,
  cardWithSingleColor: Color(0xfff9d9e2),  // 如果你想用其他单色显示卡片，可以添加此参数。默认情况下，卡片将以示例截图中所示的方式显示
),

child: FlutterAnimatedCards(
  list: _cardList,
  model: _cardModel,
  cardWithGradientColors: [Color(0xffacb6e5),  // 添加渐变，库中没有默认渐变可用
    Color(0xFFD5D2D2),
    Color(0xFFfbc7d4)],
),

更多关于Flutter动画卡片展示插件flutter_animated_cards的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter动画卡片展示插件flutter_animated_cards的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


flutter_animated_cards 是一个用于在 Flutter 应用中展示带有动画效果的卡片的插件。它可以帮助你轻松地创建带有各种动画效果的卡片，例如滑动、翻转、缩放等。以下是如何使用 flutter_animated_cards 插件的基本步骤。

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 flutter_animated_cards 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_animated_cards: ^1.0.0  # 请检查最新版本

然后运行 flutter pub get 来获取依赖。

2. 导入包

在你的 Dart 文件中导入 flutter_animated_cards 包：

import 'package:flutter_animated_cards/flutter_animated_cards.dart';

3. 使用 AnimatedCards 组件

AnimatedCards 是 flutter_animated_cards 插件中的主要组件。你可以通过传递不同的参数来自定义卡片的动画效果。

以下是一个简单的示例：

import 'package:flutter/material.dart';
import 'package:flutter_animated_cards/flutter_animated_cards.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Animated Cards Example'),
        ),
        body: Center(
          child: AnimatedCards(
            children: [
              Container(
                width: 200,
                height: 200,
                color: Colors.blue,
                child: Center(child: Text('Card 1')),
              ),
              Container(
                width: 200,
                height: 200,
                color: Colors.red,
                child: Center(child: Text('Card 2')),
              ),
              Container(
                width: 200,
                height: 200,
                color: Colors.green,
                child: Center(child: Text('Card 3')),
              ),
            ],
            animationType: AnimationType.slide,  // 设置动画类型
            duration: Duration(seconds: 1),      // 设置动画时长
          ),
        ),
      ),
    );
  }
}

4. 自定义动画类型

AnimatedCards 组件支持多种动画类型，你可以通过 animationType 参数来指定：

  • AnimationType.slide: 卡片滑动动画
  • AnimationType.flip: 卡片翻转动画
  • AnimationType.scale: 卡片缩放动画
  • AnimationType.fade: 卡片淡入淡出动画

5. 自定义动画时长

你可以通过 duration 参数来设置动画的时长，例如：

duration: Duration(seconds: 1),
回到顶部