Flutter应用首次安装启动时splash screen出现黑屏问题求助

我用flutter_native_splash配置了应用启动页，正常启动时功能正常，但安装后的首次启动会出现全黑屏。已按官方文档完成配置，以下是我的代码和配置文件：

main.dart 代码 #

class MyHttpOverrides extends HttpOverrides {
  @override
  HttpClient createHttpClient(SecurityContext? context) {
    return super.createHttpClient(context)
      ..badCertificateCallback =
          (X509Certificate cert, String host, int port) => true;
  }
}

void main() {
  WidgetsBinding widgetsBinding = WidgetsFlutterBinding.ensureInitialized();
  FlutterNativeSplash.preserve(widgetsBinding: widgetsBinding);
  HttpOverrides.global = new MyHttpOverrides();
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    SystemChrome.setPreferredOrientations([
      DeviceOrientation.portraitUp,
      DeviceOrientation.portraitDown,
    ]);
    final ThemeData theme = ThemeData();

    return MultiProvider(
      providers: [
        ChangeNotifierProvider(
          create: (_) => Auth.instance,
        ),
        ChangeNotifierProvider(
          create: (_) => Util(),
        ),
        ChangeNotifierProvider(
          create: (_) => ProductsProvider(),
        ),
        ChangeNotifierProvider(
          create: (_) => CartProvider(),
        ),
        ChangeNotifierProvider(
          create: (ctx) => VendasProvider(),
        ),
        ChangeNotifierProvider(
          create: (ctx) => EntregaProvider(),
        ),
      ],
      child: MaterialApp(
        title: 'Objetivo App',
        theme: theme.copyWith(
          colorScheme: theme.colorScheme.copyWith(
            primary: Color.fromARGB(255, 1, 4, 131),
            secondary: Color.fromARGB(255, 255, 95, 1),
          ),
        ),
        localizationsDelegates: [
          GlobalMaterialLocalizations.delegate,
        ],
        routes: {
          AppRoutes.HOME: (ctx) => SplashScreenPage(),
          AppRoutes.VENDAS_LISTA: (ctx) => VendasLista(),
          // AppRoutes.VENDAS_DETALHE: (ctx) => VendasDetailScreen(),
          AppRoutes.USUARIOS_GERAL: (ctx) => GeralScreen(),
          AppRoutes.CADASTRO_CLIENTE: (context) => CadastroClienteScreen(),
          AppRoutes.ADD_VENDA: (context) => AddVendaScreen(),
          AppRoutes.PRE_VENDA: (context) => PreVendaScreen(),
          AppRoutes.ADD_PAGAMENTO: (context) => AddPagamentoScreen(),
          AppRoutes.DASHBOARD: (context) => Dashboard(),
        },
        debugShowCheckedModeBanner: false,
      ),
    );
  }
}

flutter_native_splash 配置文件 #

