Flutter卡片动画悬停效果插件card_animation_hover的使用

Flutter卡片动画悬停效果插件card_animation_hover的使用

特性

Flutter中的card_animation_hover插件提供了一种简单的方式来为卡片添加悬停动画效果。当用户将鼠标悬停在卡片上时，卡片会执行动画，提升用户体验。

完整示例Demo

以下是一个完整的示例代码，展示了如何使用card_animation_hover插件来创建带有悬停动画效果的卡片。

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({
    super.key,
  });

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: const Text('Card Animation Hover Example'),
      ),
      body: Center(
        child: Padding(
          padding: const EdgeInsets.all(40.0),
          child: Wrap(
            spacing: 20.0,
            runSpacing: 22.0,
            children: cards
                .map((card) => CardAnimationHover(
                      card: card,
                      showAnimation: false,
                      onTap: () {
                        Navigator.push(
                          context,
                          MaterialPageRoute(
                            builder: (context) => const DetailScreen(),
                          ),
                        );
                      },
                    ))
                .toList(),
          ),
        ),
      ),
    );
  }
}

// 定义卡片数据
final List<Map<String, String>> cards = [
  for (var index = 0; index < imageUrls.length; index++) ...[
    {
      'image': imageUrls[index],
      'header': 'Canyons',
      'content': 'Lorem ipsum dolor sit amet, consectetur adipisicing elit.',
    },
    {
      'image': imageUrls[index],
      'header': 'Beaches',
      'content': 'Lorem ipsum dolor sit amet, consectetur adipisicing elit.',
    },
    {
      'image': imageUrls[index],
      'header': 'Trees',
      'content': 'Lorem ipsum dolor sit amet, consectetur adipisicing elit.',
    },
  ]
];

// 示例图片URL列表
const List<String> imageUrls = [
  'https://example.com/image1.jpg',
  'https://example.com/image2.jpg',
  'https://example.com/image3.jpg',
];

// 详情页面
class DetailScreen extends StatelessWidget {
  const DetailScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Detail Screen'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: const <Widget>[
            Text('This is a detail screen.'),
          ],
        ),
      ),
    );
  }
}

使用步骤

1. 添加依赖
   在pubspec.yaml文件中添加card_animation_hover插件的依赖：

   dependencies:
     card_animation_hover: ^0.0.2
   

2. 导入包
   在Dart文件中导入card_animation_hover包：

   import 'package:card_animation_hover/card_animation_hover.dart';
   

3. 创建卡片数据
   定义一个包含卡片信息的列表，每个卡片包含图片、标题和内容：

   final List<Map<String, String>> cards = [
     for (var index = 0; index < imageUrls.length; index++) ...[
       {
         'image': imageUrls[index],
         'header': 'Canyons',
         'content': 'Lorem ipsum dolor sit amet, consectetur adipisicing elit.',
       },
       {
         'image': imageUrls[index],
         'header': 'Beaches',
         'content': 'Lorem ipsum dolor sit amet, consectetur adipisicing elit.',
       },
       {
         'image': imageUrls[index],
         'header': 'Trees',
         'content': 'Lorem ipsum dolor sit amet, consectetur adipisicing elit.',
       },
     ]
   ];
   

4. 使用CardAnimationHover组件
   使用CardAnimationHover组件来显示带有悬停动画效果的卡片，并设置点击事件：

   Wrap(
     spacing: 20.0,
     runSpacing: 22.0,
     children: cards
         .map((card) => CardAnimationHover(
               card: card,
               showAnimation: false,
               onTap: () {
                 Navigator.push(
                   context,
                   MaterialPageRoute(
                     builder: (context) => const DetailScreen(),
                   ),
                 );
               },
             ))
         .toList(),
   )