Flutter Text

本ドキュメントでは、FlutterのTextについて記述する。
Textは以下2種類
・文字列をそのまま表示する「Text」
・文字列を区切って表示する「RichText」

以降の内容は、上記Text一覧図の各Text取得関数についてまとめる。

Text

Widget getText() {
  return Text('Text');
}

RichText

Widget getRichText() {
  return RichText(
    text: TextSpan(
      style: TextStyle(color: Colors.black),
      children: [
        TextSpan(text: 'Ri'),
        TextSpan(
            text: 'chTe',
            style: TextStyle(color: Colors.blue),
            recognizer: TapGestureRecognizer()
              ..onTap = () {
                // chTeをタップしたときの動作実装
              }),
        TextSpan(text: 'xt'),
      ],
    ),
  );
}

Text Style FontSize

Widget getTextStyleFontSize() {
  return Text(
    'Text Style FontSize',
    style: TextStyle(fontSize: 20),
  );
}

Text Style Color

Widget getTextStyleColor() {
  return Text(
    'Text Style Color',
    style: TextStyle(color: Colors.blue),
  );
}

Text Style Bold

Widget getTextStyleBold() {
  return Text(
    'Text Style Bold',
    style: TextStyle(fontWeight: FontWeight.bold),
  );
}

Text Style Align

Widget getTextAlign() {
  return Container(
    constraints: BoxConstraints(
      minWidth: double.infinity,
    ),
    child: Text(
      'Text Align',
      textAlign: TextAlign.right,
    ),
  );
}

通常Textは文字サイズ分しか幅を確保しないが、以下のように文字サイズ分以上の幅を指定した場合、その幅の中でどの位置に文字を表示するかをAlineにてできる。

Text Style Overflow Default

Widget getTextStyleOverflowDefault() {
  return Container(
    constraints: BoxConstraints(
      maxWidth: 200,
    ),
    child: Text(
      'Text Overflow Default 1 2 3 4 5 6 7 8 9 0',
      // overflow: TextOverflow.clip, // デフォルト
    ),
  );
}

Text Style Overflow Ellipsis

Widget getTextStyleOverflowEllipsis() {
  return Container(
    constraints: BoxConstraints(
      maxWidth: 200,
    ),
    child: Text(
      'Text Overflow Ellipsis 1 2 3 4 5 6 7 8 9 0',
      overflow: TextOverflow.ellipsis,
    ),
  );
}

Text Style MaxLine

Widget getTextMaxLine() {
  return Text(
    'Text MaxLine 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0',
    maxLines: 2,
  );
}