Achieving Perfect Text Vertical Centering in Flutter: A Deep Dive into Font Metrics and Android Layout Principles

This article addresses the common challenge of achieving precise vertical text centering in Flutter applications, which often requires manual padding adjustments due to varying font metrics and screen densities.

The author begins by analyzing key font metrics such as baseline, ascent, descent, yMax, yMin, and Units per Em using the NotoSansCJK-Regular font. By examining Android's system font configuration and utilizing tools like font-line, the article explains how these metrics define the text bounding box and why the default layout causes vertical misalignment.

Two native Android solutions are explored: setting includeFontPadding to false in TextView, and using Paint.getTextBounds() in custom views. Through debugging and source code analysis of Android's BoringLayout and MinikinUtils, the article reveals that getTextBounds() accurately calculates the actual glyph bounds. The core Android implementation relies on the following JNI and Minikin calls:

static void getStringBounds(JNIEnv* env, jobject, jlong paintHandle, jstring text, jint start, jint end, jint bidiFlags, jobject bounds) { ... doTextBounds(env, textArray + start, end - start, bounds, *paint, typeface, bidiFlags); ... }

Translating this approach to Flutter, the author traces the layout pipeline from ParagraphTxt::Layout down to SkFont::getWidthsBounds(). By intercepting the Minikin layout data and addressing precision loss issues in Dart-to-C++ communication, a custom forceVerticalCenter feature is implemented. The relevant Flutter engine call chain is:

ParagraphTxt::Layout() -> Layout::doLayout() -> Layout::doLayoutRunCached() -> Layout::doLayoutWord() -> LayoutCacheKey::doLayout() -> Layout::doLayoutRun() -> MinikinFont::GetBounds() -> FontSkia::GetBounds() -> SkFont::getWidths() -> SkFont::getWidthsBounds()

The solution introduces parameters like drawMinHeight and forceVerticalCenter to enforce accurate vertical alignment without altering existing layout logic. The implementation is validated with visual comparisons across different font sizes, demonstrating consistent centering. The article concludes by highlighting the ongoing efforts of the ByteDance Flutter Infra team to resolve framework-level rendering quirks and improve cross-platform development efficiency.