Flutter 小部件的 Motion 效果

此包添加了一个新的 Motion 小部件,它将基于陀螺仪的效果应用于 Flutter 小部件。

"Demo of the Motion plugin"

要在设备或模拟器上查看以下效果的示例

cd example/
flutter run --release

如何使用

将你的目标小部件包装在 [Motion] 小部件的子项中。你需要提供一个 [MotionController] 实例,它将保存你的小部件的变换。此小部件最简单的用法如下

import 'package:motion/motion.dart';

final controller = MotionController();

...

return Motion(
    elevation: 7,
    controller: controller,
    child: myWidget,
);

高程

为了与 Material Design 语言保持一致,你可以将 elevation 参数传递给小部件。

它将影响阴影的偏移量、不透明度和模糊度。可能的值范围在 0100 之间。

"Elevations examples"

比较不同的 elevation

阴影

shadow 是可选的,取决于 elevation 值是否启用。elevation 值越高,阴影就会越模糊,越靠近小部件的后面,就像 Material Design 语言一样。其移动的幅度也由 elevation 控制。

"Shadow effect comparison"

与带阴影效果和不带阴影效果的比较

默认情况下,shadow 是启用的,但你可以通过使用 shadow: false 来构造 Motion 小部件来禁用它。

炫光

glare 效果也是可选的。它是一个非常微妙的渐变叠加,为小部件带来了反光感。

"Glare effect comparison"

与带炫光效果和不带炫光效果的比较

此效果也默认启用,你可以通过使用 glare: false 来构造 Motion 小部件来禁用它。

GitHub

查看 Github