head image overlayhead image overlay

Giới thiệu

Flutter là một framework mạnh mẽ và linh hoạt cho những ai xây dựng cross-platform. Một trong những điều ít được biết đến hơn nhưng lại vô cùng hữu ích trong các tính năng mà bạn đang xây dựng đó là Overlay Widget và OverlayEntry. Widget cung cấp cho chúng ta cách hiển thị nội chung bên trên một view khác và cho phép tạo một thành view phức tạp và linh động. Trong bài viết này chúng ta sẽ đi đến cách sử dụng Overlay widget và OverlayEntry.

Trước khi đi đến nội dung bài viết chúng ta cùng chạy đoạn code sau nhé: Code Example

Tìm hiểu về Overlay System

Trước khi đào sâu hơn vể Overlay widget và OverlayEntry thì chúng ta đi tìm hiểu về Overlay System.
Trong Flutter một Overlay là một Stack của Widget có thể được vẽ lên trên cùng của Widget Tree chính của ứng dụng. Overlay Stack được sử dụng để hiển thị các View như: Pop-up Dialogs, Tooltips và Custom Overlay.

Overlay System quản lý bởi Navigator và được liên kết đến BuildContext. Nó cho phép bạn thêm hoặc xóa một Widget một cách linh hoạt mà không làm ảnh hưởng đến Main Widget Tree.

Overlay Widget

Overlay Widget là được hiểu đơn giản là quản lý cái Widget bên trong Overlay đó. Nó thường được sử dụng như một hậu duệ của MaterialApp. Bạn có thể truy cập đến Overlay từ bất kì chỗ nào trên ứng dụng của bạn bằng cách sử dụng: Overlay.of(context).

Một đoạn code ví dụ về Overlay Widget:

Overlay(
   initialEntries: [
     OverlayEntry(
       builder: (context) => 
           Positioned(
             top: 100,
             left: 100,
             child: Container(
             width: 200,
             height: 200,
             color: Colors.blue,
           ),
       ),
     ),
   ],
)

Ví dụ trên chúng ta có một Overlay Widget được khởi tạo ban đầu bằng OverlayEntry. OverlayEntry có một hàm builder để return các Widgtet hiển thị trên cùng của Main Widget Tree.

Để hiểu rõ hơn chúng ta có thể xem lại code ví dụ ở đầu bài viết.

OverlayEntry Widget

OverlayEntry là chính là nơi điều kì diệu mà chúng ta cần xảy ra. Nó chính là cách cổng để tiến được vào Overlay System cho phép bạn đưa các Custom widget đến với Overlay Stack.

Dưới đây là cách sử dụng:

1. Tạo một OverlayEntry:

Bạn sẽ cần tạo một instance OverlayEntry với một tham số bắt buộc là builder. Đây là hàm định nghĩa Widget sẽ hiển thị.

OverlayEntry(
 builder: (context) {
 // Your custom widget goes here
 return MyCustomWidget();
 },
)

2. Thêm nó đến Overlay:

Khi bạn có một OverlayEntry bạn có thể thêm nó đến Overlay bằng cách sử dụng phương thức insert của Overlay Context.

Overlay.of(context)?.insert(myOverlayEntry);

2. Cách xóa một Overlay:

Để xóa một OverlayEntry thì chúng ta sử dụng phương thức remove của OverlayEntry. Việc này giúp giải phóng tài nguyên khi chúng ta không muốn sử dụng nó nữa.

myOverlayEntry.remove();

Các trường hợp sử dụng Overlay và OverlayEntry phổ biến hiện nay

1. Pop-up Dialogs

Overlay có thể sử dụng để hiển thị một Pop-up dialogs chẳng hạn như một Cảnh báo, BottomSheet trên: Main Widget Tree.

popup dialog

2. Tooltips

Bạn có thể triển khai custom tooltips xuất hiện khi người dùng tương tác với một widget khác.

tooltips

3. Floating Action Button Menus

Tạo một Floating Action Button mà nó có thể hiển thị expand và collapse

floating button

Kết luận

Mình mong rằng bài viết này hữu ích đến các bạn.
Cảm ơn các bạn đã đọc bài viết của mình ! Nếu có gì sai sót hay có vấn đề gì cần hỏi hoặc thảo luận vui lòng các bạn comment xuống dưới bài viết giúp mình nhé.