Bài viết này sẽ hướng dẫn bạn thiết lập splash screen tùy chỉnh với màu nền và hình ảnh chế độ tối và sáng trên cả iOS và Android. Điều này có thể hơi phức tạp đối với các lập trình viên Flutter, những người không có kinh nghiệm phát triển native với các nền tảng đó, nhưng nếu bạn làm theo các hướng dẫn bên dưới, bạn sẽ có thể thực hiện được.

Nếu bạn có color scheme và hình ảnh riêng cho ứng dụng của mình, bạn có thể điều chỉnh hướng dẫn này phù hợp với nhu cầu của riêng bạn, nếu không hãy làm chính xác theo các bước đã viết. Hướng dẫn này sẽ thêm splash screen sáng và tối vào ứng dụng bộ đếm mặc định đi kèm với một dự án Flutter mới.

1. Bật chế độ Dark Mode trong Flutter

Trong main.dart, thêm dòng sau vào Widget MaterialApp:

darkTheme: ThemeData.dark(),

Thay đổi chế độ sáng / tối trong Settings của thiết bị sẽ thay đổi giao diện của ứng dụng ngay bây giờ.

Trước tiên, chúng ta sẽ bắt đầu với iOS. Download các hình ảnh sau:

Đặt tên cho chúng với bất kỳ tên nào bạn muốn. Trong Xcode, mở thư mục ios trong dự án Flutter của bạn. Chắc chắn rằng bạn đang hiển thị dạng xem trình điều hướng Dự án:

Sau đó, truy cập (1) Assets.xcassets -> (2) LaunchImage. Trong (3) Attributes inspector ở bên phải (biểu tượng giống như cái đục), chọn (4) Appearances và chọn Any, Dark.

(5) Kéo và thả hình ảnh chế độ sáng vào hộp 1x Any Appearance. Tiếp theo, kéo và thả hình ảnh chế độ tối vào hộp 1x Dark Appearance.

Ghi chú:

• Nếu LaunchImage không tồn tại, hãy nhấp chuột phải vào vị trí 2 trong hình trên và chọn New Image Set. Nhấp vào nó một lần nữa để đổi tên thành LaunchImage.
• Bạn nên có 3 tấm hình với kích thước khác nhau cho mỗi image file (trong đó tệp 2x có kích thước gấp đôi 1x và 3x có kích thước gấp ba lần 1x), nhưng tôi chỉ sử dụng một tệp duy nhất cho mỗi vùng sáng và tối trong ví dụ này. Nếu bạn đặt ở vị trí 2x hoặc 3x, nó sẽ trông nhỏ hơn.

Sau đó, truy cập LaunchScreen.storyboard và nhấp vào View. Trong Attributes inspector ở bên phải, chọn System Background Color. Điều này sẽ cho phép màu nền thay đổi theo dark mode settings.

Nếu bạn đặt màu thành màu nền của hệ thống, thì bạn sẽ nhận được màu đen cho chế độ tối và màu trắng cho chế độ sáng. Nếu bạn muốn một số bóng sáng hoặc tối khác thì bạn cần sử dụng một phương pháp khác.

Phương pháp 1 (iOS 11+): Color Set

Chọn Assets.xcassets và nhấp chuột phải vào LaunchImage và chọn New Color Set. Đổi tên nó thành MyBackgroundColor.

Đối với Appearances chọn Any, Dark:

Sau đó, chọn Any hoặc Dark Appearance, Hexadecimal cho Input Method và nhập màu tùy chỉnh của bạn dưới dạng hex.

Phương pháp 2 (hỗ trợ trước iOS 11): Image Set

Một thủ thuật khác bạn có thể thay đổi màu nền là sử dụng image set với hình ảnh đơn màu sáng và hình ảnh đơn màu tối. Tôi sẽ không hiển thị các ảnh chụp màn hình và đây là các bước cơ bản:

