Flutter Tilt

Amos

发表：2023-10-06 15:29:13

修改：2023-11-24 15:29:13

最近我将 Flutter Tilt 添加了一些新特性，更新到 2.0 版本 🎉

“Flutter Tilt 是什么？”

简单来说，它提供手势倾斜视差悬停的效果，支持倾斜、光照、阴影效果以及陀螺仪传感器，拥有丰富的自定义参数。
它就像块小甜品，低负担且饱含惊喜，在合适的场景合理运用，它能够为你的项目添置些许有趣的味道。

需要注意的是，切勿贪杯过渡使用，导致项目花里胡哨、模糊重点。

示例：简单的卡牌场景

Flutter Tilt

本篇仅简单介绍部分场景的使用，最新详细的参数使用说明、兼容情况以及示例源码请访问以下网址：

Tips: 以下网址也许都需要魔法上网才能访问~

Github：flutter_tilt
Pub.dev：flutter_tilt
在线示例（含源码）：flutter_tilt_book

添加 flutter_tilt

使用 Flutter 运行以下指令，

flutter pub add flutter_tilt

或手动将 flutter_tilt 添加到 pubspec.yaml 依赖项中。

dependencies:
  flutter_tilt: ^最新版本

支持的平台

Android	iOS	Web	macOS	Windows	Linux
✅	✅	✅	✅	✅	✅

传感器兼容

Tips：最新兼容情况请以 Github 上的说明为准。

传感器仅在以下平台触发。

Android	iOS	Web (HTTPS)	macOS	Linux	Windows
✅	✅	浏览器兼容	❌	❌	❌

目前 Web 使用 Sensor API - Gyroscope，但它不兼容部分主流浏览器，比如 Safari、Firefox。
之后也许会替换为 DeviceMotionEvent。

手势优先级

启用多个手势时，会按照优先级触发手势：

Touch > Hover > Sensors

简单使用

Flutter Tilt 中最重要的是 Tilt() widget。
使用该 widget 就能够轻松地为我们的内容创建倾斜、光照和阴影效果，
并通过手势以及传感器触发这些效果。

/// 导入 flutter_tilt
import 'package:flutter_tilt/flutter_tilt.dart';

...
Tilt(
  child: Container(
    width: 150.0,
    height: 300.0,
    color: Colors.grey,
  ),
),
...

如果你希望在倾斜的时候触发独立的视差，来达到伪 3D 的效果，可以使用 TiltParallax() widget，
需要注意的是 TiltParallax() 只能在 Tilt() 的 childLayout 中使用。

ChildLayout 为我们的 widget 提供了不同方位的渲染，在 childLayout 内其实就是 Stack，你同样可以使用 Stack 的相关 widget 进行布局，像是 Positioned。

/// 导入 flutter_tilt
import 'package:flutter_tilt/flutter_tilt.dart';

...
Tilt(
  childLayout: const ChildLayout(
    outer: [
      /// 此处为视差
      Positioned(
        child: TiltParallax(
          child: Text('Parallax'),
        ),
      ),
      /// 此处为视差
      Positioned(
        top: 20.0,
        left: 20.0,
        child: TiltParallax(
          size: Offset(-10.0, -10.0),
          child: Text('Tilt'),
        ),
      ),
    ],
  ),
  child: Container(
    width: 150.0,
    height: 300.0,
    color: Colors.brown,
  ),
),
...

部分场景的使用

在 Flutter Tilt 中，最主要的配置为以下几种：

TiltConfig：倾斜、手势和传感器效果相关配置。
LightConfig：光照效果相关配置。
ShadowConfig：阴影效果相关配置。
ChildLayout：child 内部、外部和后方的布局渲染。

Flutter Tilt 默认配置的理念是以初始的内容为本，尽可能保证用户的可读性，
比如：传感器在停止响应时（用户没有继续转动设备），会缓慢还原至初始状态；
用户手势没有触发的情况下默认会还原至初始状态；
光照、阴影默认在四周，只有在倾斜的情况下才会有眩光、阴影的渐现……
……

虽然默认配置已经拥有常规的效果，但我们一切都需要以真实场景去细微调整，让光照和阴影以一种更合理的效果融入场景，比如：设备上切换普通、夜间模式，我们可以为不同模式独立使用对应效果的配置。

示例：图像、文字组合

分割图层，组合文字，以达到伪 3D 的效果。
网址：flutter_tilt_book/#/ParallaxImage

import 'package:flutter_tilt/flutter_tilt.dart';

······

Tilt(
  lightConfig: const LightConfig(disable: true),
  shadowConfig: const ShadowConfig(disable: true),
  childLayout: ChildLayout(
    outer: [
      const Positioned.fill(
        top: 80,
        left: 140,
        child: TiltParallax(
          size: Offset(10, 10),
          child: Text(
            'Flutter Tilt',
            style: TextStyle(
              color: Colors.black54,
              fontSize: 40,
              fontWeight: FontWeight.bold,
            ),
          ),
        ),
      ),
      TiltParallax(
        size: const Offset(20, 20),
        child: Image.asset(
          'assets/parallax_image/2.png',
          width: 742,
          height: 337,
        ),
      ),
      TiltParallax(
        size: const Offset(30, 30),
        child: Image.asset(
          'assets/parallax_image/3.png',
          width: 742,
          height: 337,
        ),
      ),
    ],
  ),
  child: Image.asset(
    'assets/parallax_image/1.png',
    width: 742,
    height: 337,
  ),
),

······