Chinese text has positive bottom padding and negative top padding, happening on both iOS and Android, thus not possible to vertically center a text

Steps to Reproduce

Just copy and paste this code snippet and run it.

Expected results:

Text should not have such strange padding at bottom.

Actual results:

This is the screenshot when running the app. As we can see, the text has two strange things:

It has non-neglectable bottom paddings.
It has negative top padding.

This is a problem, because with such, we cannot vertically make a text center-aligned. for example, a Center will make the text "box" centered, but due to uneven padding, it will indeed be put higher than expected.

By the way, I have tested it on a iPhone and an android, so it seems not to be a problem of one specific font, but rather something intrinsic.

Code sample

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(),
        body: Center(
          child: Container(
            color: Colors.orange[200],
            child: const Text(
              '探索文本工王田甲乙丙丁一二三四口',
              style: TextStyle(
                fontSize: 24,
                height: 1,
              ),
            ),
          ),
        ),
      ),
    );
  }
}

Logs

n/a

no problem

2.8.1

This is the same issue as #22625 and #19063. According to #35493 The root cause of this is that the ideographic baseline implementation in LibTxt is currently only an approximation (an existing TODO specifies fixing this), and should not be used for sensitive purposes. Check out the links provided above.
Hope this helps.

@ramanjitsingh-hub

@ramanjitsingh-hub Thank you so much!

@ramanjitsingh-hub

@ramanjitsingh-hub Sorry it seems that #19063 is closed (and locked) so I guess it is solved by #35493? However, it still has this bug in 2.8.1 flutter.

@GaryQian

/cc @GaryQian @tamcy

I think the flutter does not have support for an accurate baseline for ideographic property currently it is just an approximation. Until the support is provided try textBaseline : TextBaseline.ideographic

@fzyzcjy

Hi @fzyzcjy, I believe this issue is because TextBaseline.ideographic is buggy, with TextBaseline.ideographic all text (including non-English characters) is supposed to be above the basline, But it is not the case as of today.
This issue is being tracked here #94680, Would you mind taking a look at the linked issue and verify if fixing it would resolve your issue?

@ramanjitsingh-hub

@ramanjitsingh-hub Thanks!

@maheshmnj Thanks! Sounds reasonable, but I am not very sure if fixing it would resolve your issue.

Anyway, I wonder when can it be fixed? Can I help?

I am able to reproduce a similar output on both stable and the master channel, This could potentially be related to #94680.

code sample

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(),
        body: Center(
          child: Container(
            color: Colors.orange[200],
            child: const Text(
              '探索文本工王田甲乙丙丁一二三四口',
              style: TextStyle(
                fontSize: 24,
                height: 1,
                textBaseline: TextBaseline.ideographic,
              ),
            ),
          ),
        ),
      ),
    );
  }
}

flutter doctor -v

[✓] Flutter (Channel stable, 2.8.1, on macOS 12.1 21C52 darwin-arm, locale en-GB)
    • Flutter version 2.8.1 at /Users/mahesh/Documents/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 77d935af4d (3 weeks ago), 2021-12-16 08:37:33 -0800
    • Engine revision 890a5fca2e
    • Dart version 2.15.1

[✓] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
    • Android SDK at /Users/mahesh/Library/Android/sdk
    • Platform android-31, build-tools 31.0.0
    • ANDROID_HOME = /Users/mahesh/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.8+10-b944.6916264)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 13.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • CocoaPods version 1.10.2

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

[✓] Android Studio (version 4.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 11.0.8+10-b944.6916264)

[✓] IntelliJ IDEA Community Edition (version 2021.2.1)
    • IntelliJ at /Applications/IntelliJ IDEA CE.app
    • Flutter plugin version 60.1.4
    • Dart plugin version 212.5080.8

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

[✓] Connected device (4 available)
    • Redmi K20 Pro (mobile) • 192.168.1.3:5555                     • android-arm64  • Android 11 (API 30)
    • iPhone 13 Pro (mobile) • 0FA2FB93-2A89-4FDB-8293-DF66188F1E54 • ios            • com.apple.CoreSimulator.SimRuntime.iOS-15-0
      (simulator)
    • macOS (desktop)        • macos                                • darwin-arm64   • macOS 12.1 21C52 darwin-arm
    • Chrome (web)           • chrome                               • web-javascript • Google Chrome 96.0.4664.110