• Trong Assets.xcassets, tạo một Image Set và gọi nó là MyBackgroundImage.
  Thay đổi Appearances thành Any, Dark.
  Kéo ảnh sáng và ảnh tối và chọn strech (để kéo dài hình ảnh full screen). Vì vậy ngay cả một hình ảnh một pixel cũng được.
• Trong LaunchScreen.storyboard, hãy thêm một ImageView mới vào base view.
• Trong Attributes Inspector, đặt hình ảnh đó thành MyBackgroundImage. Đặt Content Mode thành Scale to Fill.
• Đặt các ràng buộc của MyBackgroundImage để pin vào các cạnh.

2. Thử nghiệm chạy màn hình splash screen của iOS

Khi bạn chạy ứng dụng (bạn có thể thực hiện trực tiếp trong Xcode bằng cách nhấn triangular play button ở trên cùng bên trái), bạn có thể* thấy hình ảnh splash screen hiển thị khi ứng dụng khởi động lần đầu tiên.

Thay đổi ứng dụng sang chế độ tối (Settings > Developer > Dark Appearance trên máy ảo), khởi động lại ứng dụng và bạn sẽ thấy như sau:

Đó là cho iOS. Giờ mình sẽ thực hiện điều đó trên Android!

3. Thêm splash screen trong Android

Download hình ảnh sau:

Đặt tên cho nó là launch_image.png. Trong dự án Flutter của bạn, hãy lưu hình ảnh trong thư mục drawable của Android. Nó nằm ở đây:

android/app/src/main/res/drawable

Trong cùng thư mục đó, hãy mở launch_background.xml. Thay thế nội dung bằng đoạn code sau:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@android:color/white" />
    <item>
        <bitmap
            android:gravity="center"
            android:src="@drawable/launch_image" />
    </item>
</layer-list>

Dưới đây là một số điều cần lưu ý:

• Bạn có thể chọn một màu khác ngoài màu trắng cho nền nếu bạn thích.
  Mặc dù tệp của bạn có tên là launch_image.png, hãy loại bỏ phần mở rộng .png ở đây.
• Tệp launch_background.xml này được tham chiếu trong tệp AndroidManifest.xml.
• Nếu bạn muốn có các hình ảnh có độ phân giải khác nhau cho các thiết bị khác nhau, thì bạn sẽ đặt các hình ảnh đó vào các thư mục mipmap. Tuy nhiên, điều đó nằm ngoài phạm vi của bài viết này.

Chạy ứng dụng, bạn sẽ thấy điều này khi khởi động:

Dark mode:

Tạo một thư mục có tên là drawable-night trong thư mục res. Sau đó, đặt hình ảnh sau vào thư mục đó:

Đặt tên cho nó là launch_image.png. Cũng trong thư mục drawable-night, tạo một tệp khác có tên là launch_background.xml và dán đoạn code sau:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@android:color/black" />
    <item>
        <bitmap
            android:gravity="center"
            android:src="@drawable/launch_image" />
    </item>
</layer-list>

Sự khác biệt là màu nền bây giờ là màu đen. Nếu bạn muốn sử dụng giá trị màu hex của riêng mình, thì bạn có thể tạo tệp colors.xml trong thư mục values để xác định màu của bạn. Xem liên kết này để được trợ giúp. Cấu trúc tệp của bạn bây giờ sẽ trông như thế này:

res/
  /drawable
    launch_background.xml
    launch_image.png
  /drawable-night
    launch_background.xml
    launch_image.png

Android sử dụng tên thư mục để chọn resources sẽ hiển thị dựa trên cài đặt chế độ tối của người dùng. Chuyển thiết bị hoặc trình mô phỏng của bạn sang chế độ tối (Settings > Display > Dark theme) và chạy lại ứng dụng. Bạn sẽ thấy các resource tối hiển thị trên splash screen:

Xin chúc mừng! Bạn hiện có splash screen sáng và tối hoạt động trên Android và iOS.

Bài viết này được dịch từ đây.