Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
18
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

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

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 にするなど)ということができます。

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

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
18
Help us understand the problem. What are the problem?