增加TextDecoration线中的距离 - 颤动

Question

Text 小部件中是否有一个属性可以增加 TextDecoration 属性中的文本和下划线之间的距离？

示例：

Text('Example',style: TextStyle(color: Colors.black,fontSize:15 ,decoration: TextDecoration.underline,fontWeight: FontWeight.bold),),

Answer 1

没有内置的解决方案，但有一个解决方案。 您需要创建文本阴影并更改其颜色。这是可见的。 原始文本颜色必须是透明的。 然后使用 Offset 属性使用尽可能多的空间。

Text('Text and underline space',
          style: TextStyle(
              color: Colors.transparent,
              decorationColor: Colors.grey,
              /// change -20 to as many space as you need but it must be less than 0
              shadows: [Shadow(color: Colors.white, offset: Offset(0, -20))],
              decoration: TextDecoration.underline,
              decorationThickness: 3))

Answer 2

Text('Approve',
                      style: Theme.of(context).textTheme.bodySmall!.merge(TextStyle(
                        shadows: [
                          Shadow(
                              color: Colors.green,
                              offset: Offset(0, -5))
                        ],
                        fontSize: 16,
                        fontWeight: FontWeight.w800,
                        color: Colors.transparent,
                        decoration:
                        TextDecoration.underline,
                        decorationColor: Colors.green,
                        decorationThickness: 2,
                        //decorationStyle: TextDecorationStyle.dashed,
                      ),
                      )