Discussion on: Star Rating with Flutter Reactive Forms

[Inmer]

Hi Joan, I build a custom reactive field using date_time_picker package, and it works, but now I have marked it as required but the error is not showing up, what I am missing. Thanks in advance.

Here is my implementation:

class ReactiveDateTimePicker extends ReactiveFormField<String> {
final String labelText;
ReactiveDateTimePicker({
Key key,
String this.labelText,
@required String formControlName,
}) : super(
        key: key,
        formControlName: formControlName,
        validationMessages: (control) => {'required': 'this is required'},
        builder: (ReactiveFormFieldState<String> field) {
          return RDateTimePicker(
            onChanged: field.didChange,
            labelText: labelText,
          );
        });

 @override
ReactiveFormFieldState<String> createState() =>
  ReactiveFormFieldState<String>();
}

[Joan Pablo]

Hi Inmer,

Well The thing is that you can see the errors in widgets like ReactiveTextField because they have a predefined place to show the errors. For example ReactiveTextFields uses an InputDecoration and this decoration show errors at the bottom of the widget.

In the case of your control you haven't define a widget for showing errors. For example if you wrap your RDateTimePicker within an InputDecorator and set the error in decoration property, you will show the error.

[Inmer]

Hi Joan, thanks for reply.

I should clarify my question my bad sorry, RDateTimePicker is just a visual customization of date_time_picker from m3uzz.com on pub.dev, here is my implementation:

class RDateTimePicker extends StatelessWidget {
  final TextEditingController controller;
  final String labelText;
  final Function(String) validator;
  final Function(String) onChanged;

  const RDateTimePicker({
    Key key,
    this.controller,
    this.labelText,
    this.validator,
    this.onChanged,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(5),
      child: DateTimePicker(
          onChanged: onChanged,
          controller: controller,
          style:
              TextStyle(color: Colors.black, decoration: TextDecoration.none),
          decoration: InputDecoration(
            labelText: labelText,
            enabledBorder: UnderlineInputBorder(
                borderSide: BorderSide(color: Colors.black)),
            focusedBorder: UnderlineInputBorder(
                borderSide: BorderSide(color: Colors.black)),
            labelStyle: TextStyle(color: Colors.black)
          ),
          validator: validator),
    );
  }
}

And with "normal" form, I am able to show errors using validator property, and a controller. Can't I use its implementation to show the error or anyway I have to create an InputDecorator. By the way I would like an example for those InputDecorator, because I have created a completely custom component in which I would need what you say. And thanks for such a great library.

[Joan Pablo]

There you have an InputDecoration. You should avoid using validator, and instead use the errorText of the decoration. You can search for the implementation of the ReactiveTextField to see how it is using this approach.

builder: (ReactiveFormFieldState field) {
   final state = field as _ReactiveTextFieldState;
   final InputDecoration effectiveDecoration = (decoration ?? const InputDecoration())
   .applyDefaults(Theme.of(state.context).inputDecorationTheme);

   return DateTimePicker(
      decoration: effectiveDecoration.copyWith(errorText: state.errorText),
   );         

In the above code, I'm not using your RDateTimePicker just to simplify things, but it also applies with your wrapper widget.

[Inmer]

Thank you, Joan finally I was able to make it work for both cases, greatly appreciate your help.