Flutter磁吸按钮功能插件magnetic_button的使用

磁吸按钮

磁吸按钮是一个自定义的Flutter小部件，它创建了一个具有“磁性”效果的交互式按钮。当你将鼠标悬停在按钮上时，按钮会根据鼠标的位置移动，从而创造出一种独特且吸引人的用户体验。

平台支持

尚未测试的功能

• 移动设备上的按住磁吸效果（正在进行测试）：我们目前正在进行移动设备上的按住磁吸效果的测试。此功能旨在使按钮能够响应长按手势而保持移动，从而增强移动平台上的互动性。

特性

• 悬停效果：当鼠标悬停在按钮上时，按钮会根据鼠标位置移动，产生“磁性”效果。
• 返回速度：当鼠标不悬停在小部件上时，按钮会回到其原始位置。返回的速度由duration属性控制。该属性以毫秒为单位设置，较大的值会使返回更慢，较小的值会使返回更快。
• 可定制：你可以自定义磁吸按钮的小部件，以满足你的需求。
• 最大移动范围：你可以通过mx和my属性控制按钮对鼠标位置的最大响应移动。
• 触发距离：一个可定制的参数，用于确定动画开始时的接近程度。

使用方法

1. 创建一个MagneticButton小部件，并传递你所需的小部件：

// 定义一个变量来保存偏移量
Offset values = const Offset(0, 0);

// 使用MagneticButton小部件
MagneticButton(
  duration: const Duration(milliseconds: 100), // 返回速度设置为100毫秒
  onChanged: (Offset value) { // 当按钮位置改变时更新状态
    setState(() => values = value);
  },
  child: Container(
    decoration: BoxDecoration(
        borderRadius: const BorderRadius.all(Radius.circular(40)),
        color: Colors.white,
        border: Border.all(color: Colors.black)),
    width: 160,
    height: 80,
    child: Center(
      child: Transform.translate(
        offset: Offset(values.dx / 4, values.dy / 4), // 根据偏移量调整文本位置
        child: const Text(
          'Explore',
          style: TextStyle(
            fontWeight: FontWeight.w400,
            fontSize: 19,
          ),
        ),
      ),
    ),
  ),
)

未来功能

我们已经成功集成了所有提议的磁吸按钮功能，除了“移动设备上的按住磁吸效果”功能，该功能目前正在测试中。目前我们没有计划在未来实现其他功能。然而，我们欢迎用户的反馈和建议。如果你有任何想要在磁吸按钮中看到的新功能，请告诉我们！🙂。

完整示例代码

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

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

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

  // 应用程序的根小部件
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '磁吸按钮',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const HomePage(),
    );
  }
}

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

  [@override](/user/override)
  State<HomePage> createState() => HomePageState();
}

class HomePageState extends State<HomePage> {
  Offset values = const Offset(0, 0);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: MagneticButton(
          duration: const Duration(milliseconds: 100), // 设置返回速度为100毫秒
          onChanged: (Offset value) { // 更新偏移量
            setState(() => values = value);
          },
          distance: 0.8, // 设置触发距离
          child: Container(
            decoration: BoxDecoration(
                borderRadius: const BorderRadius.all(Radius.circular(40)),
                color: Colors.white,
                border: Border.all(color: Colors.black)),
            width: 160,
            height: 80,
            child: Center(
              child: Transform.translate(
                offset: Offset(values.dx / 4, values.dy / 4), // 根据偏移量调整文本位置
                child: const Text(
                  '探索',
                  style: TextStyle(
                    fontWeight: FontWeight.w400,
                    fontSize: 19,
                  ),
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}