[Feedback Requested] Cross-platform Adaptation for Text Field

[InMatrix]

What is a text field?

Text fields, usually rectangular areas, allow users to enter text into a UI. They typically appear in forms and dialogs.

Platform differences

Since Android 12, the default UI of text fields follows the design guidelines defined in Material 3 (M3). On iOS, an equivalent component is defined in Human Interface Guidelines (HIG). There are some notable differences on the design of text fields between the two platforms.

Text fields on Android

On Android, Material Design text fields come in two basic styles: filled and outlined (see the screenshot below). They are more colorful and visually prominent than their iOS counterparts.

Text fields on iOS

On iOS, text fields are unstyled by default, as you can see from the UI for entering recipients in the Messages app.

It’s common to add thin gray borders to text fields in iOS apps. An example is the UI for entering message content in the Messages app. Rounded corners are used in the example, but they’re not inherently required by iOS. The examples in the text field’s HIG article do not have rounded corners.

The search field on iOS is a text field with a particular style. It has a filled background, rounded corners, but no border color. It also includes both leading and trailing icons in the text field.

Text fields in Flutter

The Flutter framework has two different widgets for displaying alert dialogs:

• TextField, which implements the specification defined by Material Design.
• CupertinoTextField, which follows the look & feel of the iOS default alert dialogs.

Adaptation recommendation

Our general recommendation is to follow the platform convention when using text fields in your app, because the default look of Material Design text fields has unusually prominent visual features and colors than most text fields on iOS. Switching to the CupertinoTextField is one way to do that, but you could also customize the TextField widget in the material library to achieve similar results with the benefits of sticking with the same API and having more customization options. Note that Flutter automatically adapts detailed interactions with text such as spell check and text selection to the target platform for the TextField widget.

The code snippets below show you how to do that, and you can see these two examples in action in DartPad.

Example code: basic text fields adaptive to iOS and Android

The code snippet below implements a basic text field showing a platform-specific UI through customizing TextField.

Widget _createAdaptiveTextField() {
  final _border = OutlineInputBorder(
    borderSide: BorderSide(color: CupertinoColors.lightBackgroundGray),
  );

  final iOSDecoration = InputDecoration(
    border: _border,
    enabledBorder: _border,
    focusedBorder: _border,
    filled: true,
    fillColor: CupertinoColors.white,
    hoverColor: CupertinoColors.white,
    contentPadding: EdgeInsets.fromLTRB(10, 0, 0, 0),
  );

  return Platform.isIOS
      ? SizedBox(
          height: 36.0,
          child: TextField(
            decoration: iOSDecoration,
          ),
        )
      : TextField();
}

Example code: search fields adaptive to iOS and Android

The code snippet below implements a search field showing a platform-specific UI through customizing TextField.

Widget _createAdaptiveSearchField() {
  return Platform.isIOS? SizedBox(
    height: 36.0,
    child: TextField(
      autofocus: true,
      cursorColor: CupertinoColors.activeBlue,
      decoration: InputDecoration(
        prefixIcon: Icon(Icons.search),
        border: OutlineInputBorder(
          borderRadius: BorderRadius.circular(12.0),
          borderSide: BorderSide.none,
        ),
        hintText: 'Search',
        filled: true,
        fillColor: CupertinoColors.lightBackgroundGray,
        contentPadding: EdgeInsets.symmetric(vertical: 0.0),
        hintStyle: TextStyle(color: CupertinoColors.secondaryLabel),
        prefixIconColor: CupertinoColors.secondaryLabel,
      ),
    ),
  ): TextField(
    autofocus: true,
    decoration: InputDecoration(
      prefixIcon: Icon(Icons.search),
      border: OutlineInputBorder(),
      hintText: 'Search',
    ),
  );
}

Output on iOS:

Output on Android:

[InMatrix]

When will the Text Field adaptive api be added

@justinmc might be able to speak more to this question.

[justinmc]

There is no immediate timeline for this. Adaptive widgets is a big focus right now, but there is no PR on the way right now for this specifically. But I appreciate you chiming in to express your support and upvoting!