文字の大きさを取得する

Flutter(Dart)で文字の大きさを取得するにはTextPainterを使用する方法がある。

TextPainter class - painting library - Dart API

API docs for the TextPainter class from the painting library, for the Dart programming language.

api.flutter.dev

使い方

まず、TextPainterで文字サイズを取得するにはいくつかの重要なプロパティがある。

• text: TextSpan
• textDirection: TextDirection

TextSpanで必要になるプロパティは

• text: String
• style: TextStyle
  になるそれぞれ使い方を見ていく。

実際のコード

final textPainter = TextPainter(
	text: TextSpan(
		text: 'text',
		style: TextStyle(
			fontSize: 16,
			fontFamily: "Noto Sans JP",
		),
	),
	textDirection: TextDirection.ltr,
)..layout();
 
print("${textPainter.size.width} x ${textPainter.size.height}");

TextPainterのtextプロパティにはTextSpan型が入る。
TextSpan型には、大きさを計測したい文字textと、その文字のフォントやサイズを設定できるstyleを記述する。他にも使用できるプロパティはあるが、文字のサイズをとるだけならこれでも十分。

textDirectionは以下を参照。

TextDirection enum - dart:ui library - Dart API

API docs for the TextDirection enum from the dart:ui library, for the Dart programming language.

api.flutter.dev

引用すると、
rtl → const TextDirection
テキストは右から左へ流れます(例:アラビア語、ヘブライ語)。

ltr → const TextDirection
テキストは左から右へ流れます(例:英語、フランス語)。
こんな感じ

基本的にはltrを書いておくだけでok

そして、最後に記述している..layout()は最終的なテキストのサイズを計測している。

カスケード記法

layoutを実行するまではテキストサイズを取得することはできない。

layout method - TextPainter class - painting library - Dart API

API docs for the layout method from the TextPainter class, for the Dart programming language.

api.flutter.dev

おわり

おわり！！！

ちなみに自分はこういう感じで今使ってたけど、なんかちょっと微妙な実装

import 'package:flutter/widgets.dart';
 
int calculateMaxCharacters({
  required double width,
  required int maxLines,
  required double fontSize,
  required String fontFamily,
  String referenceChar = 'あ',
}) {
  if (width <= 0 || maxLines <= 0 || fontSize <= 0) {
    return 0;
  }
 
  final textPainter = TextPainter(
    text: TextSpan(
      text: referenceChar,
      style: TextStyle(
        fontSize: fontSize,
        fontFamily: fontFamily.isNotEmpty ? fontFamily : null,
      ),
    ),
    textDirection: TextDirection.ltr,
  )..layout();
 
  final charWidth = textPainter.size.width;
  if (charWidth <= 0) return 0;
 
  final charsPerLine =
      (width / charWidth).floor() - 5; //HACK:この5を入れるとすごいちょうどよく文字数が収まる
  return charsPerLine * maxLines;
}