Feat: Tilt.lightShadowMode

CHANGELOG.md

@@ -3,7 +3,9 @@
 > [!IMPORTANT]  
 > See the [Migration Guide](guides/migration_guide.md) for the details of breaking changes between versions.
 
-## 3.1.0 (Unreleased)
+## 3.2.0 (Unreleased)
+
+## 3.2.0-rc.1
 
 ### New features
 

README-ZH.md

@@ -230,7 +230,7 @@ Tilt(
 
 | 参数名 | 类型 | 默认值 | 描述 |  
 | --- | --- | --- | --- |
-| child <sup>`required`</sup> | `Widget` | - | 创建一个 widget，使 child widget 有倾斜效果。 |  
+| child <sup>`必选`</sup> | `Widget` | - | 创建一个 widget，使 child widget 有倾斜效果。 |  
 | childLayout | [ChildLayout][] | `ChildLayout()` | 其它 child 布局。 <br/> 例如：位于 child 外部、内部、后面的视差布局。 |  
 | tiltStreamController | [StreamController&lt;TiltStreamModel&gt;][]? | `null` | 使用 `StreamController<TiltStreamModel>.broadcast()` 来自定义控制倾斜。 |  
 | disable | `bool` | `false` | 禁用所有效果。 |  
@@ -250,7 +250,7 @@ Tilt(
 
 | 参数名 | 类型 | 默认值 | 描述 |  
 | --- | --- | --- | --- |
-| child <sup>`required`</sup> | `Widget` | - | 创建视差 widget。 |  
+| child <sup>`必选`</sup> | `Widget` | - | 创建视差 widget。 |  
 | size | `Offset` | `Offset(10.0, 10.0)` | 视差大小。 |  
 | filterQuality | `FilterQuality` | `null` | Flutter FilterQuality。 |  
 
@@ -290,7 +290,7 @@ tiltStreamController.add(
 
 | Parameter | Type | Default | Description |  
 | --- | --- | --- | --- |
-| position <sup>`required`</sup> | `Offset` | - | 当前触发的坐标位置， <br/> 会触发对应位置的倾斜效果。 <br/> 例如： <br/> 有一个组件尺寸为 width: 10, height: 10, <br/> (0, 0)：会触发最左上的倾斜。 <br/> (10, 10)：会触发最右下的倾斜。 |  
+| position <sup>`必选`</sup> | `Offset` | - | 当前触发的坐标位置， <br/> 会触发对应位置的倾斜效果。 <br/> 例如： <br/> 有一个组件尺寸为 width: 10, height: 10, <br/> (0, 0)：会触发最左上的倾斜。 <br/> (10, 10)：会触发最右下的倾斜。 |  
 | gesturesType | `GesturesType` | `GesturesType.controller` | 触发手势类型。 <br/> 会根据 [手势优先级](#手势优先级-) 进行触发。 <br/> 如果需要自定义动画或其他方式自行控制， <br/> `推荐` 使用 `GesturesType.controller`。 <br/> 如果使用其他的类型进行触发， <br/> 那么就会受到对应类型相关配置、效果的影响。 <br/> 例如： <br/> 自行触发 `GesturesType.sensors` 的时候。 <br/> 配置 `TiltConfig.enableSensorRevert` 为 false 的情况下， <br/> 将同样不会复原至初始状态。 |  
 | gestureUse | `bool` | `true` | 手势是否正在使用。 <br/> 用于确定手势是否正在使用，并根据手势优先级进行处理。 <br/> 例如： <br/> 如果在触发 `GesturesType.touch` 的时候永远不赋值为 false，那么优先级低于 `GesturesType.touch` 的手势将永远不会被触发。 |  
 

lib/src/widget/tilt_shadow.dart

@@ -1,4 +1,5 @@
 import 'dart:ui';
+import 'package:flutter/foundation.dart' show kIsWeb;
 import 'package:flutter/widgets.dart';
 
 import '../config/tilt_light_config.dart';
@@ -210,11 +211,19 @@ class TiltShadowProjector extends TiltShadow {
                   (shadowConfig.projectorBlurSigmaFrom -
                       shadowConfig.projectorBlurSigmaTo);
 
+  Matrix4 get transform => Matrix4.zero()
+    ..setIdentity()
+    ..translate(offset.dx, offset.dy)
+    ..scale(scale, scale);
+
   @override
   Widget build(BuildContext context) {
-    return IgnorePointer(
-      child: Transform.translate(
-        offset: offset,
+    if (shadowDisable) return const SizedBox();
+
+    /// TODO: BUG - 在 Web 端，Widget 嵌套顺序不同会导致渲染错误的奇怪效果，暂时单独处理。
+    /// 目前测试下来是将 ImageFiltered 嵌套在 Transform 内引起的。
+    if (kIsWeb) {
+      return IgnorePointer(
         child: ImageFiltered(
           imageFilter: ImageFilter.blur(
             sigmaX: blurSigma,
@@ -228,7 +237,37 @@ class TiltShadowProjector extends TiltShadow {
                 shadowConfig.color,
                 BlendMode.srcATop,
               ),
-              child: Transform.scale(scale: scale, child: child),
+              child: Transform(
+                alignment: Alignment.center,
+                transform: transform,
+                child: child,
+              ),
+            ),
+          ),
+        ),
+      );
+    }
+
+    /// TODO: BUG - 在其他端，Widget 嵌套顺序不同会导致渲染错误的奇怪效果。
+    /// 请暂时务必只保持以下嵌套顺序
+    return IgnorePointer(
+      child: Transform(
+        alignment: Alignment.center,
+        transform: transform,
+        child: ColorFiltered(
+          colorFilter: ColorFilter.mode(
+            shadowConfig.color,
+            BlendMode.srcATop,
+          ),
+          child: ImageFiltered(
+            imageFilter: ImageFilter.blur(
+              sigmaX: blurSigma,
+              sigmaY: blurSigma,
+              tileMode: TileMode.decal,
+            ),
+            child: Opacity(
+              opacity: showShadow,
+              child: child,
             ),
           ),
         ),

pubspec.yaml

@@ -8,7 +8,7 @@ description: Easily apply tilt parallax hover effects for Flutter, which support
 # https://semver.org/spec/v2.0.0-rc.1.html
 # https://dart.dev/tools/pub/versioning#semantic-versions
 # https://dart.dev/tools/pub/dependencies#version-constraints
-version: 3.1.0
+version: 3.2.0-rc.1
 homepage: https://amoshuke.github.io/flutter_tilt_book
 repository: https://github.com/fluttercandies/flutter_tilt
 issue_tracker: https://github.com/fluttercandies/flutter_tilt/issues

test/tilt_widget/tilt_gestures_touch_test.dart

@@ -527,5 +527,64 @@ void main() {
       expect(leaveGesturesTypeTest, GesturesType.touch);
       expect(leaveTiltDataTest, leaveTiltDataTestExpect);
     });
+
+    testWidgets('LightShadowMode.projector ShadowConfig.disable = true',
+        (WidgetTester tester) async {
+      TiltDataModel? moveTiltDataTest;
+      TiltDataModel? leaveTiltDataTest;
+      GesturesType? moveGesturesTypeTest;
+      GesturesType? leaveGesturesTypeTest;
+      final TiltDataModel leaveTiltDataTestExpect = TiltDataModel(
+        angle: Offset.zero,
+        areaProgress: Offset.zero,
+        position: const Offset(5.0, 5.0),
+        transform: Matrix4(
+          1.0,
+          0.0,
+          0.0,
+          0.0,
+          0.0,
+          1.0,
+          0.0,
+          0.0,
+          0.0,
+          0.0,
+          1.0,
+          0.05,
+          0.0,
+          0.0,
+          0.0,
+          1.0,
+        ),
+      );
+
+      /// 回调赋值
+      await tester.pumpWidget(
+        TiltWidget(
+          lightShadowMode: LightShadowMode.projector,
+          shadowConfig: const ShadowConfig(disable: true),
+          onGestureMove: (TiltDataModel tiltData, GesturesType gesturesType) {
+            moveTiltDataTest = tiltData;
+            moveGesturesTypeTest = gesturesType;
+          },
+          onGestureLeave: (TiltDataModel tiltData, GesturesType gesturesType) {
+            leaveTiltDataTest = tiltData;
+            leaveGesturesTypeTest = gesturesType;
+          },
+        ),
+      );
+
+      /// 倾斜 touch move
+      await tester.fling(tiltWidgetFinder, const Offset(0.0, 5.0), 0.1);
+      expect(childFinder, findsNWidgets(1));
+      expect(moveGesturesTypeTest, GesturesType.touch);
+      expect(moveTiltDataTest != null, true);
+
+      /// 倾斜 touch leave
+      await tester.fling(tiltScaffoldFinder, const Offset(0.0, -1.0), 0.1);
+      expect(childFinder, findsNWidgets(1));
+      expect(leaveGesturesTypeTest, GesturesType.touch);
+      expect(leaveTiltDataTest, leaveTiltDataTestExpect);
+    });
   });
 }