You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何禁用Flutter初始化进度指示器?以及能否禁用Flutter Web入口加载时的顶部进度条?

Hey there! Let's tackle your two Flutter questions one by one:

1. How to Disable the Flutter Initialization Progress Indicator

If you're referring to the default progress indicator that shows up during your Flutter app's startup phase (on Android/iOS), here are platform-specific and cross-platform ways to handle it:

  • Android
    Open android/app/src/main/res/drawable/launch_background.xml, locate the ProgressBar node in the layout, then delete or comment it out entirely. If you're using a custom splash screen layout, just make sure it doesn't include any progress indicator components.

  • iOS
    Head to ios/Runner/Assets.xcassets/LaunchImage.imageset and replace the default launch images with your own. Alternatively, edit the Launch Screen.storyboard via Xcode and remove the progress indicator element from the interface. You can also tweak settings in Info.plist to disable the default startup progress UI.

  • Cross-Platform (Custom Startup Logic)
    If you want full control over the post-initialization transition in Flutter code, set your home screen directly as the home property in MaterialApp instead of showing a progress page first. You can also use FutureBuilder to build a custom initialization flow, so you're in charge of exactly what UI is shown during startup—no default progress indicator required.

2. Disabling the Blue Top Progress Bar When Loading Flutter Web Entry Point

That blue top bar is Flutter Web's default loading progress indicator, and you can either disable it entirely or customize its style to match your app's theme:

  • Disable via index.html Configuration
    Open your project's root web/index.html file, find the Flutter initialization script block. When calling loadEntrypoint, you can pass a custom loadingBuilder that returns nothing (or your own custom loading UI) to skip the default progress bar:

    window.addEventListener('load', function(ev) {
      _flutter.loader.loadEntrypoint({
        serviceWorker: {
          serviceWorkerVersion: serviceWorkerVersion,
        },
        loadingBuilder: function(loadingProgress) {
          // Return empty to disable the default progress bar
          return;
        }
      }).then(function(engineInitializer) {
        return engineInitializer.initializeEngine();
      }).then(function(appRunner) {
        return appRunner.runApp();
      });
    });
    

    You can also remove the default loading-related <div> elements from index.html if you don't need any loading UI at all.

  • Customize the Style (Instead of Disabling)
    If you just hate the blue color clashing with your theme, tweak it with CSS instead of disabling it. Add this style block to your index.html:

    .flutter-loader-progress {
      background-color: #your-theme-color !important;
      /* Optional: Adjust height or other properties */
      height: 4px;
    }
    

    This keeps the progress feedback but makes it fit your app's design.


内容的提问来源于stack exchange,提问作者BambinoUA

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.04.28 21:02:29