Help us understand the problem. What is going on with this article?

Flutter StrutStyleで日本語と英語のTextの高さを揃える

More than 1 year has passed since last update.

Flutterで、日本語を含むTextと、アルファベットのみのTextで高さが異なることがあります。一つのTextに日本語とアルファベットが混在している場合は問題ないのですが、別のWidgetになっていて、並んでいる場合などは差が目立ってしまい違和感があります。

Row(
  children: <Widget>[
    Container(
      color: Colors.green,
      child: const Text(
        "ABC",
        style: TextStyle(fontSize: 16.0),
      ),
    ),
    Container(
      color: Colors.red,
      child: const Text(
        "あいう",
        style: TextStyle(fontSize: 16.0),
      ),
    ),
  ],
)

上記のコードだと、以下のように "ABC" と "あいう" の高さが違います。

スクリーンショット 2019-03-15 12.04.43.png

※同じ fontSize を指定しているのに……。

StrutStyle

いまのリリースバージョンである Flutter v1.2.1 では StrutStyle というオプションがあり、これで高さをコントロールできます。StrutStyleはTextの行の最低限の高さを設定できるためです。

次のように設定してみました。

Row(
  children: <Widget>[
    Container(
      color: Colors.green,
      child: const Text(
        "ABC",
        style: TextStyle(fontSize: 16.0),
        strutStyle: StrutStyle(
          fontSize: 16.0,
          height: 1.3,
        ),
      ),
    ),
    Container(
      color: Colors.red,
      child: const Text(
        "あいう",
        style: TextStyle(fontSize: 16.0),
        strutStyle: StrutStyle(
          fontSize: 16.0,
          height: 1.3,
        ),
      ),
    ),
  ],
)

スクリーンショット 2019-03-15 12.10.58.png

手元の環境だと、height 1.3 以上にすると、高さが揃いました。つまり、この環境では日本語の文字の高さは、アルファベットの約1.3倍の高さということですね。


StrutStyle は TextStyle とは独立しているので、TextStyleでは小さい文字 fontSize: 12.0 にしつつ、行のレイアウトの計算では大きい文字として扱う(StrutStyleで fontSize: 16.0 にするなど)ということができます。

テキスト関連の調整がやりやすくなりましたね!

najeira
Software developer。Google Cloud(特にApp Engine)とFlutterのGoogle Developers Expert。好きな言語はGo。他Flutter/Dart, Android, iOS, Python。
michael-inc
マイケルはコミュニティサービスをつくる会社、「Community Builder」です。インターネットを通して人生がより豊かになるよう、人がつながる場所をつくりつづけます。
https://michael-inc.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした