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