Forms & Input

1. TextField cơ bản

TextField(
  onChanged: (value) => print(value),
  decoration: const InputDecoration(
    labelText: 'Email',
    hintText: 'you@example.com',
    prefixIcon: Icon(Icons.email),
    border: OutlineInputBorder(),
  ),
  keyboardType: TextInputType.emailAddress,
  textInputAction: TextInputAction.next,
)

2. TextEditingController

class _LoginState extends State<Login> {
  final _emailCtrl = TextEditingController();
  final _passwordCtrl = TextEditingController();

  @override
  void dispose() {
    _emailCtrl.dispose();
    _passwordCtrl.dispose();
    super.dispose();
  }

  void _submit() {
    print('${_emailCtrl.text} / ${_passwordCtrl.text}');
  }

  @override
  Widget build(BuildContext context) => Column(
    children: [
      TextField(controller: _emailCtrl, decoration: const InputDecoration(labelText: 'Email')),
      TextField(controller: _passwordCtrl, obscureText: true, decoration: const InputDecoration(labelText: 'Password')),
      ElevatedButton(onPressed: _submit, child: const Text('Login')),
    ],
  );
}

3. InputDecoration

InputDecoration(
  labelText: 'Email',                       // label float khi focus
  hintText: 'you@example.com',             // placeholder
  helperText: 'Đăng nhập với email',         // hint dưới input
  errorText: error,                          // dòng đỏ khi có lỗi
  prefixIcon: const Icon(Icons.email),
  suffixIcon: IconButton(icon: const Icon(Icons.clear), onPressed: () => ctrl.clear()),
  border: const OutlineInputBorder(),
  filled: true,
  fillColor: Colors.grey[100],
  contentPadding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
)

4. FocusNode — focus management

class _FormState extends State<MyForm> {
  final _emailFocus = FocusNode();
  final _passwordFocus = FocusNode();

  @override
  void dispose() {
    _emailFocus.dispose();
    _passwordFocus.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) => Column(
    children: [
      TextField(
        focusNode: _emailFocus,
        textInputAction: TextInputAction.next,
        onSubmitted: (_) => _passwordFocus.requestFocus(),
        decoration: const InputDecoration(labelText: 'Email'),
      ),
      TextField(
        focusNode: _passwordFocus,
        textInputAction: TextInputAction.done,
        onSubmitted: (_) {
          _passwordFocus.unfocus();        // ẩn keyboard
          _submit();
        },
        decoration: const InputDecoration(labelText: 'Password'),
      ),
    ],
  );
}

Dismiss keyboard khi tap outside

GestureDetector(
  onTap: () => FocusScope.of(context).unfocus(),
  child: Scaffold(/* form */),
)

5. Keyboard types & actions

TextInputType.emailAddress       // @ và .
TextInputType.phone              // numeric pad
TextInputType.number             // digit only
TextInputType.url                // / và .
TextInputType.multiline          // có Enter key
TextInputType.datetime
TextInputType.numberWithOptions(decimal: true, signed: true)

TextInputAction.next             // → field tiếp
TextInputAction.done             // hide keyboard
TextInputAction.search           // search icon
TextInputAction.send             // send icon

6. Form + GlobalKey<FormState>

class _LoginState extends State<Login> {
  final _formKey = GlobalKey<FormState>();
  String? email, password;

  void _submit() {
    if (_formKey.currentState!.validate()) {
      _formKey.currentState!.save();        // gọi onSaved của mọi field
      print('$email / $password');
    }
  }

  @override
  Widget build(BuildContext context) => Form(
    key: _formKey,
    child: Column(
      children: [
        TextFormField(
          decoration: const InputDecoration(labelText: 'Email'),
          validator: (v) => v == null || v.isEmpty
              ? 'Email bắt buộc'
              : !v.contains('@') ? 'Email không hợp lệ' : null,
          onSaved: (v) => email = v,
        ),
        TextFormField(
          obscureText: true,
          decoration: const InputDecoration(labelText: 'Password'),
          validator: (v) => v == null || v.length < 8 ? 'Tối thiểu 8 ký tự' : null,
          onSaved: (v) => password = v,
        ),
        ElevatedButton(onPressed: _submit, child: const Text('Login')),
      ],
    ),
  );
}

Validator return rule

• Trả null → field hợp lệ.
• Trả String → error message hiển thị dưới field.

FormState methods

• validate() — chạy validator của mọi field, return true nếu pass hết.
• save() — gọi onSaved của mọi field.
• reset() — reset value + validation state về initial.

7. autovalidateMode

TextFormField(
  autovalidateMode: AutovalidateMode.onUserInteraction,
  validator: (v) => v == null || v.isEmpty ? 'Bắt buộc' : null,
)

8. Custom FormField

class DatePickerFormField extends FormField<DateTime> {
  DatePickerFormField({
    super.key,
    super.initialValue,
    super.validator,
    super.onSaved,
    String? labelText,
  }) : super(
    builder: (state) => InputDecorator(
      decoration: InputDecoration(
        labelText: labelText,
        errorText: state.errorText,
        border: const OutlineInputBorder(),
      ),
      child: InkWell(
        onTap: () async {
          final picked = await showDatePicker(
            context: state.context,
            initialDate: state.value ?? DateTime.now(),
            firstDate: DateTime(1900),
            lastDate: DateTime(2100),
          );
          if (picked != null) state.didChange(picked);
        },
        child: Text(state.value?.toIso8601String().split('T').first ?? 'Chọn ngày'),
      ),
    ),
  );
}

