Flutter悬浮效果插件flutter_hover_effect的使用

flutter_hover_effect 是一个用于在 Flutter 应用中为任何小部件添加交互式悬停和倾斜效果的包。通过使用此插件，您可以增强用户体验，使其更加流畅和响应。

特性

flutter_hover_effect 可以快速简便地为任何小部件添加悬停或倾斜效果。

开始使用

要将 flutter_hover_effect 添加到您的项目中，请执行以下命令：

$ flutter pub add flutter_hover_effect

或者，在您的 pubspec.yaml 文件中添加依赖项：

dependencies:
  flutter_hover_effect:

然后运行 flutter pub get 来安装该包。

使用方法

简单示例

以下是一个简单的示例，展示如何使用 flutter_hover_effect 包来为文本添加悬停效果。更复杂的示例可以在 /example 文件夹中找到。

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

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

  // 这个小部件是应用的根。
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: ExamplePage(),
    );
  }
}

class ExamplePage extends StatelessWidget {
  ExamplePage({
    super.key,
  });

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xff191d2d),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          HoverEffect(
            widget: const Column(
              children: [
                Text(
                  'Flutter Hover Effect',
                  style: TextStyle(fontSize: 17.0, fontWeight: FontWeight.w600),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

复杂示例

下面是一个更复杂的示例，展示了如何为不同类型的组件（如卡片和圆形图像）添加悬停效果。

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

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

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

  // 这个小部件是应用的根。
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: ExamplePage(),
    );
  }
}

class ExamplePage extends StatelessWidget {
  ExamplePage({
    super.key,
  });

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xff191d2d),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          HoverEffect(
            widget: const Column(
              children: [
                Text(
                  'Flutter Hover Effect',
                  style: TextStyle(fontSize: 17.0, fontWeight: FontWeight.w600),
                ),
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceAround,
                  children: [
                    Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text('这是一个卡片示例'),
                        Text('使用悬停效果'),
                      ],
                    ),
                    Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text('喜欢这个包'),
                        Text('喜欢这个仓库'),
                      ],
                    )
                  ],
                )
              ],
            ),
          ),
          const SizedBox(
            height: 56.0,
          ),
          HoverEffect(
              padding: EdgeInsets.zero,
              boxShadowColor: Colors.purple,
              boxShadowBlurRadius: 16.0,
              amplitude: .5,
              returnOriginalPosition: false,
              height: 200,
              width: 200,
              backgroundColor: Colors.transparent,
              shape: BoxShape.circle,
              widget: Container(
                decoration: const BoxDecoration(
                  shape: BoxShape.circle,
                  image: DecorationImage(
                    image: NetworkImage(
                      'https://picsum.photos/250?image=9',
                    ),
                  ),
                ),
              )),
        ],
      ),
    );
  }
}