FlutterのTextウィジェットで意図しない文字切れしてしまう場合の対処方法

プログラミング

ColumnウィジェットやRowウィジェットのchildrenの配列に、長文のTextウィジェットを追加してしまうとWarningが出る時がある。
そういった場合の対処方法を残す。

文字切れしても大丈夫な場合

Textの引数にoverflowを設定する。
設定するのは、TextOverflow.ellipsis , TextOverflow.fade, TextOverflow.clipのいずれか。
ただし、TextOverflow.fade, TextOverflow.clip の場合は、maxLines: 1 , softWrap: false も引数に設定する必要がある。

## ellipsisの場合
Text(
  '長ーーーーーーーーーーーーーーーーーーーーーーーいお付き合い',
  overflow: TextOverflow.ellipsis,
)

## fadeの場合
Text(
  "長ーーーーーーーーーーーーーーーーーーーーーーーいお付き合い",
  overflow: TextOverflow.fade,
  maxLines: 1,
  softWrap: false,
)

## clipの場合
Text(
 "長ーーーーーーーーーーーーーーーーーーーーーーーいお付き合い",
  overflow: TextOverflow.clip,
  maxLines: 1,
  softWrap: false,
),

文字が切れて欲しくない場合

TextウィジェットをExpanded もしくは Flexible で囲むようにする。

## Expandedの場合
Expanded(
  child: Text(
    '長ーーーーーーーーーーーーーーーーーーーーーーーいお付き合い',
  ),
)

## Flexibleの場合
Flexible(
  child: Text(
    '長ーーーーーーーーーーーーーーーーーーーーーーーいお付き合い',
  ),
)