9. DropdownButtonFormField

DropdownButtonFormField<String>(
  decoration: const InputDecoration(labelText: 'City'),
  value: null,
  items: ['HN', 'HCM', 'ĐN'].map((c) => DropdownMenuItem(value: c, child: Text(c))).toList(),
  onChanged: (v) => print(v),
  validator: (v) => v == null ? 'Chọn city' : null,
)

10. Checkbox / Switch / Radio / Slider

// Checkbox — multi-select
CheckboxListTile(
  title: const Text('Đồng ý điều khoản'),
  value: agreed,
  onChanged: (v) => setState(() => agreed = v ?? false),
)

// Switch — toggle
SwitchListTile(
  title: const Text('Nhận email marketing'),
  value: marketing,
  onChanged: (v) => setState(() => marketing = v),
)

// Radio — mutually exclusive
enum Plan { free, pro }

RadioListTile<Plan>(
  title: const Text('Free'),
  value: Plan.free,
  groupValue: selectedPlan,
  onChanged: (v) => setState(() => selectedPlan = v),
)
RadioListTile<Plan>(
  title: const Text('Pro'),
  value: Plan.pro,
  groupValue: selectedPlan,
  onChanged: (v) => setState(() => selectedPlan = v),
)

// Slider — continuous range
Slider(
  value: volume,
  min: 0,
  max: 100,
  divisions: 10,
  label: '${volume.round()}',
  onChanged: (v) => setState(() => volume = v),
)

11. Autocomplete<T>

const _cities = ['Hà Nội', 'TP.HCM', 'Đà Nẵng', 'Hải Phòng', 'Cần Thơ'];

Autocomplete<String>(
  optionsBuilder: (TextEditingValue input) {
    if (input.text.isEmpty) return const <String>[];
    return _cities.where((c) => c.toLowerCase().contains(input.text.toLowerCase()));
  },
  onSelected: (selection) => print('Selected: $selection'),
)

12. Image / File / Date picker

image_picker

flutter pub add image_picker

import 'package:image_picker/image_picker.dart';

final picker = ImagePicker();

final image = await picker.pickImage(source: ImageSource.gallery);
if (image != null) {
  print('Path: ${image.path}');
}

// Hoặc từ camera
final photo = await picker.pickImage(source: ImageSource.camera);

iOS cần permission trong ios/Runner/Info.plist:

<key>NSCameraUsageDescription</key>
<string>Cần camera để chụp avatar</string>
<key>NSPhotoLibraryUsageDescription</key>
<string>Cần thư viện ảnh để chọn avatar</string>

file_picker

import 'package:file_picker/file_picker.dart';

final result = await FilePicker.platform.pickFiles(
  type: FileType.custom,
  allowedExtensions: ['pdf', 'doc'],
);
if (result != null) {
  print(result.files.first.path);
}

Date / Time picker built-in

final date = await showDatePicker(
  context: context,
  initialDate: DateTime.now(),
  firstDate: DateTime(1900),
  lastDate: DateTime(2100),
  locale: const Locale('vi'),
);

final time = await showTimePicker(
  context: context,
  initialTime: TimeOfDay.now(),
);

13. Pitfall: TextField rebuild khi parent rebuild

Controller state preserved (vì controller external), text input không reset. Nhưng initialValue của TextFormField chỉ apply lần đầu.

// ❌ Reset value bằng cách rebuild → không work
TextFormField(initialValue: someState.value)
// Khi someState đổi, field KHÔNG update — vì initialValue apply 1 lần.

// ✅ Update qua controller
_ctrl.text = someState.value;

14. Bài tập

TextFormField(
  inputFormatters: [
    FilteringTextInputFormatter.digitsOnly,
    LengthLimitingTextInputFormatter(10),
  ],
  validator: (v) {
    if (v == null || v.length != 10) return 'Phải 10 chữ số';
    if (!v.startsWith('0')) return 'Đầu 0';
    return null;
  },
)

15. Quiz

16. Tổng kết

• ✅ TextField + TextEditingController + FocusNode (nhớ dispose).
• ✅ InputDecoration full — labelText, hintText, errorText, prefix/suffixIcon.
• ✅ Form + GlobalKey<FormState> + TextFormField + validator.
• ✅ AutovalidateMode 4 levels.
• ✅ Custom FormField cho domain-specific input.
• ✅ Dropdown, Checkbox, Switch, Radio, Slider.
• ✅ Autocomplete với optionsBuilder.
• ✅ image_picker + file_picker + showDatePicker.
• ✅ Dismiss keyboard pattern.
• ✅ Pitfall: initialValue chỉ apply 1 lần.

17. Kết nối

• Chương 10 — Network: form submit → HTTP.
• Chương 11 — Storage: form data persistent.
• Chương 14: test form interaction.