Flutter Text 实现下划线、波浪线、删除线、背景色、渐变文字、阴影、描边、空心字

效果图

---

1 下划线、 删除线

TextStyle 中有4个属性

• decoration ：TextDecoration可在文字上 中 下方添加直线
• decorationStyle ：extDecorationStyle 可指定线条样式，如直线、虚线、波浪线、双实线、点线
• decorationThickness ：设置线条的宽度
• decorationColor ：设置线条的颜色

下方波浪线

   Text(
    '下划波浪线',
    style: TextStyle(
      fontSize: 24,
      decoration: TextDecoration.underline,
      decorationStyle: TextDecorationStyle.wavy,
      decorationThickness: 1,
    ),
  ),

中间红色删除线

   Text(
    '中间删除线',
    style: TextStyle(
      fontSize: 24,
      decoration: TextDecoration.lineThrough,
      decorationStyle: TextDecorationStyle.solid,
      decorationColor: Colors.red
    ),
  ),

---

2 文字背景色 & 渐变色文字

TextStyle 的backgroundColor可为文字添加背景色

   Text(
     '文字添加背景色',
     style: TextStyle(
       fontSize: 24,
       color: Colors.white,
       fontWeight: FontWeight.bold,
       backgroundColor: Colors.red,
     ),
   ),

借助ShaderMask可为文字添加渐变色效果

   ShaderMask(
     shaderCallback: (Rect bounds) {
    
    
       return const LinearGradient(
         colors: [Colors.red, Colors.blue],
       ).createShader(Offset.zero & bounds.size);
     },
     child: const Text(
       '文字设置渐变色',
       style: TextStyle(
         fontSize: 24,
         color: Colors.white,
         fontWeight: FontWeight.bold,
       ),
     ),
   ),

---

3 添加阴影、立体效果、文字描边

TextStyle 的shadows可为文字添加阴影效果

3.1 文字阴影&立体效果

添加阴影可使用 Shadow 或者 BoxShadow，需要设置阴影的模糊半径 blurRadius

   Text(
     '常规红色阴影',
     style: TextStyle(
       fontSize: 48,
       color: Colors.blue,
       fontWeight: FontWeight.bold,
       shadows: [Shadow(color: Colors.red, blurRadius: 3)],
     ),
   ),

Shadow 可以设置偏移值 offset 使得文字阴影具有立体感

   Text(
     '立体红色阴影',
     style: TextStyle(
       fontSize: 48,
       color: Colors.blue,
       fontWeight: FontWeight.bold,
       shadows: [
         Shadow(color: Colors.red, blurRadius: 3, offset: Offset(3, 3))
       ],
     ),
   ),

---

3.2 粗略的文字描边&空心字体

若将阴影的blurRadius值设置小一点，因阴影效果不明显，可以视为为文字添加了描边效果，虽效果不理想但有些情况下可适用。

   Text(
     '阴影实现描边',
     style: TextStyle(
       fontSize: 48,
       color: Colors.white,
       fontWeight: FontWeight.bold,
       shadows: [Shadow(color: Colors.red, blurRadius: 1)],
     ),
   ),

加上背景色做对比

   Container(
     color: Colors.blue,
     padding: const EdgeInsets.symmetric(horizontal: 40, vertical: 10),
     child: const Text(
       '阴影实现描边',
       style: TextStyle(
         fontSize: 48,
         color: Colors.blue,
         fontWeight: FontWeight.bold,
         shadows: [Shadow(color: Colors.white, blurRadius: 1)],
       ),
     ),
   ),

---

4 空心文字

TextStyle 的foreground属性可自定义Text的前景画笔，修改画笔属性实现空心文字。

空心字体

   Text(
     '空心文字',
     style: TextStyle(
       fontSize: 48,
       fontWeight: FontWeight.bold,
       foreground: Paint()
         ..style = PaintingStyle.stroke
         ..strokeWidth = 0.1
         ..color = Colors.blue,
     ),
   ),

使用Stack叠加两个Text，实现文字空心部分为其它颜色

   Stack(
     children: [
       Text(
         '空心文字',
         style: TextStyle(
           fontSize: 48,
           color: Colors.red,
           fontWeight: FontWeight.bold,
         ),
       ),
       Text(
         '空心文字',
         style: TextStyle(
           fontSize: 48,
           fontWeight: FontWeight.bold,
           foreground: Paint()
             ..style = PaintingStyle.stroke
             ..strokeWidth = 0.1
             ..color = Colors.blue,
         ),
       ),
     ],
   ),