Flutter中如何实现Rive动画全屏拉伸铺满效果？

问题原因 #

原有代码仅调整了父容器尺寸，未配置Rive组件的适配规则，Rive默认会保留动画原始比例渲染，因此无法铺满全屏。

核心修改点 #

• 给Rive组件添加fit属性，赋值为BoxFit.fill，该配置会忽略动画原始宽高比，强制拉伸适配父容器尺寸
• 最外层用Container设置宽高为屏幕全尺寸，保证父容器占满整个页面

问题原始代码 #

Center(
            child: _riveArtboard == null
                ? const SizedBox()
                : Rive(artboard: _riveArtboard),
          ),

最终可用代码 #

Container(
          height: h,
          width: w,
          child: Center(
            child: _riveArtboard == null
                ? const SizedBox()
                : Rive(fit: BoxFit.fill, artboard: _riveArtboard),
          ),
        )

注：代码中的h、w为通过MediaQuery获取的设备屏幕高度、宽度值。

内容的提问来源于stack exchange，提问作者helloitsme3