diff --git a/src/assets/images/docs/platform-adaptations/hig-text-field.png b/src/assets/images/docs/platform-adaptations/hig-text-field.png new file mode 100644 index 0000000000..7409e5d20e Binary files /dev/null and b/src/assets/images/docs/platform-adaptations/hig-text-field.png differ diff --git a/src/assets/images/docs/platform-adaptations/m3-text-field.png b/src/assets/images/docs/platform-adaptations/m3-text-field.png new file mode 100644 index 0000000000..1a4400de79 Binary files /dev/null and b/src/assets/images/docs/platform-adaptations/m3-text-field.png differ diff --git a/src/resources/platform-adaptations.md b/src/resources/platform-adaptations.md index 346cf16e3c..cd9434b958 100644 --- a/src/resources/platform-adaptations.md +++ b/src/resources/platform-adaptations.md @@ -739,7 +739,73 @@ Scaffold( .toList(), )); ``` +### Text fields +Since Android 12, the default UI of text fields follows the design +guidelines defined in [Material 3][m3-text-field] (M3). +On iOS, Apple's [Human Interface Guidelines][hig-text-field] (HIG) define +an equivalent component. + +
+
+
+
+ Text Field in Material 3 +
+ Text Field in Material 3 +
+
+
+
+
+ Text Field in Human Interface Guidelines +
+ Text Field in HIG +
+
+
+
+
+ +Since text fields require user input, +their design should follow platform conventions. + +To implement a platform-specific `TextField` +in Flutter, you can adapt the styling of the +Material `TextField`. + +```dart +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(); +} +``` + +To learn more about adapting text fields, check out +[the GitHub discussion on text fields][text-field-post]. +You can leave feedback or ask questions in the discussion. ### Alert dialog @@ -847,3 +913,6 @@ You can leave feedback or ask questions in the discussion. [UI Component section]: {{site.api}}/resources/platform-adaptations/#ui-components [mat-navbar]: https://m3.material.io/components/navigation-bar/overview [hig-tabbar]: https://developer.apple.com/design/human-interface-guidelines/components/navigation-and-search/tab-bars/ +[text-field-post]: {{site.repo.uxr}}/discussions/95 +[m3-text-field]: https://m3.material.io/components/text-fields/overview +[hig-text-field]: https://developer.apple.com/design/human-interface-guidelines/text-fields \ No newline at end of file