Flutter（Dart）启动页设计优化：让Logo填满圆角圆形并添加背景图

一、让Logo填满圆角圆形区域 #

Flutter启动页的配置需在原生项目中完成，分Android和iOS两种场景处理：

Android端 #

1. 找到android/app/src/main/res/drawable/launch_background.xml文件（无则新建）
2. 调整ImageView的属性，将scaleType设为centerCrop，确保图片适配圆形区域：

<ImageView
    android:src="@mipmap/ic_launcher"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:scaleType="centerCrop"
    android:layout_gravity="center" />

若圆形区域是通过shape实现的，需保证ImageView尺寸与圆角容器一致，或直接使用带圆角的Logo图片（更省心，避免适配问题）。

iOS端 #

1. 打开ios/Runner/Assets.xcassets，找到启动图相关资源
2. 确保Logo图片尺寸足够覆盖圆形区域，再在LaunchScreen.storyboard中调整UIImageView的属性：
   • 选中ImageView，在右侧属性面板将Content Mode设为Aspect Fill
   • 勾选Clip to Bounds，让超出圆形容器的图片部分被裁剪

二、为Flutter启动页添加背景图片 #

同样需在原生项目中配置：

Android端 #

修改launch_background.xml，在根布局中加入背景图片配置：

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 背景图片 -->
    <item>
        <bitmap
            android:src="@drawable/background"
            android:gravity="fill" />
    </item>
    <!-- Logo部分 -->
    <item>
        <ImageView
            android:src="@mipmap/ic_launcher"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:scaleType="centerCrop"
            android:layout_gravity="center" />
    </item>
</layer-list>

注意把@drawable/background替换为你实际的背景图片资源名，并将图片放入对应drawable目录。

iOS端 #

1. 将背景图片添加到Assets.xcassets中
2. 打开LaunchScreen.storyboard，在最底层的View上设置背景：
   • 选中View，在右侧属性面板的Background选项中选择你的背景图片
   • 调整Content Mode为Scale to Fill或Aspect Fill以适配屏幕

内容的提问来源于stack exchange，提问作者نبيل سليمان