CupertinoSearchTextField height changes if placeholder contains Chinese Character.

Is there an existing issue for this?

I have searched the existing issues
I have read the guide to filing a bug

Steps to reproduce

If the placeholder contains Chinese, the widget's height will change when user inputs something.

An empty CupertinoSearchTextField with Chinese placeholder is higher than ones with English placeholder.

While a CupertinoSearchTextField with user input Chinese characters is as same as default ones in height.

Code sample

import 'package:flutter/cupertino.dart';

/// Flutter code sample for [CupertinoSearchTextField].

void main() => runApp(const SearchTextFieldApp());

class SearchTextFieldApp extends StatelessWidget {
  const SearchTextFieldApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const CupertinoApp(
      home: SearchTextFieldExample(),
    );
  }
}

class SearchTextFieldExample extends StatefulWidget {
  const SearchTextFieldExample({super.key});

  @override
  State<SearchTextFieldExample> createState() => _SearchTextFieldExampleState();
}

class _SearchTextFieldExampleState extends State<SearchTextFieldExample> {

  @override
  Widget build(BuildContext context) {
    return const CupertinoPageScaffold(
      navigationBar: CupertinoNavigationBar(
        middle: Text('CupertinoSearchTextField Sample'),
      ),
      child: Center(
        child: Padding(
          padding: EdgeInsets.all(16.0),
          child: CupertinoSearchTextField(
            placeholder: '搜索',
          ),
        ),
      ),
    );
  }
}

Screenshots or Video

Screenshots / Video demonstration

Record_2023-08-24-16-12-50.mp4

Logs

[Paste your logs here]

Flutter Doctor output

Doctor output

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.13.0, on Fedora Linux 38 (Workstation Edition)
    6.4.10-200.fc38.x86_64, locale zh_CN.UTF-8)
[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.2)
[✓] Chrome - develop for the web
[✓] Linux toolchain - develop for Linux desktop
[✓] Android Studio (version 2022.3)
[✓] Proxy Configuration
[✓] Connected device (3 available)
[✓] Network resources

• No issues found!

a temporary solution before the official fix:

set a smaller fontSize for placeholderStyle than style.

placeholderStyle: const TextStyle(
  fontSize: 14,
  color: Colors.grey,
),
style: const TextStyle(
  fontSize: 16,
  color: Colors.black,
),

update:

set TextStyle.height.

style: const TextStyle(height: 1),
placeholderStyle: const TextStyle(height: 1),

Thanks for the report. Reproduced this issue on the latest Flutter stable/master channels.

The issue doesn't happen on a native iOS app sample with the same placeholder:

Demo iOS native

Screen.Recording.2023-08-24.at.17.20.44.mov

flutter doctor -v (stable and master)

[✓] Flutter (Channel stable, 3.13.1, on macOS 13.5 22G74 darwin-x64, locale en-VN)
    • Flutter version 3.13.1 on channel stable at /Users/huynq/Documents/GitHub/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision e1e47221e8 (23 hours ago), 2023-08-22 21:43:18 -0700
    • Engine revision b20183e040
    • Dart version 3.1.0
    • DevTools version 2.25.0

[✓] Android toolchain - develop for Android devices (Android SDK version 32.0.0)
    • Android SDK at /Users/huynq/Library/Android/sdk
    • Platform android-34, build-tools 32.0.0
    • ANDROID_HOME = /Users/huynq/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b802.4-9586694)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 14.3)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 14E222b
    • CocoaPods version 1.11.3

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2022.2)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b802.4-9586694)

[✓] VS Code (version 1.81.1)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.70.0

[✓] Connected device (3 available)
    • iPhone (mobile) • d9a94afe2b649fef56ba0bfeb052f0f2a7dae95e • ios            • iOS 15.7.2 19H218
    • macOS (desktop) • macos                                    • darwin-x64     • macOS 13.5 22G74 darwin-x64
    • Chrome (web)    • chrome                                   • web-javascript • Google Chrome 116.0.5845.96

[✓] Network resources
    • All expected network resources are available.

• No issues found!

[!] Flutter (Channel master, 3.14.0-9.0.pre.69, on macOS 13.5 22G74 darwin-x64, locale en-VN)
    • Flutter version 3.14.0-9.0.pre.69 on channel master at /Users/huynq/Documents/GitHub/flutter_master
    ! Warning: `flutter` on your path resolves to /Users/huynq/Documents/GitHub/flutter/bin/flutter, which is not inside your current Flutter SDK checkout at /Users/huynq/Documents/GitHub/flutter_master. Consider adding /Users/huynq/Documents/GitHub/flutter_master/bin to the front of your path.
    ! Warning: `dart` on your path resolves to /Users/huynq/Documents/GitHub/flutter/bin/dart, which is not inside your current Flutter SDK checkout at /Users/huynq/Documents/GitHub/flutter_master. Consider adding /Users/huynq/Documents/GitHub/flutter_master/bin to the front of your path.
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision b32cd68f31 (64 minutes ago), 2023-08-23 22:24:03 -0400
    • Engine revision aa98a9d2e8
    • Dart version 3.2.0 (build 3.2.0-97.0.dev)
    • DevTools version 2.26.2
    • If those were intentional, you can disregard the above warnings; however it is recommended to use "git" directly to perform update checks and upgrades.

[✓] Android toolchain - develop for Android devices (Android SDK version 32.0.0)
    • Android SDK at /Users/huynq/Library/Android/sdk
    • Platform android-34, build-tools 32.0.0
    • ANDROID_HOME = /Users/huynq/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b802.4-9586694)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 14.3)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 14E222b
    • CocoaPods version 1.11.3

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2022.2)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b802.4-9586694)

