Add CupertinoFormRow #69916

Related: #26745

We would like to provide a more native look for forms in Cupertino.

So far, forms in Material are unlike the traditional look in iOS. As an example, TextFormField in Material displays a red helper text underneath the TextField when an error appears after validation. This experience is very rare in iOS, therefore supporting something like CupertinoTextFormField, where one has a similar validation experience to that of TextFormField but with an iOS theme, is not the best decision going forward.

About CupertinoTextFormField

1. Validation is different in iOS. Oftentimes, an error in a field is reported using an alert view (cupertino dialog) which covers the center of the screen. In standard iOS forms, the dialog simply draws the user's attention to red-outlined inputs that need fixing. This is different to that of material, where submitting an invalid form input results in a helper text appearing beneath the widget, in red.

2. Furthermore, supporting the helper text style for Cupertino widgets (like CupertinoTextField,) isn't as straight-forward as the implementation in the Material counter-parts (like TextFormField.) This is because TextField's decorator type is an InputDecorator, as opposed to CupertinoTextField's decorator type which is a BoxDecorator. This means that in order to support a helper text, we would have to wrap the CupertinoTextField anyway. So we might as well do it the right (iOS) way.

The iOS Way

In iOS, standard forms take the following look:

CupertinoFormRow

If we want to support forms for Cupertino widgets, I believe we should provide the aesthetic that's shown above. This would mean creating a CupertinoFormRow that has a label to its left and a child widget to its right.

Upon submission of the form, there should be the option to display a dialog encompassing all relevant errors. The most common user experience is something to the order of "Please fix the errors indicated in the form" but of course, that message should be determined by the developer. More importantly, the label within the CupertinoFormRow would turn red upon an invalid input submission.

CupertinoFormRow lets developers create their rows with the Cupertino look, while also giving them the freedom over the child widget displayed. This provides an experience consistent with iOS, while also avoiding the need to implement FormField support for each existing Cupertino widget.

Outstanding Tasks

• Create CupertinoFormRow
• • Support left helper text
• • Support right child widget
• • Support validation and red color behavior
• Support onValidate property for Form to have an input validation behavior on submission
• • Provide a default onValidate static function defined within CupertinoFormRow to pass to Form.onValidate
• Create CupertinoFormSection

cc: @xster