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.
1 2 3 4 5 6 7 8 9 10 11 | <span class="token key atrule">flutter_native_splash</span><span class="token punctuation">:</span> <span class="token key atrule">color</span><span class="token punctuation">:</span> <span class="token string">"#e1f5fe"</span> <span class="token key atrule">image</span><span class="token punctuation">:</span> assets/logo_lockup_flutter_vertical.png <span class="token key atrule">color_dark</span><span class="token punctuation">:</span> <span class="token string">"#042a49"</span> <span class="token key atrule">image_dark</span><span class="token punctuation">:</span> assets/logo_lockup_flutter_vertical_wht.png <span class="token key atrule">android_12</span><span class="token punctuation">:</span> <span class="token key atrule">image</span><span class="token punctuation">:</span> assets/android12splash.png <span class="token key atrule">color</span><span class="token punctuation">:</span> <span class="token string">"#42a5f5"</span> <span class="token key atrule">icon_background_color</span><span class="token punctuation">:</span> <span class="token string">"#eeeeee"</span> <span class="token key atrule">fullscreen</span><span class="token punctuation">:</span> <span class="token boolean important">true</span> |
3. Run package
- Sau khi thêm cài đặt của bạn, hãy chạy lệnh sau trong termival:
1 2 | $ 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:
1 2 | $ 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.
1 2 3 4 5 6 7 8 9 10 11 | <span class="token keyword">import</span> <span class="token string">'package:flutter_native_splash/flutter_native_splash.dart'</span><span class="token punctuation">;</span> <span class="token keyword">void</span> <span class="token function">main</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token class-name">WidgetsBinding</span> widgetsBinding <span class="token operator">=</span> <span class="token class-name">WidgetsFlutterBinding</span><span class="token punctuation">.</span><span class="token function">ensureInitialized</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token class-name">FlutterNativeSplash</span><span class="token punctuation">.</span><span class="token function">preserve</span><span class="token punctuation">(</span>widgetsBinding<span class="token punctuation">:</span> widgetsBinding<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token function">runApp</span><span class="token punctuation">(</span><span class="token keyword">const</span> <span class="token class-name">MyApp</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token comment">// whenever your initialization is completed, remove the splash screen:</span> <span class="token class-name">FlutterNativeSplash</span><span class="token punctuation">.</span><span class="token function">remove</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
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:
1 2 3 4 | 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ợ):
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 | <span class="token comment"># flutter_native_splash-dev.yaml</span> <span class="token key atrule">flutter_native_splash</span><span class="token punctuation">:</span> <span class="token key atrule">color</span><span class="token punctuation">:</span> <span class="token string">"#ffffff"</span> <span class="token key atrule">image</span><span class="token punctuation">:</span> assets/logo<span class="token punctuation">-</span>development.png <span class="token key atrule">branding</span><span class="token punctuation">:</span> assets/branding<span class="token punctuation">-</span>development.png <span class="token key atrule">color_dark</span><span class="token punctuation">:</span> <span class="token string">"#121212"</span> <span class="token key atrule">image_dark</span><span class="token punctuation">:</span> assets/logo<span class="token punctuation">-</span>development.png <span class="token key atrule">branding_dark</span><span class="token punctuation">:</span> assets/branding<span class="token punctuation">-</span>development.png <span class="token key atrule">android_12</span><span class="token punctuation">:</span> <span class="token key atrule">image</span><span class="token punctuation">:</span> assets/logo<span class="token punctuation">-</span>development.png <span class="token key atrule">icon_background_color</span><span class="token punctuation">:</span> <span class="token string">"#ffffff"</span> <span class="token key atrule">image_dark</span><span class="token punctuation">:</span> assets/logo<span class="token punctuation">-</span>development.png <span class="token key atrule">icon_background_color_dark</span><span class="token punctuation">:</span> <span class="token string">"#121212"</span> <span class="token key atrule">web</span><span class="token punctuation">:</span> <span class="token boolean important">false</span> <span class="token comment"># flutter_native_splash-acc.yaml</span> <span class="token key atrule">flutter_native_splash</span><span class="token punctuation">:</span> <span class="token key atrule">color</span><span class="token punctuation">:</span> <span class="token string">"#ffffff"</span> <span class="token key atrule">image</span><span class="token punctuation">:</span> assets/logo<span class="token punctuation">-</span>acceptance.png <span class="token key atrule">branding</span><span class="token punctuation">:</span> assets/branding<span class="token punctuation">-</span>acceptance.png <span class="token key atrule">color_dark</span><span class="token punctuation">:</span> <span class="token string">"#121212"</span> <span class="token key atrule">image_dark</span><span class="token punctuation">:</span> assets/logo<span class="token punctuation">-</span>acceptance.png <span class="token key atrule">branding_dark</span><span class="token punctuation">:</span> assets/branding<span class="token punctuation">-</span>acceptance.png <span class="token key atrule">android_12</span><span class="token punctuation">:</span> <span class="token key atrule">image</span><span class="token punctuation">:</span> assets/logo<span class="token punctuation">-</span>acceptance.png <span class="token key atrule">icon_background_color</span><span class="token punctuation">:</span> <span class="token string">"#ffffff"</span> <span class="token key atrule">image_dark</span><span class="token punctuation">:</span> assets/logo<span class="token punctuation">-</span>acceptance.png <span class="token key atrule">icon_background_color_dark</span><span class="token punctuation">:</span> <span class="token string">"#121212"</span> <span class="token key atrule">web</span><span class="token punctuation">:</span> <span class="token boolean important">false</span> <span class="token comment"># flutter_native_splash-prod.yaml</span> <span class="token key atrule">flutter_native_splash</span><span class="token punctuation">:</span> <span class="token key atrule">color</span><span class="token punctuation">:</span> <span class="token string">"#ffffff"</span> <span class="token key atrule">image</span><span class="token punctuation">:</span> assets/logo<span class="token punctuation">-</span>production.png <span class="token key atrule">branding</span><span class="token punctuation">:</span> assets/branding<span class="token punctuation">-</span>production.png <span class="token key atrule">color_dark</span><span class="token punctuation">:</span> <span class="token string">"#121212"</span> <span class="token key atrule">image_dark</span><span class="token punctuation">:</span> assets/logo<span class="token punctuation">-</span>production.png <span class="token key atrule">branding_dark</span><span class="token punctuation">:</span> assets/branding<span class="token punctuation">-</span>production.png <span class="token key atrule">android_12</span><span class="token punctuation">:</span> <span class="token key atrule">image</span><span class="token punctuation">:</span> assets/logo<span class="token punctuation">-</span>production.png <span class="token key atrule">icon_background_color</span><span class="token punctuation">:</span> <span class="token string">"#ffffff"</span> <span class="token key atrule">image_dark</span><span class="token punctuation">:</span> assets/logo<span class="token punctuation">-</span>production.png <span class="token key atrule">icon_background_color_dark</span><span class="token punctuation">:</span> <span class="token string">"#121212"</span> <span class="token key atrule">web</span><span class="token punctuation">:</span> <span class="token boolean important">false</span> |
- Tuyệt vời, bây giờ đến phần thú vị khi chạy lệnh mới!
- Lệnh mới là:
1 2 3 4 5 6 7 8 9 | <span class="token comment"># If you have a flavor called production you would do this:</span> flutter pub run flutter_native_splash<span class="token punctuation">:</span>create <span class="token punctuation">-</span><span class="token punctuation">-</span>flavor prod <span class="token comment"># For a flavor with a name staging you would provide it's name like so:</span> flutter pub run flutter_native_splash<span class="token punctuation">:</span>create <span class="token punctuation">-</span><span class="token punctuation">-</span>flavor acc <span class="token comment"># And if you have a local version for development you could do that:</span> flutter pub run flutter_native_splash<span class="token punctuation">:</span>create <span class="token punctuation">-</span><span class="token punctuation">-</span>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