1

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

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

4

2 回答 2

0

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

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

否则，如果您有一个小部件，您可以使用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",
              )),
  );
于 2019-08-23T02:58:57.273 回答
0

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

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

于 2019-08-23T03:04:14.463 回答