flutter_native_splash:
  # This package generates native code to customize Flutter's default white native splash screen
  # with background color and splash image.
  # Customize the parameters below, and run the following command in the terminal:
  # flutter pub run flutter_native_splash:create
  # To restore Flutter's default white splash screen, run the following command in the terminal:
  # flutter pub run flutter_native_splash:remove

  # color or background_image is the only required parameter.  Use color to set the background
  # of your splash screen to a solid color.  Use background_image to set the background of your
  # splash screen to a png image.  This is useful for gradients. The image will be stretch to the
  # size of the app. Only one parameter can be used, color and background_image cannot both be set.
  # color: "#000000" #"#010483"
  background_image: "images/splash_background.png"

  # Optional parameters are listed below.  To enable a parameter, uncomment the line by removing
  # the leading # character.

  # The image parameter allows you to specify an image used in the splash screen.  It must be a
  # png file and should be sized for 4x pixel density.
  # image: images/splash_icon.png

  # The branding property allows you to specify an image used as branding in the splash screen.
  # It must be a png file. It is supported for Android, iOS and the Web.  For Android 12,
  # see the Android 12 section below.
  #branding: assets/dart.png

  # To position the branding image at the bottom of the screen you can use bottom, bottomRight,
  # and bottomLeft. The default values is bottom if not specified or specified something else.
  #branding_mode: bottom

  # The color_dark, background_image_dark, image_dark, branding_dark are parameters that set the background
  # and image when the device is in dark mode. If they are not specified, the app will use the
  # parameters from above. If the image_dark parameter is specified, color_dark or
  # background_image_dark must be specified.  color_dark and background_image_dark cannot both be
  # set.
  #color_dark: "#042a49"
  #background_image_dark: "assets/dark-background.png"
  #image_dark: assets/splash-invert.png
  #branding_dark: assets/dart_dark.png

  # Android 12 handles the splash screen differently than previous versions.  Please visit
  # https://developer.android.com/guide/topics/ui/splash-screen
  # Following are Android 12 specific parameter.
  android_12:
    # The image parameter sets the splash screen icon image.  If this parameter is not specified,
    # the app's launcher icon will be used instead.
    # Please note that the splash screen will be clipped to a circle on the center of the screen.
    # App icon with an icon background: This should be 960×960 pixels, and fit within a circle
    # 640 pixels in diameter.
    # App icon without an icon background: This should be 1152×1152 pixels, and fit within a circle
    # 768 pixels in diameter.
    image: images/splash_icon.png

    # Splash screen background color.
    color: "#000000"

    # App icon background color.
    #icon_background_color: "#111111"

    # The branding property allows you to specify an image used as branding in the splash screen.
    #branding: assets/dart.png

    # The image_dark, color_dark, icon_background_color_dark, and branding_dark set values that
    # apply when the device is in dark mode. If they are not specified, the app will use the
    # parameters from above.
    #image_dark: assets/android12splash-invert.png
    #color_dark: "#042a49"
    #icon_background_color_dark: "#eeeeee"

  # The android, ios and web parameters can be used to disable generating a splash screen on a given
  # platform.
  android: true
  ios: true
  #web: false

  # Platform specific images can be specified with the following parameters, which will override
  # the respective parameter.  You may specify all, selected, or none of these parameters:
  #color_android: "#42a5f5"
  #color_dark_android: "#042a49"
  #color_ios: "#42a5f5"
  #color_dark_ios: "#042a49"
  #color_web: "#42a5f5"
  #color_dark_web: "#042a49"
  #image_android: assets/splash-android.png
  #image_dark_android: assets/splash-invert-android.png
  #image_ios: assets/splash-ios.png
  #image_dark_ios: assets/splash-invert-ios.png
  #image_web: assets/splash-web.png
  #image_dark_web: assets/splash-invert-web.png
  #background_image_android: "assets/background-android.png"
  #background_image_dark_android: "assets/dark-background-android.png"
  #background_image_ios: "assets/background-ios.png"
  #background_image_dark_ios: "assets/dark-background-ios.png"
  #background_image_web: "assets/background-web.png"
  #background_image_dark_web: "assets/dark-background-web.png"
  #branding_android: assets/brand-android.png
  #branding_dark_android: assets/dart_dark-android.png
  #branding_ios: assets/brand-ios.png
  #branding_dark_ios: assets/dart_dark-ios.png

  # The position of the splash image can be set with android_gravity, ios_content_mode, and
  # web_image_mode parameters.  All default to center.
  #
  # android_gravity can be one of the following Android Gravity (see
  # https://developer.android.com/reference/android/view/Gravity): bottom, center,
  # center_horizontal, center_vertical, clip_horizontal, clip_vertical, end, fill, fill_horizontal,
  # fill_vertical, left, right, start, or top.
  #android_gravity: center
  #
  # ios_content_mode can be one of the following iOS UIView.ContentMode (see
  # https://developer.apple.com/documentation/uikit/uiview/contentmode): scaleToFill,
  # scaleAspectFit, scaleAspectFill, center, top, bottom, left, right, topLeft, topRight,
  # bottomLeft, or bottomRight.
  #ios_content_mode: center
  #
  # web_image_mode can be one of the following modes: center, contain, stretch, and cover.
  #web_image_mode: center

  # The screen orientation can be set in Android with the android_screen_orientation parameter.
  # Valid parameters can be found here:
  # https://developer.android.com/guide/topics/manifest/activity-element#screen
  #android_screen_orientation: sensorLandscape

  # To hide the notification bar, use the fullscreen parameter.  Has no effect in web since web
  # has no notification bar.  Defaults to false.
  # NOTE: Unlike Android, iOS will not automatically show the notification bar when the app loads.
  #       To show the notification bar, add the following code to your Flutter app:
  #       WidgetsFlutterBinding.ensureInitialized();
  #       SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.bottom, SystemUiOverlay.top]);
  #fullscreen: true

  # If you have changed the name(s) of your info.plist file(s), you can specify the filename(s)
  # with the info_plist_files parameter.  Remove only the # characters in the three lines below,
  # do not remove any spaces:
  #info_plist_files:
  #  - 'ios/Runner/Info-Debug.plist'
  #  - 'ios/Runner/Info-Release.plist'

排查与解决建议 #

• 检查资源有效性：确认images/splash_background.png和images/splash_icon.png文件存在、路径正确且无损坏，首次启动时资源加载容错性更低。
• 修复Android 12配置冲突：你为Android 12单独设置了color: "#000000"黑色背景，与全局background_image可能冲突。尝试注释掉Android 12的color配置，或改为与背景图主色调一致的颜色。
• 添加remove调用时机：目前只调用了preserve但未在合适时机移除原生启动页，首次启动Flutter初始化慢，会导致原生启动页提前消失、Flutter页面未渲染完成的黑屏。在SplashScreenPage的initState中，等初始化完成后调用：

  @override
  void initState() {
    super.initState();
    // 等待应用初始化完成（比如数据加载、Provider初始化）
    Future.delayed(const Duration(seconds: 2), () {
      FlutterNativeSplash.remove();
      // 执行页面跳转逻辑
    });
  }
  

• 清理缓存重新构建：执行以下命令清理缓存并重新生成原生启动页：

  flutter clean
  flutter pub get
  flutter pub run flutter_native_splash:create
  flutter build apk --release # 对应目标平台的构建命令
  

• 延后非必要初始化：将HttpOverrides.global等非启动必需的操作，延后到runApp之后或SplashScreenPage的初始化中，避免阻塞启动流程。

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