【Flutter】auto_size_textでテキストを自動調整

auto_size_textとは
使い方

auto_size_textとは

auto_size_textは、テキストを自動的にその枠内に収まるようにサイズ調整するFlutterウィジェットです。

auto_size_text | Flutter package

Flutter widget that automatically resizes text to fit perfectly within its bounds.

使い方

インストール方法

pubspec.yamlファイルに依存関係を追加します。

dependencies:
  auto_size_text: ^3.0.0

基本的な使用方法

シンプルな使用例

AutoSizeTextは、通常のTextウィジェットのように使用できます。以下の例では、テキストが2行以内に収まるようにサイズ調整されます。

AutoSizeText(
  '表示するテキスト',
  style: TextStyle(fontSize: 20),
  maxLines: 2,
)

パラメータ詳細

maxLines

maxLinesパラメータは、テキストが収まる最大行数を指定します。指定がない場合、利用可能な幅と高さに応じてテキストがフィットします。

AutoSizeText(
  'とても長い文字列',
  style: TextStyle(fontSize: 30),
  maxLines: 2,
)

minFontSize & maxFontSize

minFontSizeはテキストの最小フォントサイズを指定します。maxFontSizeは最大フォントサイズを指定します。デフォルトのminFontSizeは12です。

AutoSizeText(
  'とても長い文字列',
  style: TextStyle(fontSize: 30),
  minFontSize: 18,
  maxFontSize: 40,
  maxLines: 4,
  overflow: TextOverflow.ellipsis,
)

group

複数のAutoSizeTextウィジェットのフォントサイズを同期させることができます。同じグループ内のAutoSizeTextは、最も小さな有効フォントサイズに調整されます。

var myGroup = AutoSizeGroup();

AutoSizeText(
  'テキスト1',
  group: myGroup,
);

AutoSizeText(
  'テキスト2',
  group: myGroup,
);

stepGranularity

フォントサイズを減少させるステップサイズを指定します。通常、この値は1未満にしない方がパフォーマンスに優れます。

AutoSizeText(
  'とても長い文字列',
  style: TextStyle(fontSize: 40),
  minFontSize: 10,
  stepGranularity: 10,
  maxLines: 4,
  overflow: TextOverflow.ellipsis,
)

presetFontSizes

特定のフォントサイズのみを許可したい場合、presetFontSizesを使用します。これが設定されている場合、minFontSize、maxFontSize、stepGranularityは無視されます。

AutoSizeText(
  'とても長い文字列',
  presetFontSizes: [40, 20, 14],
  maxLines: 4,
)

overflowReplacement

テキストが枠に収まらない場合に表示するウィジェットを指定します。これにより、テキストが小さすぎて読めなくなるのを防げます。

AutoSizeText(
  'スケーリングやオーバーフローなしでは表示できない非常に長い文字列。',
  maxLines: 1,
  overflowReplacement: Text('すみません、文字列が長すぎます'),
)

Rich Text

AutoSizeText.richコンストラクタを使用して、リッチテキスト（異なるテキストスタイルやリンクなど）を利用できます。フォントサイズ計算は、AutoSizeTextのスタイルパラメータのフォントサイズ（または設定されていない場合は継承されたフォントサイズ）を基準に行われます。

AutoSizeText.rich(
  TextSpan(text: 'とても長い文字列'),
  style: TextStyle(fontSize: 20),
  minFontSize: 5,
)

トラブルシューティング

枠の欠如

AutoSizeTextがオーバーフローしたり、テキストサイズが調整されない場合、幅と高さが制約されているか確認してください。

// 正しいコード
Row(
  children: <Widget>[
    Expanded( // Rowの幅に制約を与える
      child: AutoSizeText(
        'ここに収まるべき非常に長いテキスト',
        maxLines: 1,
      )
    ),
  ],
)

minFontSizeが大きすぎる

AutoSizeTextはminFontSize（デフォルトは12）以下にテキストサイズを調整しません。これが原因でテキストが正しくリサイズされない場合があります。

// 正しいコード
AutoSizeText.rich(
  TextSpan(
    text: '正しくリサイズされるテキスト',
    style: TextStyle(fontSize: 200),
  ),
  minFontSize: 0,
  stepGranularity: 0.1,
)