Flutter實現啟動頁、閃屏廣告頁、引導頁Flutter的flutter_native_splash庫

飞雪飘鸿發表於2024-08-08
Flutter
///yaml檔案中的配置資訊，可以參考官方文件
  color: "#42a5f5"
  #圖片格式必須是png
  image: images/avata.png

/// 在main檔案中新增程式碼，主要用來初始化包，並且啟動splash頁面；
  WidgetsBinding widgetsBinding = WidgetsFlutterBinding.ensureInitialized();
  FlutterNativeSplash.preserve(widgetsBinding: widgetsBinding);
  runApp(const MyApp());
///  在MaterialApp的home屬性對應的頁面中移除splash頁面
    void initState() {
    super.initState();

    ///可以在這裡新增一些延時在主程式頁面中移除splash，不然無法顯示頁面
    FlutterNativeSplash.remove();
  }

　　一、新增依賴項

dependencies:
  flutter_native_splash: ^2.3.0

　　

二、在工程資料夾下放置名為 flutter_native_splash.yaml 的新檔案

flutter_native_splash: 

  # 該鋸生成原生程式碼來自定義 Flutter 預設白色原生閃屏介面的背景色和閃屏影像。
  # 自定義下面的引數，然後在命令列終端執行下面的命令：
  # flutter pub run flutter_native_splash:create
  # 要恢復為 Flutter 預設的白色閃屏介面，執行下面的命令：
  # flutter pub run flutter_native_splash:remove

  # 只有 color 或 background_image 是必需的引數。使用 color 將閃屏介面的背景設定為單色。
  # 使用 background_image 可將 png 影像設定為閃屏介面的背景。該影像會被拉伸以適應應用大小。
  # color 和 background_image 不能同時設定，只有一個會被使用。 
  # color: "#42a5f5"
  background_image: "assets/launch_image.png"

  # 以下是可選的引數。去掉註釋前面的 #可使引數起作用。

  # image 引數允許你指定在閃屏介面使用的影像。它必須是 png 檔案，且應該是用於4倍畫素密度的大小。
  #image: assets/splash.png

  # 該屬性允許你指定影像作為商標在閃屏介面顯示。它必須是 png 檔案。現在它只支援 Android 和 iOS 。
  #branding: assets/dart.png

  # 為黑暗模式指定商標影像
  #branding_dark: assets/dart_dark.png

  # 要將商標影像放置在介面底部，可以使用 bottom 、 bottomRight 和 bottomLeft 。如果未指定或者指定了其它值，使用預設值 bottom 。
  # 確保該內容模式值與 android_gravity 值 和 ios_content_mode 值不相似。
  #branding_mode: bottom

  # color_dark 、 background_image_dark 和 image_dark 用於裝置在黑暗模式時設定背景色和影像。
  # 如果沒有指定，應用會使用上面的引數。如果指定了 image_dark ，必須要指定 color_dark 或 background_image_dark 。
  # color_dark 和 background_image_dark 不能同時設定。
  #color_dark: "#042a49"
  #background_image_dark: "assets/dark-background.png"
  #image_dark: assets/splash-invert.png

  # android 、 ios 和 web 引數可用於不為對應的平臺生成閃屏介面。
  #android: false
  #ios: false
  #web: false

  #  可用 android_gravity 、 android_gravity 、 ios_content_mode 和 web_image_mode 來設定閃屏影像的位置。預設是居中。
  #
  # 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 引數 。在 Web 上不起作為，因為 Web 沒有通知欄。預設是 false 。
  # 注意: 不像 Android 、 iOS 當應用載入時不會自動顯示通知欄。
  #       要顯示通知欄，在 Flutter 應用中新增以下程式碼：
  #       WidgetsFlutterBinding.ensureInitialized();
  #       SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.bottom, SystemUiOverlay.top]);
  #fullscreen: true
  
  # 如果改變了 info.plist 的名字，可以使用 info_plist_files 指定對應的檔名。 
  # 只需移除下面三行前面的 # 字元，不要移除任何空格：
  #info_plist_files:
  #  - 'ios/Runner/Info-Debug.plist'
  #  - 'ios/Runner/Info-Release.plist'

　　有的操作是

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

　　

import 'package:flutter_native_splash/flutter_native_splash.dart';
void main() {
runApp(MyApp());
runSplashScreen(SplashScreenState(
body: Center(
child: Text('歡迎使用我的應用程式！'),
),
backgroundColor: Colors.blue,
));
}

　　

相關文章