Flutter AnimatedSplashScreen中Image.asset设置宽高不生效如何解决

问题原因 #

AnimatedSplashScreen组件默认对splash参数传入的子组件施加了固定尺寸约束，你直接为Image.asset设置的height/width会被父级约束覆盖，所以无法生效。

可行解决方案 #

• 方案1：使用组件自带的splashIconSize参数（最简单）
  直接为AnimatedSplashScreen新增splashIconSize属性指定你需要的图标尺寸即可，无需修改Image配置：

  class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return MaterialApp(
        debugShowCheckedModeBanner: false,
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: AnimatedSplashScreen(
            duration: 4000,
            splash: Image.asset("assets/icons/icon.png"),
            // 新增此行，数值可根据需求调整
            splashIconSize: 200,
            nextScreen: Homepage(title: "Travel Nepal",),
            splashTransition: SplashTransition.fadeTransition,
            backgroundColor: Color(0xffF99DC8),
        ),
      );
    }
  }
  

• 方案2：父容器包裹Image实现灵活控制
  如果需要自定义宽高比例，可以用SizedBox/Container包裹Image，同时设置fit: BoxFit.contain保证图片等比缩放，不会出现变形、截断问题：

  class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return MaterialApp(
        debugShowCheckedModeBanner: false,
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: AnimatedSplashScreen(
            duration: 4000,
            splash: SizedBox(
              width: 250,
              height: 250,
              child: Image.asset(
                "assets/icons/icon.png",
                fit: BoxFit.contain,
              ),
            ),
            // 取消默认的尺寸约束
            splashIconSize: double.maxFinite,
            nextScreen: Homepage(title: "Travel Nepal",),
            splashTransition: SplashTransition.fadeTransition,
            backgroundColor: Color(0xffF99DC8),
        ),
      );
    }
  }
  

  其中BoxFit.contain的作用是等比缩放图片至完整适配容器，不会拉伸变形也不会裁剪内容，非常适合logo类资源的展示场景。

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