Why use Reactive Forms in Flutter?

// group and controls
final form = FormGroup({
  'name': FormControl<String>(value: 'John Doe'),
  'email': FormControl<String>(),
});

// two-way bindings with widgets
@override
Widget build(BuildContext context) {
  return ReactiveForm(
    formGroup: this.form,
    child: Column(
      children: <Widget>[
        ReactiveTextField(
          formControlName: 'name',
        ),
        ReactiveTextField(
          formControlName: 'email',
        ),
      ],
    ),
  );
}

// boilerplate code...
if (form.validate()) {
  form.save();
} else {
  setState(() {
    _autoValidate = true;
  });
}

// controls and validators
final form = FormGroup({
  'email': FormControl<String>(validators: [
    Validators.required,
    Validators.email,
  ]),
});

// customize validation messages
@override
Widget build(BuildContext context) {
  return ReactiveForm(
    formGroup: this.form,
    child: Column(
      children: <Widget>[
        ReactiveTextField(
          formControlName: 'email',
          validationMessages: (control) => {
            ValidationMessage.required: 'The email must not be empty',
            ValidationMessage.email: 'The email value must be a valid email'
          },
        ),
      ],
    ),
  );
}

@override
  Widget build(BuildContext context) {
    final form = ReactiveForm.of(context);
    return RaisedButton(
      child: Text('Submit'),
      // just ask to the form
      onPressed: form.valid ? _onPressed : null,
    );
  }

// your bloc/controller/viewmodel/etc
class SignInViewModel {
  final form = FormGroup({
    'email': FormControl<String>(validators: [Validators.required, Validators.email]),
    'password': FormControl<String>(validators: [Validators.required, Validators.minLength(8)])
  });

  void signIn() {
    final credentials = this.form.value;
    // ... make some business logic
    // ...
  }

}

// simple sign-in view
class SignInScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final viewModel = Provider.of<SignInViewModel>(context, listen: false);
    return ReactiveForm(
      formGroup: viewModel.form,
      child: Column(
        children: <Widget>[
          ReactiveTextField(
            formControlName: 'email',
          ),
          ReactiveTextField(
            formControlName: 'password',
            obscureText: true,
          ),
          ReactiveFormConsumer(
            builder: (context, form, child) {
              return RaisedButton(
                child: Text('Submit'),
                // if form valid, sign-in
                onPressed: form.valid ? viewModel.signIn : null,
              );
            },
          ),
        ],
      ),
    );
  }
}

// declare a form and controls
final form = FormGroup({
  'name': FormControl<String>(value: 'John Doe'),
});

// the name control
final name = form.control('name');

// UI text field get focus and the device keyboard pop up
name.focus();

// UI text field lose focus
name.unfocus();