Flare 和 Flutter 使用不同的设备（屏幕）答案

【问题标题】：Flare and Flutter with different devices (screens)Flare 和 Flutter 使用不同的设备（屏幕）
【发布时间】：2019-12-26 22:31:19
【问题描述】：

我正在使用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 进行测试导致动画被剪辑。

我希望有另一种方法，而不是为几种屏幕尺寸创建多个动画。

【问题讨论】：

标签： flutter flare

【解决方案1】：

只需将您的动画添加为 SizedBox 的子动画并为其指定宽度/高度即可。

如果您愿意，您还可以使用MediaQuery.of(context).size.width 或height 获取视口尺寸并将SizedBox 设置为相应地使用屏幕的百分比。

【讨论】：

不起作用。无论我使用哪种父容器，Flare 似乎都无法重新缩放其动画。
您也可以尝试将其包装在OverflowBox 中，并将最大高度和宽度设置为您的SizedBox * 1.10。它应该可以工作。

【解决方案2】：

您可以将 MediaQuery 与小部件的当前上下文一起使用，并像这样在您的容器或 sizedbox 中获取 width 或 height

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

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

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

【讨论】：

不起作用。无论我使用哪种父容器，Flare 似乎都无法重新缩放其动画。