flutter-Text组件去除文字底部双黄色线

场景:
Stack组件内嵌套了Text组件

Stack(
          children: [
            Container(
              width: 100.w,
              height: 50.h,
              color: Colors.lightBlueAccent,
              alignment: Alignment.center,
              child: const Text(
                "什么情况?",
                style: TextStyle(color: Colors.red, fontSize: 16),
              ),
            ),
          ],
        )

image.png

了解了下:
flutter中，Text组件是属于Material风格的，这就要求我们的根组件最好也是Material风格的，否则UI展示可能会有一些问题。我这里Text嵌套在层叠布局Stack中，而Stack不属于Material风格，当Stack内部嵌套Text的时候就会出现文字下方带有两条黄色下划线的现象

解决:

1. 修改根节点的组件类型为Scaffold或者Material
   很显然，我之所以会出现这种情况，就是这里根节点不能使用Scaffold，但是可以嵌套一层Material

Material(
          child: Stack(
            children: [
              Container(
                width: 100.w,
                height: 50.h,
                color: Colors.lightBlueAccent,
                alignment: Alignment.center,
                child: const Text(
                  "什么情况?",
                  style: TextStyle(color: Colors.red, fontSize: 16),
                ),
              ),
            ],
          ),
        )

2. 也可以直接修改出现双黄色线Text的style的decoration属性为TextDecoration.none

Container(
                      width: 100.w,
                      height: 50.h,
                      color: Colors.lightBlueAccent,
                      alignment: Alignment.center,
                      child: const Text(
                        "什么情况?",
                        style: TextStyle(
                            color: Colors.red,
                            fontSize: 16,
                            decoration: TextDecoration.none),
                      ),
                    ),

image.png