不同设备（屏幕）的 Flare 和 Flutter

Question

我正在用 flare 和 flutter 做我的第一步，现在能够将动画放入 flutter 中而无需手动编码真的很棒。但我不明白如何让耀斑响应（如何支持不同的屏幕尺寸）。

这是启动画面的一部分：

@override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: const Color.fromRGBO(250, 224, 61, 1.0),
        body: Center(
          child: Container(
              child: FlareActor(
                "assets/flare/splash.flr",
                callback: (nameOfAnimation) =>
                    Navigator.pushReplacementNamed(context, "/login"),
                fit: BoxFit.none,
                animation: "splash",
              )),
        ));
  }

这在我的 iPhone X 上效果很好，因为动画是为那个尺寸设计的。有什么办法可以让较小的设备使用同样的光斑动画吗？使用 iPhone SE 对此进行测试会导致动画剪辑。

除了为多种屏幕尺寸创建多种动画之外，我希望还有另一种方法。

Answer 1

您可以将 MediaQuery 与小部件的当前上下文一起使用，并像这样

在您的容器或 sizedbox 中获取 width 或 height

width: MediaQuery.of(context).size.width * 0.65
   height: MediaQuery.of(context).size.width * 0.65

else 如果您只有一个小部件，您可以使用 FractionallySizedBox 小部件来指定可用 space 的百分比来填充

FractionallySizedBox(
    widthFactor: 0.7,
    heightFactor: 0.3,
    child:FlareActor(
                "assets/flare/splash.flr",
                callback: (nameOfAnimation) =>
                    Navigator.pushReplacementNamed(context, "/login"),
                fit: BoxFit.none,
                animation: "splash",
              )),
  );

Answer 2

只需将您的动画添加为 SizedBox 的子项并给它一个 width/height 就可以了。

您还可以使用 MediaQuery.of(context).size.width 或 height 获取视口尺寸，并根据需要设置 SizedBox 相应地使用屏幕的 %。

不同设备（屏幕）的 Flare 和 Flutter

Flare and Flutter with different devices (screens)

flare

flutter