Bài 7. Nhập liệu và biểu mẫu (Form)

Khái niệm và lý thuyết

Mỗi ô nhập giữ giá trị trong một TextEditingController. Controller là tài nguyên nên phải tạo trong initState (hoặc khai báo trường) và giải phóng trong dispose.

Form gom nhiều TextFormField; khi gọi formKey.currentState!.validate(), Flutter chạy validator của từng ô và hiện thông báo lỗi ngay dưới ô sai. Kiểm tra phía ứng dụng chỉ để trải nghiệm tốt hơn; máy chủ vẫn phải kiểm tra lại.

Form đăng nhập

class DangNhap extends StatefulWidget {
  const DangNhap({super.key});
  @override
  State<DangNhap> createState() => _DangNhapState();
}
class _DangNhapState extends State<DangNhap> {
  final _formKey = GlobalKey<FormState>();
  final _email = TextEditingController();
  final _matKhau = TextEditingController();
  bool _an = true;

  @override
  void dispose() { _email.dispose(); _matKhau.dispose(); super.dispose(); }

  @override
  Widget build(BuildContext context) => Form(
    key: _formKey,
    child: Column(children: [
      TextFormField(
        controller: _email,
        keyboardType: TextInputType.emailAddress,
        decoration: const InputDecoration(labelText: 'Email', prefixIcon: Icon(Icons.email)),
        validator: (v) => (v == null || !v.contains('@')) ? 'Email không hợp lệ' : null,
      ),
      TextFormField(
        controller: _matKhau,
        obscureText: _an,
        decoration: InputDecoration(labelText: 'Mật khẩu',
          suffixIcon: IconButton(icon: Icon(_an ? Icons.visibility : Icons.visibility_off),
                                 onPressed: () => setState(() => _an = !_an))),
        validator: (v) => (v ?? '').length < 8 ? 'Tối thiểu 8 ký tự' : null,
      ),
      const SizedBox(height: 16),
      FilledButton(
        onPressed: () {
          if (_formKey.currentState!.validate()) {
            ScaffoldMessenger.of(context).showSnackBar(
              SnackBar(content: Text('Xin chào ${_email.text}')));
          }
        },
        child: const Text('Đăng nhập')),
    ]),
  );
}

Các điều khiển chọn

final ngay = await showDatePicker(
  context: context, firstDate: DateTime(1950), lastDate: DateTime.now());