Flutter屏幕旋转控制插件rotation的使用

Flutter屏幕旋转控制插件rotation的使用

Rotation 插件介绍

Rotation 是一个全面的Flutter包，旨在为您的小部件带来轻松且多功能的旋转变换。Rotation 提供了诸如鼠标位置跟踪和小部件翻转动画等功能。您可以依赖 Rotation 使您的 Flutter 应用程序更加动态和吸引人。

RotatorFlip Widget

RotatorFlip 是一个 Flutter 小部件，允许您在两个子小部件之间创建翻转动画。

示例代码

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

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

/// Example app.
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: Example(),
    );
  }
}

/// Example parallax animation
class Example extends StatefulWidget {
  const Example({Key? key}) : super(key: key);

  [@override](/user/override)
  State<Example> createState() => _ExampleState();
}

class _ExampleState extends State<Example> {
  RotatorFlipState _flipState = RotatorFlipState.showFirst;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: GestureDetector(
        onTap: () {
          setState(() {
            _flipState == RotatorFlipState.showFirst
                ? _flipState = RotatorFlipState.showSecond
                : _flipState = RotatorFlipState.showFirst;
          });
        },
        child: RotatorFlip(
          duration: const Duration(milliseconds: 400),
          flipState: _flipState,
          firstChild: Center(
            child: Container(
              height: 200,
              width: 200,
              color: Colors.blue,
              alignment: Alignment.center,
              child: Text(
                'Hello World 1',
                textAlign: TextAlign.center,
                style: TextStyle(
                  fontSize: 50,
                  color: Colors.white,
                ),
              ),
            ),
          ),
          secondChild: Center(
            child: Container(
              height: 200,
              width: 200,
              color: Colors.red,
              alignment: Alignment.center,
              child: Text(
                'Hello World 2',
                textAlign: TextAlign.center,
                style: TextStyle(
                  fontSize: 50,
                  color: Colors.white,
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

在这个示例中，RotatorFlip 小部件用于在蓝色 Container 和红色 Container 之间创建翻转动画。duration 参数用于设置翻转动画的持续时间为 1 秒。flipState 参数用于设置翻转器的初始状态为 RotatorFlipState.showFirst，这意味着蓝色 Container 是可见的。direction 参数用于设置翻转动画的方向为 RotatorFlipDirection.horizontal，这意味着翻转动画将是水平翻转。

RotatorFollower Widget

RotatorFollower 是一个 Flutter 小部件，可以基于鼠标光标的位置来旋转子小部件。

示例代码

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

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

/// Example app.
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: Example(),
    );
  }
}

/// Example parallax animation
class Example extends StatefulWidget {
  const Example({Key? key}) : super(key: key);

  [@override](/user/override)
  State<Example> createState() => _ExampleState();
}

class _ExampleState extends State<Example> {
  RotatorFollowerState _followerState = RotatorFollowerState.normal;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: GestureDetector(
        onTap: () {
          setState(() {
            _followerState == RotatorFollowerState.normal
                ? _followerState = RotatorFollowerState.reverse
                : _followerState = RotatorFollowerState.normal;
          });
        },
        child: RotatorFollower(
          child: Container(
            width: 200,
            height: 200,
            color: Colors.blue,
            child: Center(
              child: Text(
                'Hello, World!',
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 24,
                ),
              ),
            ),
          ),
          distortion: FollowerDistorion.light,
          behavior: FollowBehavior.reverse,
        ),
      ),
    );
  }
}