Flutter悬浮动画效果插件hover_float_animation的使用

Captura

Animation_transition

创建具有动画效果的浮动小部件，同时可以决定浮动小部件在父容器中的位置。

要使用它，请阅读包页面上的手册。

文档

手动包

创建具有输入动画效果的浮动小部件，并且可以决定浮动小部件在父容器中的位置。

要使用它，请阅读包页面上的手册。

示例代码

example/lib/main.dart

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

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

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

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('插件示例应用'),
        ),
        body: const HomePage(),
      ),
    );
  }
}

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

  Widget setPosition({
    required HoverPositionVertical vertical,
    required HoverPositionHorizontal horizontal,
  }) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: List.generate(
        3,
        (index) => HoverFloatController.start(
          hover: HoverAnimationData(
            // 可以是右侧、左侧、中心
            positionHorizontal: horizontal,
            // 可以是上方、下方、中心
            positionVertical: vertical,
            // 进入时的过渡效果
            transition: TransitionType.FadeInLeftBig,
            // 过渡持续时间
            animationDuration: const Duration(milliseconds: 300),
            // 浮动小部件的大小
            sizeFloat: const Size(180, 270),
            // 默认启用动画
            animation: true,
            // 鼠标离开时关闭悬浮动画
            autoClose: true,
            // 相对定位
            relativePosition: true,
            // 悬浮动画的控制令牌，默认为0
            token: 0,
            // 鼠标进入悬浮小部件时触发
            onEnterMouse: (token) {
              print('进入悬浮区域');
            },
            // 鼠标离开悬浮小部件时触发
            onExitMouse: (token) {
              print('离开悬浮区域');
            },
            // 绘制父小部件时触发
            onStart: (token) {
              print('创建悬浮小部件，这是令牌 $token');
            },
            // 悬浮小部件
            hoverChild: Container(
              alignment: Alignment.center,
              color: Colors.amberAccent,
              child: const Text('悬浮内容'),
            ),
            // 父小部件
            child: Container(
              alignment: Alignment.center,
              color: Colors.amber,
              width: 150,
              height: 250,
              child: const Text('带动画的悬浮'),
            ),
          ),
        ),
      ),
    );
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Container(
            width: double.infinity,
            margin: const EdgeInsets.symmetric(vertical: 20),
            padding: const EdgeInsets.all(10),
            color: Colors.amber,
            child: const Text(
              '中心位置',
              style: TextStyle(
                color: Colors.black,
                fontWeight: FontWeight.bold,
                fontSize: 18,
              ),
            ),
          ),
          setPosition(
            horizontal: HoverPositionHorizontal.center,
            vertical: HoverPositionVertical.center,
          ),
          Container(
            width: double.infinity,
            margin: const EdgeInsets.symmetric(vertical: 20),
            padding: const EdgeInsets.all(10),
            color: Colors.amber,
            child: const Text(
              '左侧位置',
              style: TextStyle(
                color: Colors.black,
                fontWeight: FontWeight.bold,
                fontSize: 18,
              ),
            ),
          ),
          setPosition(
            horizontal: HoverPositionHorizontal.left,
            vertical: HoverPositionVertical.center,
          ),
          Container(
            width: double.infinity,
            margin: const EdgeInsets.symmetric(vertical: 20),
            padding: const EdgeInsets.all(10),
            color: Colors.amber,
            child: const Text(
              '右侧位置',
              style: TextStyle(
                color: Colors.black,
                fontWeight: FontWeight.bold,
                fontSize: 18,
              ),
            ),
          ),
          setPosition(
            horizontal: HoverPositionHorizontal.right,
            vertical: HoverPositionVertical.center,
          ),
          Container(
            width: double.infinity,
            margin: const EdgeInsets.symmetric(vertical: 20),
            padding: const EdgeInsets.all(10),
            color: Colors.amber,
            child: const Text(
              '底部位置',
              style: TextStyle(
                color: Colors.black,
                fontWeight: FontWeight.bold,
                fontSize: 18,
              ),
            ),
          ),
          setPosition(
            horizontal: HoverPositionHorizontal.center,
            vertical: HoverPositionVertical.bottom,
          ),
          Container(
            width: double.infinity,
            margin: const EdgeInsets.symmetric(vertical: 20),
            padding: const EdgeInsets.all(10),
            color: Colors.amber,
            child: const Text(
              '顶部位置',
              style: TextStyle(
                color: Colors.black,
                fontWeight: FontWeight.bold,
                fontSize: 18,
              ),
            ),
          ),
          setPosition(
            horizontal: HoverPositionHorizontal.center,
            vertical: HoverPositionVertical.top,
          ),
        ],
      ),
    );
  }
}