Nhập liệu và xử lý form trong Flutter

Mục tiêu:

  • Hiểu cách tạo ô nhập liệu với TextField
  • Quản lý giá trị nhập bằng TextEditingController
  • Tạo form có kiểm tra hợp lệ với Form, TextFormField, và validator
  • Bắt sự kiện và xử lý submit

1. TextField – tạo ô nhập đơn giản

TextField(
  decoration: InputDecoration(
    labelText: 'Tên người dùng',
    border: OutlineInputBorder(),
  ),
)

TextField cho phép người dùng nhập văn bản. Dùng decoration để thêm nhãn, viền, icon.

2. TextEditingController – lấy giá trị nhập

final controller = TextEditingController();

TextField(
  controller: controller,
)

ElevatedButton(
  onPressed: () {
    print(controller.text);
  },
  child: Text('Gửi'),
)

Dùng controller.text để lấy dữ liệu khi nhấn nút hoặc xử lý logic.

3. Form – gom các input thành nhóm

final _formKey = GlobalKey<FormState>();

Form(
  key: _formKey,
  child: Column(
    children: [
      TextFormField(
        decoration: InputDecoration(labelText: 'Email'),
        validator: (value) {
          if (value == null || value.isEmpty) return 'Không để trống';
          return null;
        },
      ),
      ElevatedButton(
        onPressed: () {
          if (_formKey.currentState!.validate()) {
            // xử lý khi hợp lệ
          }
        },
        child: Text('Đăng ký'),
      )
    ],
  ),
)

TextFormField là phiên bản nâng cấp của TextField – hỗ trợ validator, dễ tích hợp vào Form.

4. Bắt sự kiện người dùng

Các widget như TextField, Checkbox, Switch, DropdownButton đều hỗ trợ sự kiện như onChanged, onSubmitted.

TextField(
  onChanged: (value) => print('Đang nhập: $value'),
)

5. Ví dụ: form đăng ký đơn giản

final nameController = TextEditingController();
final emailController = TextEditingController();
final _formKey = GlobalKey<FormState>();

Form(
  key: _formKey,
  child: Column(
    children: [
      TextFormField(
        controller: nameController,
        decoration: InputDecoration(labelText: 'Họ tên'),
        validator: (value) => value!.isEmpty ? 'Không để trống' : null,
      ),
      TextFormField(
        controller: emailController,
        decoration: InputDecoration(labelText: 'Email'),
        validator: (value) => value!.contains('@') ? null : 'Email không hợp lệ',
      ),
      ElevatedButton(
        onPressed: () {
          if (_formKey.currentState!.validate()) {
            print('Tên: ${nameController.text}, Email: ${emailController.text}');
          }
        },
        child: Text('Gửi'),
      )
    ],
  ),
)

6. Bài tập thực hành

  • Tạo form đăng nhập với 2 ô: email, mật khẩu
  • Có kiểm tra hợp lệ: email chứa @, mật khẩu không rỗng
  • In ra kết quả khi hợp lệ

Nội dung tiếp theo: Xử lý trạng thái (State) trong Flutter – StatefulWidget, setState, quản lý dữ liệu động.