Flutter卡片滑动插件flicked_cards的使用

Flutter卡片滑动插件flicked_cards的使用

插件介绍

flicked_cards 是一个支持手势驱动的卡片滑动组件，提供了多种自定义动画效果。以下是该插件的主要特点：

• 默认动画：提供了一些非常酷炫的默认动画效果。
• 双向滑动：支持从左到右或从右到左的滑动。
• 自定义动画：可以通过扩展插件来创建自定义动画。
• 堆叠或弹出：根据动画设置，支持卡片的堆叠或弹出效果。

示例动画

以下是 flicked_cards 提供的一些默认动画效果示例：

使用示例

以下是一个完整的示例代码，展示了如何在项目中使用 flicked_cards 插件。假设我们有一个 Superhero 类和一个 SuperheroCard 小部件，用于显示超级英雄的信息。

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primaryColor: Colors.white,
        scaffoldBackgroundColor: Colors.white,
        appBarTheme: AppBarTheme(
          textTheme: TextTheme(
            headline6: GoogleFonts.spartan(
              fontSize: 22,
              fontWeight: FontWeight.w600,
              color: Colors.black,
            ),
          ),
        ),
        textTheme: TextTheme(
          headline2: GoogleFonts.spartan(
            fontWeight: FontWeight.w600,
            letterSpacing: -3.0,
            height: 0.9,
            fontSize: 64,
          ),
          headline5: GoogleFonts.spartan(
            letterSpacing: -1.0,
            fontWeight: FontWeight.w500,
          ),
        ).apply(
          displayColor: Colors.white,
          bodyColor: Colors.white,
        ),
      ),
      home: SuperheroPage(),
    );
  }
}

class SuperheroPage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Superhero Cards'),
      ),
      body: FlickedCards(
        count: Superhero.marvelHeroes.length, // 卡片数量
        animationStyle: FlipAnimation(), // 使用翻转动画
        onSwiped: (idx, dir) => print('>>> $dir $idx'), // 滑动回调
        builder: (index, progress, context) {
          final superHeroe = Superhero.marvelHeroes[index]; // 获取当前卡片的超级英雄
          return Container(
            child: Center(
              child: SuperheroCard(
                superhero: superHeroe, // 传递超级英雄对象
                factorChange: 1 - progress, // 根据滑动进度调整卡片显示
              ),
            ),
          );
        },
      ),
    );
  }
}

// 假设这是 Superhero 类
class Superhero {
  static List<Superhero> marvelHeroes = [
    Superhero(name: 'Spider-Man', image: 'spiderman.jpg'),
    Superhero(name: 'Iron Man', image: 'ironman.jpg'),
    Superhero(name: 'Captain America', image: 'captainamerica.jpg'),
  ];

  final String name;
  final String image;

  Superhero({required this.name, required this.image});
}

// 假设这是 SuperheroCard 小部件
class SuperheroCard extends StatelessWidget {
  final Superhero superhero;
  final double factorChange;

  SuperheroCard({required this.superhero, required this.factorChange});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Card(
      elevation: 8.0,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Image.asset(
            'assets/images/${superhero.image}',
            width: 200 * factorChange, // 根据滑动进度调整图片大小
            height: 200 * factorChange,
          ),
          Text(
            superhero.name,
            style: TextStyle(fontSize: 24 * factorChange), // 根据滑动进度调整文字大小
          ),
        ],
      ),
    );
  }
}