【Flutter】テキストの装飾

Flutterでのテキストの装飾についてまとめました。

テキストサイズの記載がないものは一律「fontSize: 30」にしております。

テキストサイズ

書き方

Text(
    'fontSize 5', // 表示したいテキスト
    style: TextStyle(fontSize: 5), // テキストサイズ
    ),

テキストカラー

書き方

Text(
    'color red', // 表示したいテキスト
    style: TextStyle(
        color: Colors.red), // テキストカラー
),

テキストの太さ

書き方

Text(
    'FontWeight.w100', // 表示したいテキスト
    style: TextStyle(
        fontWeight:FontWeight.w100), // テキストの太さ
),

• w100 : Thin、最も細いフォントの太さ。
• w200 : エクストラライト。
• w400 : 通常。定数FontWeight.normal は、この値のエイリアスです。
• w700 : 大胆。定数FontWeight.bold は、この値のエイリアスです。
• w900 : 黒、フォントの太さが最も太い。

テキストのフォント

書き方

Text(
    'FontStyle.normal', // 表示したいテキスト
    style: TextStyle(
        fontStyle: FontStyle.normal), // フォントの指定
),

テキストに線

取り消し線

Text(
    'line.single', // 表示したいテキスト
    style: TextStyle(
        decoration: TextDecoration.lineThrough),
),

二重取り消し線

Text(
    'line.double', // 表示したいテキスト
    style: TextStyle(
        decoration: TextDecoration.lineThrough,
        decorationStyle: TextDecorationStyle.double),
),

下線

Text(
    'underline.single', // 表示したいテキスト
    style: TextStyle(
        decoration: TextDecoration.underline),
),

二重下線

Text(
    'underline.double', // 表示したいテキスト
    style: TextStyle(
        decoration: TextDecoration.underline,
        decorationStyle: TextDecorationStyle.double),
),

波線下線

Text(
    'underline.wavy', // 表示したいテキスト
    style: TextStyle(
        decoration: TextDecoration.underline,
        decorationStyle: TextDecorationStyle.wavy),
),

点線下線

Text(
    'underline.dashed', // 表示したいテキスト
    style: TextStyle(
        decoration: TextDecoration.underline,
        decorationStyle: TextDecorationStyle.dashed),
),

その他

影

Text(
    'shadow', // 表示したいテキスト
    style: TextStyle(
        shadows: [
            Shadow(blurRadius: 8.0),
        ],
    ), 
),

文字間スペース

Text(
    'letterSpacing', // 表示したいテキスト
    style: TextStyle(
        lettrrSpacing: 6.0,
    ),
),