****簡介****

flutter_native_splash(點(diǎn)我可直達(dá)pub庫) 是一個(gè) Flutter 庫，可以幫助您在啟動(dòng)應(yīng)用程序時(shí)添加原生的啟動(dòng)屏幕。通過使用 flutter_native_splash，您可以輕松地創(chuàng)建適用于 Android 和 iOS 平臺(tái)的啟動(dòng)屏幕，而無需手動(dòng)編輯原生代碼。

****使用場景****

flutter_native_splash 適用于以下場景：

想要為您的應(yīng)用程序添加原生啟動(dòng)屏幕。

不希望手動(dòng)編輯原生代碼。

****使用步驟****

步驟1：

要使用 flutter_native_splash 庫，您需要在項(xiàng)目中添加依賴項(xiàng)。您可以在 pubspec.yaml 文件中添加以下代碼：

dependencies:
  flutter_native_splash: ^2.3.0

如下圖：

然后在終端執(zhí)行命令

flutter pub get

看到庫更新成功了說明庫就下載好了。

步驟2：
自定義下面的設(shè)置，然后添加到工程的 pubspec.yaml 文件中，或者在工程文件夾下放置名為 flutter_native_splash.yaml 的新文件。個(gè)人強(qiáng)烈建議單獨(dú)創(chuàng)建一個(gè)flutter_native_splash.yaml 的新文件，特別注意名字就叫flutter_native_splash.yaml不要取其他名字，如下圖：

創(chuàng)建好之后，然后設(shè)置里面的內(nèi)容，內(nèi)容如下，直接全部復(fù)制即可。

flutter_native_splash: 

  # 該鋸生成原生代碼來自定義 Flutter 默認(rèn)白色原生閃屏界面的背景色和閃屏圖像。
  # 自定義下面的參數(shù)，然后在命令行終端運(yùn)行下面的命令：
  # flutter pub run flutter_native_splash:create
  # 要恢復(fù)為 Flutter 默認(rèn)的白色閃屏界面，運(yùn)行下面的命令：
  # flutter pub run flutter_native_splash:remove

  # 只有 color 或 background_image 是必需的參數(shù)。使用 color 將閃屏界面的背景設(shè)置為單色。
  # 使用 background_image 可將 png 圖像設(shè)置為閃屏界面的背景。該圖像會(huì)被拉伸以適應(yīng)應(yīng)用大小。
  # color 和 background_image 不能同時(shí)設(shè)置，只有一個(gè)會(huì)被使用。 
  # color: "#42a5f5"
  background_image: "assets/launch_image.png"

  # 以下是可選的參數(shù)。去掉注釋前面的 #可使參數(shù)起作用。

  # image 參數(shù)允許你指定在閃屏界面使用的圖像。它必須是 png 文件，且應(yīng)該是用于4倍像素密度的大小。
  #image: assets/splash.png

  # 該屬性允許你指定圖像作為商標(biāo)在閃屏界面顯示。它必須是 png 文件?，F(xiàn)在它只支持 Android 和 iOS 。
  #branding: assets/dart.png

  # 為黑暗模式指定商標(biāo)圖像
  #branding_dark: assets/dart_dark.png

  # 要將商標(biāo)圖像放置在界面底部，可以使用 bottom 、 bottomRight 和 bottomLeft 。如果未指定或者指定了其它值，使用默認(rèn)值 bottom 。
  # 確保該內(nèi)容模式值與 android_gravity 值 和 ios_content_mode 值不相似。
  #branding_mode: bottom

  # color_dark 、 background_image_dark 和 image_dark 用于設(shè)備在黑暗模式時(shí)設(shè)置背景色和圖像。
  # 如果沒有指定，應(yīng)用會(huì)使用上面的參數(shù)。如果指定了 image_dark ，必須要指定 color_dark 或 background_image_dark 。
  # color_dark 和 background_image_dark 不能同時(shí)設(shè)置。
  #color_dark: "#042a49"
  #background_image_dark: "assets/dark-background.png"
  #image_dark: assets/splash-invert.png

  # android 、 ios 和 web 參數(shù)可用于不為對應(yīng)的平臺(tái)生成閃屏界面。
  #android: false
  #ios: false
  #web: false

  #  可用 android_gravity 、 android_gravity 、 ios_content_mode 和 web_image_mode 來設(shè)置閃屏圖像的位置。默認(rèn)是居中。
  #
  # android_gravity 可以是以下 Android Gravity 其中之一 (查看
  # 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 或 top 。
  #android_gravity: center
  #
  # ios_content_mode 可以是以下 iOS UIView.ContentMode 其中之一 (查看
  # https://developer.apple.com/documentation/uikit/uiview/contentmode): scaleToFill 、
  # scaleAspectFit 、 scaleAspectFill 、 center 、 top 、 bottom 、
  # left 、 right 、 topLeft 、 topRight 、 bottomLeft 或  bottomRight 。
  #ios_content_mode: center
  #
  # web_image_mode 可以是以下模式其中之一：center 、 contain 、 stretch 和 cover 。
  #web_image_mode: center

  # 要隱藏通知欄，使用 fullscreen 參數(shù) 。在 Web 上不起作為，因?yàn)?Web 沒有通知欄。默認(rèn)是 false 。
  # 注意: 不像 Android 、 iOS 當(dāng)應(yīng)用加載時(shí)不會(huì)自動(dòng)顯示通知欄。
  #       要顯示通知欄，在 Flutter 應(yīng)用中添加以下代碼：
  #       WidgetsFlutterBinding.ensureInitialized();
  #       SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.bottom, SystemUiOverlay.top]);
  #fullscreen: true
  
  # 如果改變了 info.plist 的名字，可以使用 info_plist_files 指定對應(yīng)的文件名。 
  # 只需移除下面三行前面的 # 字符，不要移除任何空格：
  #info_plist_files:
  #  - 'ios/Runner/Info-Debug.plist'
  #  - 'ios/Runner/Info-Release.plist' 