• No issues found!

[✓] Flutter (Channel master, 2.9.0-1.0.pre.363, on macOS 12.1 21C52 darwin-arm, locale en-GB)
    • Flutter version 2.9.0-1.0.pre.363 at /Users/mahesh/Documents/flutter_master
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 9e9a728667 (7 hours ago), 2022-01-14 09:40:11 +0800
    • Engine revision f121c1fe68
    • Dart version 2.17.0 (build 2.17.0-11.0.dev)
    • DevTools version 2.9.2

[✓] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
    • Android SDK at /Users/mahesh/Library/Android/sdk
    • Platform android-31, build-tools 31.0.0
    • ANDROID_HOME = /Users/mahesh/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.8+10-b944.6916264)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 13.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • CocoaPods version 1.10.2

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

[✓] Android Studio (version 4.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 11.0.8+10-b944.6916264)

[✓] IntelliJ IDEA Community Edition (version 2021.2.1)
    • IntelliJ at /Applications/IntelliJ IDEA CE.app
    • Flutter plugin version 60.1.4
    • Dart plugin version 212.5080.8

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

[✓] Connected device (4 available)
    • Redmi K20 Pro (mobile) • 192.168.1.2:5555                     • android-arm64  • Android 11 (API 30)
    • iPhone 11 (mobile)     • FC644E6C-7F02-40E5-9998-1F0CD162FBD8 • ios            • com.apple.CoreSimulator.SimRuntime.iOS-14-5 (simulator)
    • macOS (desktop)        • macos                                • darwin-arm64   • macOS 12.1 21C52 darwin-arm
    • Chrome (web)           • chrome                               • web-javascript • Google Chrome 97.0.4692.71

[✓] HTTP Host Availability
    • All required HTTP hosts are available

• No issues found!

@fzyzcjy

Anyway, I wonder when can it be fixed? Can I help?

@fzyzcjy, We are always looking for contributors, You are welcome to contribute.

I don't see any problem with the text vertical layout here?

Details

            child: Container(
              color: Colors.yellow,
              child: SizedBox(
                height: 30,
                child: Builder(
                  builder: (context) {
                    return Center(
                      child: Text(
                        '探索文本工王田甲乙丙丁一二三四口',
                        style: DefaultTextStyle.of(context).style.copyWith(
                          fontSize: 20,
                          height: 1,
                          backgroundColor: Colors.red,
                        ),
                        maxLines: 1,
                        textHeightBehavior: TextHeightBehavior(
                          leadingDistribution: TextLeadingDistribution.even
                        ),
                      ),
                    );
                  }
                ),
              ),
            ),

Anyways, the half-leading logic can be found here: https://github.com/google/skia/blob/main/modules/skparagraph/src/Run.cpp#L68-L78

@LongCatIsLooong

@LongCatIsLooong I will recheck it once my local env upgrades to 3.3 to see whether the problem is solved and reply here. Thanks!

flutter 3.3.1 experiment results:

Details

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(),
        // body: Padding(
        //   padding: const EdgeInsets.all(16),
        //   child: Column(
        //     children: [
        //       ..._buildOne(leadingDistribution: null),
        //       ..._buildOne(leadingDistribution: TextLeadingDistribution.even),
        //     ],
        //   ),
        // ),
        body: Container(
          color: Colors.yellow,
          child: SizedBox(
            height: 30,
            child: Builder(builder: (context) {
              return Center(
                child: Text(
                  '探索文本工王田甲乙丙丁一二三四口',
                  style: DefaultTextStyle.of(context).style.copyWith(
                        fontSize: 20,
                        height: 1,
                        backgroundColor: Colors.red,
                      ),
                  maxLines: 1,
                  textHeightBehavior: const TextHeightBehavior(leadingDistribution: TextLeadingDistribution.even),
                ),
              );
            }),
          ),
        ),
      ),
    );
  }

// List<Widget> _buildOne({
//   required TextLeadingDistribution? leadingDistribution,
// }) {
//   return [
//     Text('leadingDistribution=${leadingDistribution?.name}'),
//     const SizedBox(height: 32),
//     for (final text in [
//       '探索文本工王田一二三四口',
//       'ABCijk123',
//       '探索文本工王田一二三四口ABCijk123',
//     ])
//       Container(
//         color: Colors.orange[200],
//         margin: const EdgeInsets.only(bottom: 32),
//         child: Text(
//           text,
//           style: TextStyle(
//             fontSize: 24,
//             height: 1,
//             leadingDistribution: leadingDistribution,
//           ),
//         ),
//       ),
//   ];
// }
}

