【Flutter】Text|テキスト表示・TextStyleで文字装飾

Flutterでテキストを表示する方法を紹介します。

今回はTextの基本的な使い方を解説していきます。

\ 世界最大級のオンライン学習サービス /

目次

Textの使い方

Text('Hello World'),

Text のコンストラクタに文字列を渡すことでテキストを表示できます。

テキストの改行

Text(
  'Hello World\nfrom Flutter',
),

テキストを改行するには\n を使用します。

トリプルシングルクォーテーション''' または トリプルダブルクォーテーション""" を使用した改行方法もあります。

テキストを左寄せ・中央寄せ・右寄せ

Text(
  'Hello World',
  textAlign: TextAlign.right,
),

textAlign でテキストを左寄せ・中央寄せ・右寄せに指定できます。

今回は TextAlign.right を引数に渡して右寄せにしています。

最大行数の指定・3点リーダーで省略

Container(
  width: 200,
  child: Text(
    'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Risus pretium quam vulputate dignissim suspendisse in est ante.',
    maxLines: 3,
    overflow: TextOverflow.ellipsis,
  ),
),

maxLines で最大行数を指定、overflowTextOverflow.ellipsis を渡して文字列がはみ出たら3点リーダー「...」で省略するようにできます。

TextStyleで文字装飾

文字の大きさを指定

Text(
  'Hello World',
  style: TextStyle(
    fontSize: 30,
  ),
),

fontSizeの引数にピクセル値を渡して文字の大きさを指定します。

文字の太さを指定

Text(
  'Hello World',
  style: TextStyle(
    fontSize: 30,
    fontWeight: FontWeight.bold,
  ),
),

fontWeightの引数にFontWeightを渡して文字の太さを指定します。

イタリック体(斜体)に変更

Text(
  'Hello World',
  style: TextStyle(
    fontSize: 30,
    fontStyle: FontStyle.italic,
  ),
),

fontStyleの引数にFontStyle.italicを渡して斜体に変更します。

文字色の変更

Text(
  'Hello World',
  style: TextStyle(
    fontSize: 30,
    color: Colors.blue,
  ),
),

colorで文字色を指定します。

背景色を変更

Text(
  'Hello World',
  style: TextStyle(
    fontSize: 30,
    color: Colors.white,
    backgroundColor: Colors.blue,
  ),
),

Textの余白を調整しない場合はbackgroundColorで背景色を指定します。

影・影色の指定

Text(
  'Hello World',
  style: TextStyle(
    fontSize: 30,
    shadows: [
      Shadow(
        color: Colors.black,
        blurRadius: 50,
      ),
    ],
  ),
),

shadows の引数に<Shadow>[] を渡し、Shadowでテキストの影を指定します。

color で影色、blurRadius でぼかしの広がりを指定します。下画像の3つのTextblurRadiusのピクセル値は上から順に「0」、「10」、「50」です。

文字と文字の間隔を調整

Text(
  'We are the world',
  style: TextStyle(
    fontSize: 30,
    letterSpacing: 20,
  ),
),

letterSpacingの引数にピクセル値を渡して、文字と文字の間隔を調整します。

単語と単語の間隔を調整

Text(
  'We are the world',
  style: TextStyle(
    fontSize: 30,
    wordSpacing: 30,
  ),
),

wordSpacingの引数にピクセル値を渡して、単語と単語の間隔を調整します。

下線(デフォルト)

Text(
  'Hello World',
  style: TextStyle(
    fontSize: 35,
    decoration: TextDecoration.underline,
  ),
),

下線をつけるにはdecoration の引数にTextDecoration.underline を渡します。

打ち消し線

Text(
  'Hello World',
  style: TextStyle(
    fontSize: 35,
    decoration: TextDecoration.lineThrough,
  ),
),

打ち消し線にするにはdecoration の引数にTextDecoration.lineThrough を渡します。

上線

Text(
  'Hello World',
  style: TextStyle(
    fontSize: 35,
    decoration: TextDecoration.overline,
  ),
),

上線をつけるにはdecoration の引数にTextDecoration.overline を渡します。

下線の色を変更

Text(
  'Hello World',
  style: TextStyle(
    fontSize: 35,
    decoration: TextDecoration.underline,
    decorationColor: Colors.blue,
  ),
),

decorationColor で下線の色を指定できます。

下線の太さを変更

Text(
  'Hello World',
  style: TextStyle(
    fontSize: 35,
    decoration: TextDecoration.underline,
    decorationThickness: 5,
  ),
),

decorationThickness で下線の太さを指定できます。

ダッシュ線

Text(
  'Hello World',
  style: TextStyle(
    fontSize: 35,
    decoration: TextDecoration.underline,
    decorationStyle: TextDecorationStyle.dashed
  ),
),

ダッシュ線にするにはdecorationStyle の引数にTextDecorationStyle.dashed を渡します。

ドット線

Text(
  'Hello World',
  style: TextStyle(
    fontSize: 35,
    decoration: TextDecoration.underline,
    decorationStyle: TextDecorationStyle.dotted,
  ),
),

ドット線にするにはdecorationStyle の引数にTextDecorationStyle.dotted を渡します。

二重線

Text(
  'Hello World',
  style: TextStyle(
    fontSize: 35,
    decoration: TextDecoration.underline,
    decorationStyle: TextDecorationStyle.double,
  ),
),

二重線にするにはdecorationStyle の引数にTextDecorationStyle.double を渡します。

波線

Text(
  'Hello World',
  style: TextStyle(
    fontSize: 35,
    decoration: TextDecoration.underline,
    decorationStyle: TextDecorationStyle.wavy,
  ),
),

波線にするにはdecorationStyle の引数にTextDecorationStyle.wavy を渡します。

一緒に読みたい

参考

  • URLをコピーしました!
目次