說明一下，上面我的需求就是一張圖片當(dāng)啟動(dòng)圖，所以設(shè)置了一張圖，每個(gè)人根據(jù)自己的需求進(jìn)行不同的設(shè)置即可。

步驟3：
添加文件之后之后，在命令行終端運(yùn)行以下命令：

flutter pub run flutter_native_splash:create 

當(dāng)包完成運(yùn)行后，你的閃屏界面就準(zhǔn)備好了。

要指定 YAML 文件的位置，只需在終端命令后添加 --path：

flutter pub run flutter_native_splash:create --path=path/to/my/file.yaml 

注意上面只是一個(gè)示例，就是需要找到自己flutter_native_splash.yaml文件所在的位置，如果不確定的話，可以按如下操作進(jìn)行獲取文件路徑，然后把上面命令中“path/to/my/file.yaml”替換成自己文件的路徑，獲取路徑的方法如下圖：

如果上面和我這里是一模一樣的操作的話，可以直接復(fù)制下面的命令進(jìn)行操作

flutter pub run flutter_native_splash:create --path=flutter_native_splash.yaml

執(zhí)行效果如下圖：

這里就是像上圖里面所示的文字要特別說明一下，如果flutter_native_splash.yaml里面的內(nèi)容有變動(dòng)更新，建議再次執(zhí)行一遍上面的命令。

步驟4：
在main.dart進(jìn)行啟動(dòng)圖相關(guān)移除和顯示時(shí)間設(shè)置，如下圖：

代碼如下：

//原生的啟動(dòng)屏幕
import 'package:flutter_native_splash/flutter_native_splash.dart';


void main() {

  WidgetsFlutterBinding.ensureInitialized();

  initialization(null);

  runApp(const MyApp());
}

//啟動(dòng)圖延時(shí)移除方法
void initialization(BuildContext? context) async {
  //延遲3秒
  await Future.delayed(const Duration(seconds: 3));
  FlutterNativeSplash.remove();
}

同樣也可以用下面的方法

默認(rèn)，閃屏界面在首次繪制 Flutter 時(shí)會(huì)被移除。如果想要在應(yīng)用初始化時(shí)保持閃屏界面，可以如下使用 removeAfter 方法：

i

mport 'package:flutter_native_splash/flutter_native_splash.dart';

void main() {
  FlutterNativeSplash.removeAfter(initialization);
  // runApp 會(huì)運(yùn)行，但是在初始化完成前不會(huì)顯示：
  runApp(const MyApp());
}

void initialization(BuildContext context) async {
  // 這里可以在閃屏界面顯示時(shí)初始化應(yīng)用所需的資源。
  // 該函數(shù)完成后，閃屏界面會(huì)被移除。
} 

注意: 為了使用此方法， flutter_native_splash 必須在 pubspec.yaml 的 dependencies 部分里，而不是在 dev_dependencies 里。之前的版本是在推后者里。

提一句如果需要移除的可以執(zhí)行下面這個(gè)命令

flutter pub run flutter_native_splash:remove

到此為止在Flutter中集成和使用flutter_native_splash庫的詳細(xì)步驟就已經(jīng)全部完成了。

歡迎大家給我點(diǎn)贊分享評論，也歡迎大家隨時(shí)和我留言或私信交流，更歡迎大家打賞作者支持創(chuàng)作，謝謝大家。

本文由mdnice多平臺(tái)發(fā)布