1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Textの描画サイズ

Last updated at Posted at 2024-09-05

Flutter 3.24.1, Dart 3.5.1

String と TextStyle だけでサイズを求める方法しか見つからなかったので、Text 丸ごと渡して求めるバージョンを作ってみました。やってることは同じです。

extension TextExtensions on Text {
  Size drawingSize({double maxWidth = double.infinity}) {
    final painter = TextPainter(
      text: textSpan ?? TextSpan(text: data, style: style),
      textAlign: textAlign ?? TextAlign.start,
      textDirection: textDirection ?? TextDirection.ltr,
      textScaler: textScaler ?? TextScaler.noScaling,
      maxLines: maxLines,
      //ellipsis: ,
      locale: locale,
      strutStyle: strutStyle,
      textWidthBasis: textWidthBasis ?? TextWidthBasis.parent,
      textHeightBehavior: textHeightBehavior,
    )..layout(maxWidth: maxWidth);
    return painter.size;
  }
}

何も考えずに全部渡しています。ellipsis は何を渡していいのか分からなかったのでコメントアウト中。

問題点

赤が実際の Text 描画、青が求めたサイズですが、求めたサイズの方が少し小さくなっています。Android の方はけっこう差がありますね。(フォント依存か?)

Web

textsize_web.png

Android

textsize_android.png

このままじゃ使い物にならないので、原因や解決方法をご存じの方がいらっしゃいましたら教えていただけると助かります。

詳細はこちら Gist
動作サンプルはこちら DartPad

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?