TextField là một Widget nhập văn bản cho phép người dùng thu thập dữ liệu vào từ bàn phím mobile vào ứng dụng. Chúng ta có thể sử dụng Widget TextField trong việc xây dựng biểu mẫu, gửi tin nhắn, tạo trải nghiệm tìm kiếm và nhiều hơn nữa. Theo mặc định của Flutter, TextField được trang trí bằng một gạch dưới.

Dưới đây là một số cách để trang trí cho TextField.

None

Icon

Một icon để hiện thị phía trước trường nhập và bên ngoài vùng chứa của trang trí.

Kích thước và màu sắc của icon được định cấu hình tự động bằng cách sử dụng IconTheme.

Prefix icon

Một biểu tượng xuất hiện ở trước phần có thể chỉnh sửa của trường nhập văn bản, bên trong decoration’s container. PrefixIcon bị hạn chế với kích thước tối thiểu là 48px x 48px, nhưng có thể được mở rộng hơn thế.

Suffix icon

Một biểu tượng xuất hiện ở sau phần có thể chỉnh sửa của trường nhập văn bản, bên trong decoration’s container. SuffixIcon bị hạn chế với kích thước tối thiểu là 48px x 48px, nhưng có thể được mở rộng hơn thế.

Prefix text

Là tiền tố văn bản được chọn để đặt trên dòng trước đầu vào.

Hint text

Là văn bản dùng để gợi ý loại đầu vào nào mà trường nhập chấp nhận.

Suffix text

Là hậu tố văn bản được tùy chọn để đặt trên dòng sau phần nhập.

Label text

Văn bản mô tả trường nhập cho người dùng biết.

Khi trường nhập trống hoặc không được nhấn vào, nhãn sẽ hiển thị bên trên đầu trường nhập. Khi trường nhập được nhấn vào hoặc nhận bất cứ giá trị nào thì nhãn sẽ di chuyển lên trên theo chiều dọc liền kề trường nhập.

Khi người dùng chưa tương tác với TextField.

Khi người dùng tương tác với TextField.

Error text

Văn bản xuất hiện bên dưới InputDecorator.child và đường viền, văn bản thể hiện lỗi khi nhập liệu của người dùng.

Helper text

Văn bản cung cấp ngữ cảnh về giá trị của InputDecorator.child, chẳng hạn như cách giá trị sẽ được sử dụng như thế nào. Văn bản ở cùng vị trí với errorText.

Nếu một giá trị errorText không phải null thì helperText sẽ không được hiển thị.

Counter text

Văn bản được đặt bên phải phía bên dưới trường nhập dưới dạng số ký tự.

Leave a Comment

* By using this form you agree with the storage and handling of your data by this website.