However, the code above yields the wrong results again:

Details

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(),
        body: Padding(
          padding: const EdgeInsets.all(16),
          child: Column(
            children: [
              ..._buildOne(leadingDistribution: null),
              ..._buildOne(leadingDistribution: TextLeadingDistribution.even),
            ],
          ),
        ),
      ),
    );
  }

  List<Widget> _buildOne({
    required TextLeadingDistribution? leadingDistribution,
  }) {
    return [
      Text('leadingDistribution=${leadingDistribution?.name}'),
      const SizedBox(height: 32),
      for (final text in [
        '探索文本工王田一二三四口',
        'ABCijk123',
        '探索文本工王田一二三四口ABCijk123',
      ])
        Container(
          color: Colors.orange[200],
          margin: const EdgeInsets.only(bottom: 32),
          child: Text(
            text,
            style: TextStyle(
              fontSize: 24,
              height: 1,
              leadingDistribution: leadingDistribution,
            ),
          ),
        ),
    ];
  }
}

Basically speaking, the experiments above still holds. For example, if I swap the two lines, and do a hot restart

              ..._buildOne(leadingDistribution: TextLeadingDistribution.even),
              ..._buildOne(leadingDistribution: null),

now it works.

But that does not look like a very elegant thing...

I will try to set this config in the theme, so every Text uses this config, and report back here whether it works. Thanks anyway!

is there any update

I will try to set this config in the theme, so every Text uses this config, and report back here whether it works. Thanks anyway!

IIRC this seems to work, need more experiments though

mark

As of now, Chinese still cannot be vertically centered on Android. This problem seems to have existed for a long time.

@LongCatIsLooong

@LongCatIsLooong
Can we really not resolve this issue? This is a very basic and important matter — every app displays text. Yet this problem has persisted from version 2.6 all the way to 3.37, even though libtxt has already been deprecated during this period.

I found that there are many similar issue, first in 2019, and now in 2026. I don't understand why such an obvious problem has taken so long. flutter, as a UI framework, even has problems with text display. It's really disappointing that it hasn't been solved for a long time.

Regarding text centering, this is a problem that can be seen by the naked eye, and it will appear everywhere, hoping to be solved.

@flutting

I found that there are many similar issue, first in 2019, and now in 2026. I don't understand why such an obvious problem has taken so long. flutter, as a UI framework, even has problems with text display. It's really disappointing that it hasn't been solved for a long time.

@flutting They put their energy into a series of cool things like AI, but ignore basic text-related issues, whether they are bugs or performance

#180292 (comment)

Navigation Menu

Repository navigation

Chinese text has positive bottom padding and negative top padding, happening on both iOS and Android, thus not possible to vertically center a text #96713

Steps to Reproduce

28 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Chinese text has positive bottom padding and negative top padding, happening on both iOS and Android, thus not possible to vertically center a text #96713

Description

Steps to Reproduce

Activity

ramanjitsingh-hub commented on Jan 16, 2022

fzyzcjy commented on Jan 16, 2022

fzyzcjy commented on Jan 16, 2022

fzyzcjy commented on Jan 16, 2022

ramanjitsingh-hub commented on Jan 17, 2022

maheshj01 commented on Jan 17, 2022

fzyzcjy commented on Jan 17, 2022

maheshj01 commented on Jan 17, 2022

maheshj01 commented on Jan 17, 2022

28 remaining items

LongCatIsLooong commented on Sep 7, 2022

fzyzcjy commented on Sep 7, 2022

fzyzcjy commented on Sep 17, 2022

fzyzcjy commented on Sep 17, 2022

BFELFISH commented on Oct 21, 2022

fzyzcjy commented on Oct 21, 2022

tummyhuang commented on May 27, 2024

Zipper-Code commented on Jul 3, 2024

Liloupar commented on Oct 29, 2025

flutting commented on Feb 24, 2026

flutting commented on Feb 24, 2026

Liloupar commented on Feb 24, 2026

koji-1009 commented on Jun 19, 2026

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions