如何在Flutter Desktop中添加指定样式的启动屏

你要实现的是典型的静态分层启动屏，由纯色背景、居中应用主图标、底部品牌标识三个核心元素组成，不同技术栈的实现方案如下：

原生Android实现 #

• 首先创建启动屏专属主题，在res/values/styles.xml中添加如下配置：

<style name="LaunchTheme" parent="Theme.MaterialComponents.DayNight.NoActionBar">
    <item name="android:windowBackground">@drawable/launch_background</item>
    <item name="android:statusBarColor">@android:color/white</item>
    <item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item>
</style>

• 然后创建launch_background.xml放在res/drawable目录下，配置分层背景：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 全局背景色 -->
    <item android:drawable="@android:color/white" />
    <!-- 居中显示的应用主图标 -->
    <item>
        <bitmap
            android:gravity="center"
            android:src="@mipmap/ic_launcher" />
    </item>
    <!-- 底部显示的品牌标识 -->
    <item android:gravity="bottom|center_horizontal" android:bottom="32dp">
        <bitmap
            android:gravity="center"
            android:src="@drawable/brand_logo" />
    </item>
</layer-list>

• 最后在AndroidManifest.xml中将启动Activity的主题设置为LaunchTheme，Activity逻辑中完成初始化后跳转到主页面即可。

原生iOS实现 #

• 打开Xcode项目，找到LaunchScreen.storyboard文件
• 添加两个UIImageView组件：
  • 第一个作为应用主图标，设置约束为水平、垂直居中，宽高按设计稿设置即可，一般为80~120pt
  • 第二个作为底部品牌标识，设置约束为水平居中、距离底部安全区32pt，尺寸按设计稿调整
• 将两个ImageView的image属性设置为对应的图标资源，根视图背景色设置为设计要求的白色即可
• 可以适当关闭部分安全区适配规则，避免全面屏设备上下留空异常。

Flutter实现 #

• 优先用原生层启动屏（参考上述安卓、iOS的原生实现方案），避免Flutter帧渲染延迟导致的冷启动白屏问题
• 如果需要做Flutter侧的过渡启动屏，可参考如下代码实现：

class SplashScreen extends StatelessWidget {
  const SplashScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.white,
      child: Stack(
        alignment: Alignment.center,
        children: [
          // 居中的应用主图标
          Image.asset('assets/icons/app_icon.png', width: 100, height: 100),
          // 底部的品牌标识
          Positioned(
            bottom: 32 + MediaQuery.of(context).padding.bottom,
            child: Image.asset('assets/icons/brand_logo.png', height: 24),
          )
        ],
      ),
    );
  }
}

• 可以在启动页的initState中执行应用初始化逻辑，完成后跳转到主页面即可。

通用注意事项：启动屏不要添加多余的动画、不要强制设置固定等待时长，尽量用原生层实现可以大幅提升启动体验，避免冷启动阶段出现白屏。

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