, December 05, 2021

0 kết quả được tìm thấy

Hướng dẫn làm Splash screen hỗ trợ light/dark mode trong Flutter

  • Đăng bởi  Kieu Hoa
  •  Nov 09, 2021

  •   8 min reads
Hướng dẫn làm Splash screen hỗ trợ light/dark mode trong Flutter

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.

If you have your own color scheme and images you can adapt this tutorial to fit your own needs, otherwise follow the steps exactly as written. This tutorial will add a light and dark splash screen to the default counter app that comes with a new Flutter project.

--> 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ờ.

Chế độ sáng và tối

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

Hình ảnh chế độ sáng
Hình ảnh chế độ tối

Đặ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:

Hiển thị trình điều hướng Dự án trong Xcode

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.

Chế độ sáng splash screen trên iOS

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:

Chế độ tối splash screen trên iOS

Đó 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:

Hình ảnh chế độ sáng

Đặ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:

Chế độ sáng splash screen trên Android

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 đó:

Hình ảnh chế độ tối

Đặ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:

Chế độ tối splash screen trên Android

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.

Bài viết liên quan

Flutter BoxDecoration Cheat Sheet

BoxDecoration class cung cấp nhiều cách khác nhau để vẽ một box....

Flutter BoxDecoration Cheat Sheet
Row & Column Cheat Sheet trong Flutter

Tìm hiểu về Row & Column Cheat Sheet trong Flutter....

Row & Column Cheat Sheet trong Flutter
Navigation 2.0 - Routing On Flutter Web

Trong hướng dẫn này, chúng ta sẽ tìm hiểu cách Navigation 2.0 hoạt động với Web Flutter, cách chúng ta có thể xây dựng các trang web và đồng bộ hóa URL với các dự án Flutter Web của chúng ta....

Navigation 2.0 - Routing On Flutter Web
Tìm hiểu TextAffinity trong Flutter

Từ affinity có nghĩa là thu hút. Điều này đề cập đến phần nào của text mà con trỏ (hoặc dấu mũ đôi khi được gọi) được thu hút đến. Để giải thích điều đó, trước tiên cần nói về vị trí text, được đại diện bởi class TextPosition....

Tìm hiểu TextAffinity trong Flutter
[FREE SOURCE CODE FLUTTER] OUTLOOK REMAKE

Source code Outlook Remake của kênh FlutterWay sẽ phù hợp với các developer vừa mới bắt đầu, muốn trải nghiệm code trên desktop hoặc web. Đây là một món quà nhỏ mà 200Lab dành tặng đến các bạn có hứng thú với Flutter....

[FREE SOURCE CODE FLUTTER] OUTLOOK REMAKE
You've successfully subscribed to 200Lab Blog
Great! Next, complete checkout for full access to 200Lab Blog
Xin chào mừng bạn đã quay trở lại
OK! Tài khoản của bạn đã kích hoạt thành công.
Success! Your billing info is updated.
Billing info update failed.
Your link has expired.