[✓] VS Code (version 1.81.1)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.70.0

[✓] Connected device (3 available)
    • iPhone (mobile) • d9a94afe2b649fef56ba0bfeb052f0f2a7dae95e • ios            • iOS 15.7.2 19H218
    • macOS (desktop) • macos                                    • darwin-x64     • macOS 13.5 22G74 darwin-x64
    • Chrome (web)    • chrome                                   • web-javascript • Google Chrome 116.0.5845.96

[✓] Network resources
    • All expected network resources are available.

! Doctor found issues in 1 category.

It looks like this happens in CupertinoTextField as well (that's what CupertinoSearchTextField is based on), but it doesn't happen in TextField.

@justinmc

@justinmc I think it is about EdgeInsets (used in line 356 of CupertinoTextField), because the height will not change if CupertinoTextField.padding == EdgeInsets.zero

and it also occurs in the following code sample:

  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      child: Center(
        child: Container(
          width: double.infinity,
          decoration: BoxDecoration(
            border: Border.all(
              color: CupertinoColors.systemGrey,
            )
          ),
          padding: EdgeInsets.all(8),
          child: Text("Search"), // "搜索"
        ),
      ),
    );
  }

Oh, maybe it is not caused by EdgeInsets, but by the height of Text widget. There might be more widgets affected.

Record_2023-08-26-23-19-53.mp4

I guess the reason is that different characters in font files have varying heights. This problem seems to be quite widespread in common fonts. I believe we still need to consider possible fixes, because it's clearly not possible to have font manufacturers to unify character heights.

This also occurs if a text contains mathematical alphanumeric symbols, Yi scripts, Unified Canadian Aboriginal Syllabics and Block Elements.

also occurs in TextSpan:

  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      child: Center(
        child: Container(
          width: double.infinity,
          decoration: BoxDecoration(
              border: Border.all(
                color: CupertinoColors.systemGrey,
              )
          ),
          child: RichText(text: TextSpan(
              style: DefaultTextStyle.of(context).style,
              children: [TextSpan(text: "▇")],
          )), 
        ),
      ),
    );
  }

Is it proper to add height param to default style and placeholderStyle as a fix?

cupertino/text_field.dart 1266~1278:

    final TextStyle? resolvedStyle = widget.style?.copyWith(
      color: CupertinoDynamicColor.maybeResolve(widget.style?.color, context),
      backgroundColor: CupertinoDynamicColor.maybeResolve(widget.style?.backgroundColor, context),
      height: widget.style?.height ?? 1,
    );

    final TextStyle textStyle = themeData.textTheme.textStyle.merge(resolvedStyle);

    final TextStyle? resolvedPlaceholderStyle = widget.placeholderStyle?.copyWith(
      color: CupertinoDynamicColor.maybeResolve(widget.placeholderStyle?.color, context),
      backgroundColor: CupertinoDynamicColor.maybeResolve(widget.placeholderStyle?.backgroundColor, context),
      height: widget.placeholderStyle?.height ?? 1,
    );

    final TextStyle placeholderStyle = textStyle.merge(resolvedPlaceholderStyle);

Is it proper to add height param to default style and placeholderStyle as a fix?

cupertino/text_field.dart 1266~1278:

    final TextStyle? resolvedStyle = widget.style?.copyWith(
      color: CupertinoDynamicColor.maybeResolve(widget.style?.color, context),
      backgroundColor: CupertinoDynamicColor.maybeResolve(widget.style?.backgroundColor, context),
      height: widget.style?.height ?? 1,
    );

    final TextStyle textStyle = themeData.textTheme.textStyle.merge(resolvedStyle);

    final TextStyle? resolvedPlaceholderStyle = widget.placeholderStyle?.copyWith(
      color: CupertinoDynamicColor.maybeResolve(widget.placeholderStyle?.color, context),
      backgroundColor: CupertinoDynamicColor.maybeResolve(widget.placeholderStyle?.backgroundColor, context),
      height: widget.placeholderStyle?.height ?? 1,
    );

    final TextStyle placeholderStyle = textStyle.merge(resolvedPlaceholderStyle);

No, I think. The text in field will be slightly higher with this solution.

Make `CupertinoTextField` at least as tall as its first line of place…

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.

Make `CupertinoTextField` at least as tall as its first line of place…

Navigation Menu

Repository navigation

`CupertinoSearchTextField` height changes if `placeholder` contains Chinese Character. #133241

Is there an existing issue for this?

Steps to reproduce

Code sample

Screenshots or Video

Logs

Flutter Doctor output

1 remaining item

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

CupertinoSearchTextField height changes if placeholder contains Chinese Character. #133241

Description

Is there an existing issue for this?

Steps to reproduce

Code sample

Screenshots or Video

Logs

Flutter Doctor output

Activity

sun-jiao commented on Aug 24, 2023

huycozy commented on Aug 24, 2023

justinmc commented on Aug 24, 2023

1 remaining item

sun-jiao commented on Aug 26, 2023

sun-jiao commented on Aug 26, 2023

sun-jiao commented on Aug 26, 2023

sun-jiao commented on Aug 26, 2023

sun-jiao commented on Aug 27, 2023

sun-jiao commented on Aug 28, 2023

github-actions commented on Sep 25, 2023

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions

`CupertinoSearchTextField` height changes if `placeholder` contains Chinese Character. #133241