Zenn
💭

【Flutter Widget基礎】Text

2024/08/14に公開
Flutter
widget
text
tech

基本的な利用方法

var sampleText = "this is a text sample";
Text(sampleText);

Textのstyle属性

Textのstyleを定義するときにはTextStyleを利用する

よく利用する属性

開発上でよく利用される属性の使い方は下記になります。

var sampleText  = "this is a text sample";
var style = const TextStyle(
   color: Colors.blue, //色
   backgroundColor: Colors.yellow, //背景色
   fontSize: 20,//フォントサイズ
   fontWeight: FontWeight.bold,//フォントの太さ
   fontStyle: FontStyle.italic,//フォントのスタイル
   letterSpacing: 10,//水平方向の字間のスペース
   maxLines: 3 //最大行数
);
Text(sampleText,style: style)

上記設定での画面表示はこうなります。

文字の装飾（decoration属性)

Textを装飾するときにはTextStyleにあるdecoration属性を利用する

decoration属性は4つの値があります。それぞれ適用された効果は下記になります。

none lineThrough Head underline

装飾線の色及びスタイルの変更も可能になります。

    var sampleText  = "this is a text sample";
    var style = const TextStyle(
      color: Colors.blue, //色
      backgroundColor: Colors.yellow, //背景色
      fontSize: 20,//フォントサイズ
      fontWeight: FontWeight.bold,//フォントの太さ
      fontStyle: FontStyle.italic,//フォントのスタイル
      letterSpacing: 10,//水平方向の字間のスペース
      decoration: TextDecoration.lineThrough,//装飾
      decorationColor: Colors.deepOrange,//装飾線の色
      decorationStyle: TextDecorationStyle.wavy, //装飾線のスタイル
      decorationThickness: 3.0,//
    );
Text(sampleText,style: style)

上記設定での画面表示はこうなります。

textAlignとtextDirection属性

textDirectionは二つのTextDirection列挙型（ltr：左から右、rtl：右から左）を持っています。
textAlignはtextDirectionによって異なる表示をになります。

基本的な使い方：

    var sampleText  = "this is a text sample";
    var style = const TextStyle(
      color: Colors.blue, //色
      backgroundColor: Colors.yellow, //背景色
      fontSize: 20,//フォントサイズ
      fontWeight: FontWeight.bold,//フォントの太さ
      fontStyle: FontStyle.italic,//フォントのスタイル
      letterSpacing: 10,//水平方向の字間のスペース
    );
    Text(sampleText,
        style: style,
        textAlign: TextAlign.start,
        textDirection: TextDirection.ltr)

textDirectionとtextAlignの設定により画面表示が異なるので、詳しく見ていきましょう。

textDirectionはTextDirection.ltrの場合：

start center end justify left right

textDirectionはTextDirection.rtlの場合：

start center end justify left right

softWrapとoverflow属性

TextOverflow列挙型は四つの設定（clip、fade、ellipsis、visible）がありまして、softWrapはテキストが自動的に改行されるかどうかを決めます。

基本的な使い方：

    var sampleText  = "this is a text sample";
    var style = const TextStyle(
      color: Colors.blue, //色
      backgroundColor: Colors.yellow, //背景色
      fontSize: 20,//フォントサイズ
      fontWeight: FontWeight.bold,//フォントの太さ
      fontStyle: FontStyle.italic,//フォントのスタイル
      letterSpacing: 10,//水平方向の字間のスペース
    );
    Text(sampleText,
        style: style,
        overflow: TextOverflow.clip,
        softWrap: false)

softWrapとoverflowの設定により文字列の画面表示が異なるので、詳しく見ていきましょう。

softWrapはtrue（デフォルト)の場合：

clip fade ellipsis visible

softWrapはfalseの場合：

clip fade ellipsis visible

TextSpan

TextSpanはテキストを複数の部分に分けて、それぞれに異なるスタイルを適用できるようになります。

TextSpanを利用するには2通りの方法があります。

Text.rich経由で利用する場合：

Text.rich(
            TextSpan(
              text: 'Hello ',
              style: TextStyle(fontSize:30, color: Colors.black),
              children: <TextSpan>[
                TextSpan(text: 'bold', style: TextStyle(fontSize: 30, fontWeight: FontWeight.bold)), 
                TextSpan(text: ' world!', style: TextStyle(fontSize: 30, fontStyle: FontStyle.italic)),
              ],
            )
        )

RichTextウィジェット経由で利用する場合：

RichText(
          text: const TextSpan(
            text: 'Hello ',
            style: TextStyle(fontSize:30, color: Colors.black),
            children: <TextSpan>[
              TextSpan(text: 'bold', style: TextStyle(fontSize: 30, fontWeight: FontWeight.bold)),
              TextSpan(text: ' world!', style: TextStyle(fontSize: 30, fontStyle: FontStyle.italic)),
            ],
          ),
        )

上記コードは利用する方法が異なるが、画面表示は下記のように同様になります。

Discussion