Flutter使用splashscreen库时如何控制启动页GIF图片尺寸实现全屏显示

你使用的splashscreen库的photoSize参数仅支持传入固定数值，用于定义启动页图片的正方形边长，本身不支持自适应全屏尺寸，可通过以下两种方案实现GIF图片占满全屏的需求：

方案1：动态计算屏幕尺寸赋值给photoSize #

通过MediaQuery获取当前设备的屏幕宽高，取最大值赋值给photoSize，保证图片尺寸足够覆盖全屏，修改后的代码如下：

@override
Widget build(BuildContext context) {
  // 获取当前设备屏幕宽高
  final screenWidth = MediaQuery.of(context).size.width;
  final screenHeight = MediaQuery.of(context).size.height;
  return Container(
    width: double.infinity,
    height: double.infinity,
    child: SplashScreen(
      seconds: 8,
      image: Image.asset(
        'assets/images/loading.gif',
        fit: BoxFit.cover,
      ),
      backgroundColor: Colors.black,
      // 取宽高最大值赋值，确保图片足够大撑满屏幕
      photoSize: screenWidth > screenHeight ? screenWidth : screenHeight,
      onClick: () => print("Oops "),
      loaderColor: Colors.white,
    ),
  );
}

方案2：自定义child组件完全控制布局 #

如果方案1存在裁切、边距异常问题，可以直接弃用库自带的image、photoSize参数，传入自定义的child组件实现布局完全可控：

@override
Widget build(BuildContext context) {
  return SplashScreen(
    seconds: 8,
    backgroundColor: Colors.black,
    onClick: () => print("Oops "),
    loaderColor: Colors.white,
    // 传入自定义child实现全屏GIF
    child: SizedBox.expand(
      child: Image.asset(
        'assets/images/loading.gif',
        fit: BoxFit.cover,
      ),
    ),
  );
}

注意：使用方案2时不需要再配置image、photoSize参数，避免和自定义child产生布局冲突。

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