Thêm màn hình Splash vào ứng dụng Flutter của bạn mà không cần thông qua native

Splash screen là gì?

Splash screens (còn được gọi là launch screens) cung cấp trải nghiệm ban đầu đơn giản trong khi mở ứng dụng của bạn. Chúng tạo tiền đề cho ứng dụng của bạn, đồng thời cho phép thời gian để công cụ ứng dụng tải và khởi chạy ứng dụng của bạn. Hướng dẫn này hướng dẫn bạn cách sử dụng splash screens một cách thích hợp trên iOS, Android và Web.

Cách tạo splash screen thông thường

Tại trang chủ của Flutter họ có hướng dẫn chúng ta cách để tạo Splash screen cho từng nền tảng riêng, edit các file trong 2 folder iOS + android để có file LaunchScreen thích hợp
Tham khảo tại: https://docs.flutter.dev/development/ui/advanced/splash-screen
Tuy nhiên cách này khá rườm ra và yêu cầu người dùng phải cần tìm hiểu thêm về native app
Xu hướng hiện nay của Flutter là phát triển cách package phục vụ người dùng generate ra code native, thay vì config nó

Cách tạo splash screen bằng package

Link package: https://pub.dev/packages/flutter_native_splash
Tính tới thời điểm hiện tại package này đã hỗ trợ được trên 3 nền tảng: Android, iOS, Web

1. Thêm package vào yaml

Chạy lệnh thêm package trong cmd để lấy được bản update mới nhất

$ flutter pub add flutter_native_splash

2. Config splash screen

Tùy chỉnh các cài đặt sau và thêm vào tệp pubspec.yaml của dự án của bạn hoặc đặt vào một tệp mới trong thư mục dự án gốc của bạn có tên là flutter_native_splash.yaml.

flutter_native_splash:
  color: "#e1f5fe"
  image: assets/logo_lockup_flutter_vertical.png
  color_dark: "#042a49"
  image_dark: assets/logo_lockup_flutter_vertical_wht.png
  android_12:
    image: assets/android12splash.png
    color: "#42a5f5"
    icon_background_color: "#eeeeee"
  fullscreen: true

3. Run package

Sau khi thêm cài đặt của bạn, hãy chạy lệnh sau trong termival:

$ flutter pub run flutter_native_splash:create

Khi gói chạy xong, màn hình giật gân của bạn đã sẵn sàng. Để chỉ định vị trí tệp YAML, chỉ cần thêm --path bằng lệnh trong terminal:

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

4. Thiết lập khởi tạo ứng dụng

Theo mặc định, splash screen sẽ bị xóa khi Flutter đã vẽ frame đầu tiên. Nếu bạn muốn splash screen vẫn còn trong khi ứng dụng của bạn khởi chạy, bạn có thể sử dụng đồng thời các phương thức preserve() và remove(). phương thức giá trị được trả về từ WidgetsFlutterBinding.ensureInitialized() để giữ phần giới thiệu trên màn hình. Sau đó, khi ứng dụng của bạn đã khởi chạy xong, hãy thực hiện lệnh gọi remove() để xóa phần giới thiệu trên màn hình.

import 'package:flutter_native_splash/flutter_native_splash.dart';

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

// whenever your initialization is completed, remove the splash screen:
    FlutterNativeSplash.remove();

LƯU Ý: Nếu bạn không cần sử dụng các phương thức preserve() và remove(), bạn có thể đặt phần phụ thuộc buzz_native_splash trong phần dev_dependencies của pubspec.yaml.

Flavor Support

Nếu bạn có một thiết lập dự án chứa nhiều flavor hoặc environments và bạn đã tạo nhiều hơn một flavor thì đây sẽ là một tính năng dành cho bạn.
Thay vì duy trì nhiều tệp và sao chép/dán hình ảnh, giờ đây bạn có thể sử dụng công cụ này để tạo các splash screen khác nhau cho các environments khác nhau.
Giả sử phần còn lại của quá trình thiết lập rằng bạn có 3 flavor khác nhau Prod, Dev, Acc.
Trước tiên, điều bạn cần làm là tạo một tệp thiết lập khác cho cả 3 flavor với hậu tố như sau:

flutter_native_splash-prod.yaml
flutter_native_splash-dev.yaml
flutter_native_splash-acc.yaml

Bạn sẽ thiết lập 3 tệp đó giống như cách bạn làm với một tệp, nhưng với các nội dung khác nhau tùy thuộc vào môi trường bạn sẽ tạo. Ví dụ (Lưu ý: đây chỉ là ví dụ, bạn có thể sử dụng bất kỳ thiết lập nào bạn cần cho dự án của mình. đã được gói hỗ trợ):

# flutter_native_splash-dev.yaml
flutter_native_splash:
  color: "#ffffff"
  image: assets/logo-development.png
  branding: assets/branding-development.png
  color_dark: "#121212"
  image_dark: assets/logo-development.png
  branding_dark: assets/branding-development.png

  android_12:
    image: assets/logo-development.png
    icon_background_color: "#ffffff"
    image_dark: assets/logo-development.png
    icon_background_color_dark: "#121212"

  web: false

# flutter_native_splash-acc.yaml
flutter_native_splash:
  color: "#ffffff"
  image: assets/logo-acceptance.png
  branding: assets/branding-acceptance.png
  color_dark: "#121212"
  image_dark: assets/logo-acceptance.png
  branding_dark: assets/branding-acceptance.png

  android_12:
    image: assets/logo-acceptance.png
    icon_background_color: "#ffffff"
    image_dark: assets/logo-acceptance.png
    icon_background_color_dark: "#121212"

  web: false

# flutter_native_splash-prod.yaml
flutter_native_splash:
  color: "#ffffff"
  image: assets/logo-production.png
  branding: assets/branding-production.png
  color_dark: "#121212"
  image_dark: assets/logo-production.png
  branding_dark: assets/branding-production.png

  android_12:
    image: assets/logo-production.png
    icon_background_color: "#ffffff"
    image_dark: assets/logo-production.png
    icon_background_color_dark: "#121212"

  web: false

Tuyệt vời, bây giờ đến phần thú vị khi chạy lệnh mới!
Lệnh mới là:

# If you have a flavor called production you would do this:
flutter pub run flutter_native_splash:create --flavor prod

# For a flavor with a name staging you would provide it's name like so:
flutter pub run flutter_native_splash:create --flavor acc

# And if you have a local version for development you could do that:
flutter pub run flutter_native_splash:create --flavor dev

Như đã thấy ở trên, việc generate sẽ rất nhanh, chúng ta không cần phải tạo splash screen cho từng nền tảng, cũng như từng flavor. Bù lại việc custom nó sẽ bị giới hạn trong mức hỗ trợ của package, thì vì được hỗ trợ toàn diện như native