【Flutter】Textの影(Shadow)・影色・影の方向を指定

Textに影(ぼかし)をつける方法を紹介します。

今回はTextStyleshadowsを使用します。

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

目次

影・影色の指定

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(
  'Hello World',
  style: TextStyle(
    fontSize: 30,
    shadows: [
      Shadow(
        color: Colors.black,
        blurRadius: 10,
        offset: Offset(3, 7),
      ),
    ],
  ),
),

offsetで影の方向を指定できます。

offsetの第一引数にx軸(正数で右方向に影)、第二引数にy軸(正数で下方向に影)のピクセル値を渡し、影の方向を指定できます。

参考

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