Flutter: Tìm hiểu về Stack Widget

Ngăn xếp (Stack) là một widget trong Flutter chứa danh sách các widget và đặt chúng trên đầu các widget khác. Nói cách khác, ngăn xếp cho phép các nhà phát triển chồng nhiều widget vào một màn hình duy nhất và hiển thị chúng từ dưới lên trên. Vì vậy, mục đầu tiên là dưới cùng và cuối cùng là trên cùng.

1. Các đặc điểm Stack Widget

Sau đây là những điểm chính của widget ngăn xếp Flutter :

• Widget trong ngăn xếp có thể được định vị hoặc không được định vị .
• Các mục được định vị được bao bọc trong widget được Định vị và phải có một thuộc tính không rỗng
• Các widget con không định vị được tự căn chỉnh. Nó hiển thị trên màn hình dựa trên sự liên kết của ngăn xếp. Vị trí mặc định của các con là ở góc trên cùng bên trái.
• Chúng ta có thể sử dụng thuộc tính alignment để thay đổi sự liên kết của các widget.
• Stack đặt các widget con theo thứ tự với con đầu tiên ở dưới cùng và con cuối cùng ở trên cùng.Theo mặc định, widget đầu tiên của mỗi ngăn xếp có kích thước tối đa so với các widget khác.

2. Cách sử dụng Stack Widget

Ví dụ dưới đây giúp hiểu nhanh việc sử dụng widget ngăn xếp có chứa ba vùng chứa có kích thước thu nhỏ:

Chúng ta sẽ được giao diện như sau:

Nhìn vào đoạn code và giao diện chúng ta có thể thấy, trong “children” những widget con phía dưới sẽ nằm trên những widget con phía trên (Khối màu hồng ở trên cùng → nằm dưới cùng, khối màu đen ở dưới cùng → nằm trên cùng). Và khối màu hồng – widget đầu tiên có kích thước tối đa so với các widget khác.

3. Cách điều chỉnh vị trí widget trong Stack Widget

• alignment: Nó xác định cách các widget được định vị trong ngăn xếp. Nó có thể là trên cùng, dưới cùng, giữa, giữa bên phải, v.v.

Alignment chỉ kiểm soát được những vị trí cơ bản, để linh hoạt hơn trong việc điều chỉnh vị trí các widget con, chúng ta sử dụng Positioned widget

• Tìm hiểu về Positioned:

Positioned có nhiều loại, chúng ta sẽ tập trung vào loại mặc định

Positioned chấp nhận các giá trị từ cả bốn phía, cho child biết nó phải cách xa cạnh tương ứng đó bao xa. Nếu không có giá trị nào được đưa ra, nó sẽ thu hẹp đến kích thước thấp nhất có thể.

Tại đây, chúng tôi đưa ra một giá trị ở trên cùng và bên phải. Trên thực tế, điều này có nghĩa là con sẽ đi về phía dưới và bên phải 40.0 và không có ràng buộc nào khác ở các phía khác. Do đó, nó cũng được căn chỉnh về phía trên và bên phải theo định nghĩa.

Tương tự chúng ta có thể thêm đủ 4 chiều là top, bottom, right, left để điều chỉnh vị trí một cách chi tiết hơn.

Do đó, Positioned là một widget tốt hơn để sử dụng trong Stack hơn Align+ Padding nhưng không có tác hại thực sự nào cả

Ngoài ra còn có các loại Positioned khác. Một vài trong số đó là:

1. Positioned.fill()

Set top, right, bottom, left  thành 0.0 theo mặc định trừ khi bị ghi đè. Do đó, nó lấp đầy màn hình theo mặc định vì khoảng cách từ cả bốn cạnh là 0.0.

1. Positioned.fromRect()

Tạo một Positioned object từ một Rect đã cho.

Kết luận

Tổng kết lại, Stack và Positioned là hai công cụ quan trọng trong Flutter giúp xây dựng giao diện đa lớp và điều chỉnh vị trí các widget một cách chi tiết. Hi vọng bài viết này đã giúp bạn hiểu rõ hơn về cách sử dụng Stack và Positioned để tạo ra các ứng dụng Flutter đẹp và đa dạng. Hãy tiếp tục khám phá và tận dụng sức mạnh của Flutter để tạo ra những sản phẩm tuyệt vời!