Flutter动画翻转效果插件flip_widget的使用

Flutter动画翻转效果插件flip_widget的使用

简介

flip_widget 是一个用于在Flutter应用中实现翻转动画效果的插件。通过这个插件，你可以轻松地为你的Widget添加翻转效果。

以下是该插件的效果演示图：

使用方法

使用 flip_widget 插件非常简单。下面是一个完整的示例代码，展示了如何使用这个插件来实现翻转效果。

import 'package:flutter/material.dart';
import 'package:flip_widget/flip_widget.dart';
import 'dart:math' as math;

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

class MyApp extends StatefulWidget {
  [@override](/user/override)
  _MyAppState createState() => _MyAppState();
}

// 定义最小数值常量
const double _MinNumber = 0.008;

// 限制数值最小值的方法
double _clampMin(double v) {
  if (v < _MinNumber && v > -_MinNumber) {
    if (v >= 0) {
      v = _MinNumber;
    } else {
      v = -_MinNumber;
    }
  }
  return v;
}

class _MyAppState extends State<MyApp> {
  // 创建 GlobalKey 用于控制 FlipWidget
  GlobalKey<FlipWidgetState> _flipKey = GlobalKey();

  Offset _oldPosition = Offset.zero;
  bool _visible = true;

  [@override](/user/override)
  void initState() {
    super.initState();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    Size size = Size(256, 256);
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Plugin example app'),
        ),
        body: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Visibility(
              child: Container(
                width: size.width,
                height: size.height,
                child: GestureDetector(
                  child: FlipWidget(
                    key: _flipKey, // 关键 Key
                    textureSize: size * 2, // 纹理大小
                    child: Container(
                      color: Colors.blue, // 背景颜色
                      child: Center(
                        child: Text("hello"), // 显示文本
                      ),
                    ),
                    // leftToRight: true, // 可选参数，控制翻转方向
                  ),
                  onHorizontalDragStart: (details) {
                    _oldPosition = details.globalPosition; // 记录初始位置
                    _flipKey.currentState?.startFlip(); // 开始翻转
                  },
                  onHorizontalDragUpdate: (details) {
                    Offset off = details.globalPosition - _oldPosition; // 计算偏移量
                    double tilt = 1 / _clampMin((-off.dy + 20) / 100); // 计算倾斜角度
                    double percent = math.max(0, -off.dx / size.width * 1.4); // 计算翻转百分比
                    percent = percent - percent / 2 * (1 - 1 / tilt); // 调整百分比
                    _flipKey.currentState?.flip(percent, tilt); // 更新翻转状态
                  },
                  onHorizontalDragEnd: (details) {
                    _flipKey.currentState?.stopFlip(); // 结束翻转
                  },
                  onHorizontalDragCancel: () {
                    _flipKey.currentState?.stopFlip(); // 取消翻转
                  },
                ),
              ),
              visible: _visible, // 控制是否显示
            ),
            TextButton(
                onPressed: () {
                  setState(() {
                    _visible = !_visible; // 切换可见性
                  });
                },
                child: Text("Toggle")) // 切换按钮
          ],
        ),
      ),
    );
  }
}