如何给使用flutter_native_splash实现的启动屏添加加载spinner

下面提供两种常用的实现路径，可根据你的需求选择：

方案一：Flutter层过渡实现（最简便，兼容性最好） #

原生启动屏是在Flutter引擎初始化完成前显示的，你可以在原生启动屏消失后，无缝衔接一个和原生启动屏视觉样式完全一致的Flutter过渡页，在这个页面上叠加加载Spinner，用户完全感知不到切换痕迹：

• 保持你现有的flutter_native_splash配置不变，先确保原生启动屏显示正常
• 新建一个Flutter页面，背景、Logo样式和原生启动屏完全一致，在页面上叠加你需要的加载Spinner，可以用Flutter自带的CircularProgressIndicator，也可以用自定义的加载动画
• 在该页面的initState方法中执行你的App初始化逻辑（比如全局资源加载、用户登录状态校验等），初始化完成后再跳转到App首页，跳转时可添加淡入淡出动画，进一步弱化衔接感

方案二：原生启动屏层面添加Spinner（适合需要在引擎初始化阶段就显示加载动画的场景） #

如果你需要在原生启动屏显示阶段（Flutter引擎还未启动）就显示加载动画，可以分别在Android、iOS的原生启动屏配置中添加：

Android端配置 #

• 打开项目android/app/src/main/res/drawable目录下的启动屏配置文件（通常命名为launch_background.xml）
• 在现有图层配置中新增ProgressBar的item，调整到你需要的位置即可，示例配置参考：

<item
    android:gravity="bottom|center_horizontal"
    android:bottom="48dp">
    <ProgressBar
        android:indeterminate="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:indeterminateTint="@color/your_spinner_color"/>
</item>

iOS端配置 #

• 用Xcode打开iOS项目，找到LaunchScreen.storyboard文件
• 在现有启动屏的视图层级中添加一个Activity Indicator View，设置好位置、颜色，勾选「Animating」和「Hides When Stopped」属性，启动时就会自动播放加载动画

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