Flutter悬浮动画插件hover_animation的使用

Flutter悬浮动画插件hover_animation的使用

这个包为您的Flutter应用提供了一个可定制的悬浮动画。它非常易于使用，并且可以在任何Flutter应用中使用。如果您正在寻找一个用于Flutter应用的悬浮动画包，那么这正是您需要的包。您可以将此包包裹在任何小部件上，它会为其添加一个悬浮动画。您还可以通过更改动画的主要颜色、悬停颜色、大小、边框、圆角半径、持续时间和曲线来定制悬浮动画。

快速演示

视频演示

https://user-images.githubusercontent.com/65107679/226198601-6e8a3986-5393-450e-b2cf-4a52debfd4cc.mp4

使用Hover Animation

HoverAnimation(
  primaryColor: Colors.orange,
  hoverColor: Colors.red,
  size: const Size(150, 60),
  border: Border.all(
    color: Colors.black,
    width: 2,
  ),
  onTap: () {},
  child: const Center(
    child: Text(
      'Get In Touch',
      style: TextStyle(
        fontSize: 18,
      ),
    ),
  ),
)

探索更多属性

/// 主要颜色
final Color primaryColor;

/// 悬浮时的颜色
final Color hoverColor;

/// 小部件的大小
final Size size;

/// 小部件的边框
final Border border;

/// 小部件的圆角半径
final BorderRadius borderRadius;

/// 子小部件
final Widget child;

/// 动画的持续时间
final Duration duration;

/// 动画的曲线
final Curve curve;

/// 用户点击小部件时的回调函数
final Function onTap;

需要帮助？

如果您在设置项目时遇到问题或有任何疑问，请随时通过以下方式联系我：

• Twitter
• LinkedIn

社交媒体

许可证

Copyright (c) 2023 Tushar Mahmud
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

特别感谢 The Flutter Way

完整示例代码

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            HoverAnimation(
              primaryColor: Colors.orange,
              hoverColor: Colors.red,
              size: const Size(150, 55),
              border: Border.all(
                color: Colors.black,
                width: 2,
              ),
              primaryBorderRadius: const BorderRadius.all(Radius.circular(0)),
              hoverBorderRadius: const BorderRadius.all(Radius.circular(0)),
              onTap: () {},
              child: const Center(
                child: Text(
                  'Get In Touch',
                  style: TextStyle(
                    fontSize: 18,
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}