如何在Flutter中使用flutter_native_splash包修改启动页停留时长

前置说明 #

flutter_native_splash默认会在Flutter渲染出应用第一帧时自动关闭启动页，本身没有提供直接配置固定显示时长的参数，需要通过手动控制启动页的关闭时机来实现自定义时长。

具体操作步骤 #

• 第一步：完成flutter_native_splash基础配置
  按照包的使用要求在pubspec.yaml中配置好启动页的背景色、图标、品牌图等参数，执行命令flutter pub run flutter_native_splash:create生成Android、iOS等各端的原生启动页资源。
• 第二步：关闭启动页自动隐藏逻辑
  在项目入口main.dart中调用FlutterNativeSplash.preserve()方法，阻止启动页自动关闭，示例代码如下：

  import 'package:flutter/material.dart';
  import 'package:flutter_native_splash/flutter_native_splash.dart';
  
  void main() {
    WidgetsBinding widgetsBinding = WidgetsFlutterBinding.ensureInitialized();
    // 保留启动页，不自动关闭
    FlutterNativeSplash.preserve(widgetsBinding: widgetsBinding);
    runApp(const MyApp());
  }
  
  class MyApp extends StatelessWidget {
    const MyApp({super.key});
  
    @override
    Widget build(BuildContext context) {
      return MaterialApp(
        home: const HomePage(),
      );
    }
  }
  

• 第三步：添加延迟关闭逻辑
  在应用首页的initState生命周期中添加定时延迟，到达设定时长后手动调用方法关闭启动页，示例代码如下（示例为延迟2秒关闭，可自行调整Duration参数的数值）：

  class HomePage extends StatefulWidget {
    const HomePage({super.key});
  
    @override
    State<HomePage> createState() => _HomePageState();
  }
  
  class _HomePageState extends State<HomePage> {
    @override
    void initState() {
      super.initState();
      // 自定义延迟时长，单位可替换为milliseconds等
      Future.delayed(const Duration(seconds: 2), () {
        FlutterNativeSplash.remove();
      });
    }
  
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(title: const Text("首页")),
      );
    }
  }
  

注意事项 #

• 不要设置过长的启动页显示时长，避免影响用户体验，建议最长不超过3秒
• 如果你需要在启动阶段执行初始化业务逻辑（比如用户登录状态校验、资源预加载等），可以等逻辑执行完成后再调用FlutterNativeSplash.remove()，不需要硬编码固定时长
• 所有启动页相关配置修改完成后，需要重新编译全量包才能生效，热重载/热重启无法生效

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