# 1 SafeArea (Tiện ích rung trong tuần)

Tram Ho

Thiết kế trên các thiết bị điện thoại (cả Android và Ios) để có những đường viền thừa (phần này có thể được hiểu là thanh status bar) – còn gọi là system intrusions. Lý do chính cho thiết kế này là các nhà sản xuất luôn cố gắng tìm cách tạo ra những thiết kế mới bằng việc thay đổi những phần tử được đặt ở đây. Vì vậy phần này nó chiếm 1 phần diện tích trong ứng dụng của bạn. Mặc định khi bạn dựng giao diện, thì nó sẽ bị chồng chéo lên phần status bar này, Flutter cung cấp 1 widget giúp bạn có thể giải quyết điều này, đó chính là SafeArea Widget.

1. What?

Bạn chỉ cần đơn giản là wrap layout chính của bạn bởi SafeArea widget, thì toàn bộ layout mà bạn viết trong nó sẽ được nằm dưới hay nói cách khác là bắt đầu ngay bên dưới thanh status bar.

Thuộc tínhÝ nghĩa
bottomTránh system intrusions ở bottom của màn hình
leftTránh system intrusions ở left của màn hình
topTránh system intrusions ở top của màn hình (status bar)
rightTránh system intrusions ở right của màn hình
childChứa các widget con, thường là main layout
minimumpadding nhỏ nhất được áp dụng
maintainBottomViewPaddingchỉ định xem SafeArea có nên duy trì viewpadding thay vì padding khi được viewInsets của context MediaQuery sử dụng, giá trị mặc định là false

2. Wondering how it workds?

Dưới đây là 1 ví dụ

Và đây là kết quả

Ví dụ 2:
Trước:

Sau:

3. Explanation

Tóm lại, SafeArea đơn giản cũng chỉ để phục vụ duy nhất mục đích như trên, không còn mục đích nào khác, nó quá đơn giản để hiểu và implement phải không nào

Một số ví dụ thêm: