【Flutter】iOSの数字テキストのガタつきをなくして等幅にする【Tips】

この記事はジャンルなしオンラインもくもく会 Advent Calendar 2023の16日目の記事になります。

FlutterでiOSアプリを作った際、何やら数字の横幅の表示がガタついているな、と思ったことはありませんか？
気のせいかと思いきや、実はガタついています。以下のように、数字によって横幅が異なっています。

今回はこの現象を修正するtipsです。

Sample Code

説明

TextStyleにFontFeature.tabularFigures()を指定します。これは等幅(monospace)で表示する設定です。これを適用すると、以下の図のようにガタつきがなくなり等幅で表示されます。
また、横幅を変化するためのFontFeature.proportionalFigures()という設定も用意されていますね。

monoさんがpostされていましたが、どうやらAndroidでは発生しないようですね。この記事を作るためにDartPadで確認していたのですが、そちらでも再現しませんでした。iOS側の実装を深掘りすれば詳しく分かるかもしれませんが、今回は割愛します🙏

AppleのSan FranciscoフォントはtabularFigures指定で見た目変わったけど、AndoridのRobotoフォントは変わらず、proportionalFigures(https://t.co/yNvv6dieU0)でプロポーショナル指定にしたら変わったので、Robotoの場合はデフォルトで数字部分は等幅ということだろう(　´･‿･｀)
— mono (@_mono) 2022年10月11日