DEV Community: Joan Pablo

Star Rating with Flutter Reactive Forms

Joan Pablo — Tue, 29 Sep 2020 15:57:34 +0000

Reactive Forms is not limited just to common widgets in Forms like text inputs, dropdowns, sliders, and switches; you can easily create custom widgets that two-way binds to FormControls and create your own set of Reactive Widgets.

In this post, we will learn how to implement a Reactive Star Rating widget using Reactive Forms, and thus be able to create rich forms that can also collect information using a star rating bar.

To know more about Reactive Forms you can read my previous post Why use Reactive Forms in Flutter? or visit github and pub repo. You can also read the wiki page Custom Reactive Widgets.

This is what we are going to achieve at the end of this post:

We are not going to create a Star Rating Bar from zero, instead we are going to use an existing widget and convert it into a Reactive Widget.

We will use the excellent plugin flutter_rating_bar and give it the ability to two-way binds with a FormControl.

Less talking and more coding ;)

# import plugin in pubspec.yaml
dependencies:
  flutter_rating_bar: ^3.0.1+1

flutter_rating_bar: ^3.0.1+1 was the last version at the time of the post.

Create our reactive widget, declare ReactiveStarRating and extends from ReactiveFormField:

/// A reactive star rating widget that two-way binds 
/// to a FormControl<double>.
class ReactiveStarRating extends ReactiveFormField<double> {
  //...

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

Then supply to the parent class the formControlName and the builder function:

/// A reactive star rating widget that two-way binds 
/// to a FormControl<double>.
class ReactiveStarRating extends ReactiveFormField<double> {
  /// Constructs an instance of [ReactiveStarRating].
  ///
  /// The argument [formControlName] must not be null.
  ReactiveStarRating({
    @required String formControlName,
  }) : super(
          formControlName: formControlName,
          builder: (ReactiveFormFieldState<double> field) {
            // RatingBar inner widget
            return RatingBar(
              // set UI value when control changes
              initialRating: field.value,
              // set control value when UI changes
              onRatingUpdate: field.didChange,
              itemBuilder: (context, _) => Icon(Icons.star),
            );
          },
        );

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

Done, say hello to our new reactive widget ReactiveStarRating.

Wow but wait a minute, what just happened here, is that all? Yes, we are done with the reactive widget, but before we start using it, let me explain the above code a little bit.

These are the steps:

1- Extend from ReactiveFormField. This is a StatefulWidget that maintains the state and is bound with the FormControl.
2- Provide a builder function in the parent's constructor (super). This function will return your inner widget, in this case, the RatingBar widget. The builder function will be called every time the FormControl changes its value.
3- Update the value of the FormControl with the method didChange method. Every time you want to update the value of the FormControl, call the didChange method of the ReactiveFormField passing the new value.

How use it?

We are almost done, now let's consume our new ReactiveStarRating, we will also add some other reactive widgets that listen for changes in the FormControl just to visualize how they stay in sync with our new ReactiveStarRating:

class StarRatingSample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ReactiveFormBuilder(
        // define a form with a FormControl<double> field.
        form: () => fb.group({'rating': 0.0}),
        builder: (context, form, child) {
          return Center(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisSize: MainAxisSize.min,
              children: [
                // listen for changes in `rating` and show value
                ReactiveValueListenableBuilder<double>(
                  formControlName: 'rating',
                  builder: (context, control, child) {
                    return Text(
                      control.value.toStringAsFixed(1),
                      style: TextStyle(fontSize: 40.0),
                    );
                  },
                ),
                SizedBox(height: 20.0),
                // Bind our custom widget with `rating` control
                // just by provinding the control name.
                ReactiveStarRating(
                  formControlName: 'rating',
                ),
                SizedBox(height: 20.0),
                // Bind also a slider
                ReactiveSlider(
                  formControlName: 'rating',
                  divisions: 5,
                  min: 0,
                  max: 5,
                ),
              ],
            ),
          );
        },
      ),
    );
  }
}

And that's it. This was a very simple example. I urge you to make the widget more configurable so that it allows you to change the background color of the stars and evaluate with a half star.

I hope you have enjoyed the post.

Thanks.

Why use Reactive Forms in Flutter?

Joan Pablo — Mon, 20 Jul 2020 18:14:59 +0000

Haven't you ever felt that getting data from a Form, validating a field, or even disabling the submit button is tedious and full of boilerplate code?

Fortunately, that's why Reactive Forms exists.

1. Ease and clean way of collecting data from your Forms.

No more onSave, onChanges, onEditionCompleted callbacks needed or TextEditionControllers to collect data from inputs

Reactive Forms get a clean separation between views and model and maintains data synchronization in a transparent two-way binding mechanism. Just declare your model and define your widgets. Then lay back and relax, data will flow smoothly.

// 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',
        ),
      ],
    ),
  );
}

2. Transparent Validations of inputs fields.

No more StatefulWidget defining a key for the Form widget, goodbye to Form.of(context) and Goodbye to:

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

Reactive Forms Validations occurs transparently. Just declare your model and define the validators you need. It will also handle validity of the entire Form and will shows error messages when needed. All of that without you needing to write a single line of imperative code.

// 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'
          },
        ),
      ],
    ),
  );
}

3. Enable/Disable buttons depending of Form validity.

Getting this behavior, even in such a great framework as Flutter, can sometimes be hard and full of boilerplate code.

In Reactive Forms is as simple as asking to the Form if it is valid or not:

@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,
    );
  }

4. Perfect integration with Provider plugin and other state management plugins.

The use of a state management library (MVC, MVVM or just BLoc) cleans your code and perfectly separates responsibilities between the UI and business logic.

// 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,
              );
            },
          ),
        ],
      ),
    );
  }
}

5. Focus/Unfocus text fields.

To add or remove focus to a control use FormControl.focus() or FormControl.unfocus(). No more StatefulWidgets and FocusNode declarations:

// 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();

What is Reactive Forms?

Reactive Forms provides a model-driven approach to handling form inputs whose values change over time. It's heavily inspired in Angular Reactive Form.
It lets you focus on business logic and save you time from collect, validate and maintain synchronization data between models and widgets.
Remove boilerplate code and brings you the possibility to write clean code with minimal effort.
Integrates perfectly with common state management libraries like Provider, Bloc, and many others.

What is not Reactive Forms?

Reactive Forms is not a fancy widgets package. It's not a widget's library with new shapes, colors, or animations. It frees you from the responsibility of gathering and validating the data. And keeps the data in sync between your model and your widgets.
Reactive Forms does not replace native widgets that you commonly use in Flutter like TextFormField, DropdownButtonFormField or CheckboxListTile. It brings new two-way binding capabilities and much more features to those same widgets.

Reactive Forms is much more. This POST was just a preview of some basic features. Please visit Github Repo or plugin page in puv.dev for full documentation.