flutter開屏頁

安卓flutter默認的開屏頁

在flutter項目找到安卓的配置文件AndroidManifest.xml,將下面的代碼寫進 <activity>里面

<meta-data

​       android:name="io.flutter.embedding.android.SplashScreenDrawable"

​       android:resource="@drawable/launch_image"

​       />

flutter開屏頁插件

flutter_native_splash

插件地址:https://pub.dev/packages/flutter_native_splash

通過插件地址可以看到的使用方法，以下是官方給出的用法截圖

也就是要在flutter項目的配置文件(pubspec.yaml)里面復制官方的代碼,注意縮進否則報錯

dev_dependencies:
  flutter_native_splash: ^1.1.7+1

復制完成后官方說別忘了打命令行來安裝插件

flutter pub get

1.設置啟動畫面

自定義以下設置，並將其添加到項目的pubspec.yaml文件中或放置在名為的根項目文件夾中的新文件中flutter_native_splash.yaml。

flutter_native_splash:
  #需要打開app背景顏色
  color: "#42a5f5"
  #需要打開app背景圖片
  # background_image: "assets/launch_image.png"
  #需要打開app圖片
  image: assets/launch_image.png

  # The color_dark, background_image_dark, and image_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

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

  # 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

  # To hide the notification bar, use the fullscreen parameter.  Has no affect 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'

2.運行包

添加設置后，在終端中運行以下命令：

flutter pub run flutter_native_splash:create

當程序包完成運行時，您的啟動屏幕已准備就緒。

建議

二次啟動畫面：

當本機應用程序加載Flutter框架時，將顯示本機啟動屏幕。一旦Flutter載入，您的應用程序准備就緒之前，仍然可能需要加載一些資源。因此，您應該考慮實現在加載這些資源時顯示的Flutter啟動屏幕。這是輔助Flutter初始屏幕的代碼示例，或使用pub.dev中的軟件包。

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return FutureBuilder(
      // Replace the 3 second delay with your initialization code:
      future: Future.delayed(Duration(seconds: 3)),
      builder: (context, AsyncSnapshot snapshot) {
        // Show splash screen while waiting for app resources to load:
        if (snapshot.connectionState == ConnectionState.waiting) {
          return MaterialApp(home: Splash());
        } else {
          // Loading is done, return the app:
          return MaterialApp(
            home: Scaffold(body: Center(child: Text('App loaded'))),
          );
        }
      },
    );
  }
}

class Splash extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Icon(
          Icons.apartment_outlined,
          size: MediaQuery.of(context).size.width * 0.785,
        ),
      ),
    );
  }
}

物質資源：

• 如果要使用“材質圖標”作為初始圖像，請在（material.io/resources/icons）中以Android的****PNG格式下載圖標。我建議使用剛剛下載的文件夾中最大的圖標，以獲得更好的效果。drawable-xxxhdpi
• 材料顏色可在material.io/resources/color中找到

常見問題解答

我可以更改啟動畫面的持續時間嗎？

當本機應用程序加載Flutter框架時，將顯示本機啟動屏幕。因為在顯示本機初始屏幕時無法加載應用程序中的資源，所以本機初始屏幕必須盡可能快。但是，如果您想要更長的啟動畫面，請參閱輔助啟動畫面建議。

是否支持動畫/字幕/ GIF圖像？

目前不行。但是，您可能需要考慮一個支持動畫的輔助啟動屏幕。請參閱輔助啟動畫面建議。

注釋

• 如果在iOS上未正確更新啟動屏幕，或者在啟動屏幕之前遇到白屏，請運行flutter clean並重新編譯您的應用。如果仍不能解決問題，請按照此stackoverflow線程從設備中刪除您的應用程序，關閉設備電源，打開設備電源，安裝並啟動應用程序。
• 此包修改launch_background.xml和styles.xml文件在Android，LaunchScreen.storyboard和Info.plistiOS設備和index.html基於Web。如果您手動修改了這些文件，則此插件可能無法正常工作。如果發現任何錯誤，請打開一個問題。

運作方式

Android

• 您的開機畫面將調整為mdpi，hdpi，xhdpi，xxhdpi和xxxhdpi可繪。
• <item>包含<bitmap>用於您的初始圖像可繪制的標簽將添加到launch_background.xml
• 背景色將添加到中colors.xml並在中引用launch_background.xml。
• 用於全屏模式切換的代碼將添加到中styles.xml。
• 暗模式變體放置在drawable-night，values-night等資源文件夾。

iOS

• 您的啟動圖像將被調整為@3x和@2x圖像。
• 顏色和圖像屬性將插入中LaunchScreen.storyboard。
• 通過使用單個像素png文件並將其拉伸以適合屏幕來實現背景色。
• 隱藏狀態欄切換的代碼將添加到中Info.plist。

網頁

• web/splash將為初始屏幕圖像和CSS文件創建一個文件夾。
• 您的開機畫面將調整為1x，2x以及3x尺寸和放置web/splash/img。
• 初始樣式表web/index.html以及初始圖片的HTML將添加到應用程序的中。

刪除

如果要恢復Flutter的默認白色啟動屏幕，請在終端中運行以下命令：

flutter pub run flutter_native_splash:remove