【Flutter】Textの下線の色・太さを指定/二重線・打ち消し線に変更

Text に下線を引く方法を紹介します。

今回はTextStyledecoration decorationColor decorationThickness を使用します。

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

目次

基本的な下線

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

Text に基本的な下線をつけるには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をコピーしました!
目次