将 TextField 下划线颜色更改为渐变

Question

我可以使用以下代码将TextField's颜色的轮廓颜色更改为纯色：

TextField(
  decoration: InputDecoration(
    focusedBorder: UnderlineInputBorder(
      borderSide: BorderSide(color: Colors.orange),
    ),
  ),
),

但是，我无法将其颜色更改为渐变，因为它只接受颜色作为输入。 如何在 Flutter 中将其下划线颜色更改为线性渐变？

Answer 1

虽然，似乎没有将下划线颜色更改为渐变颜色的属性，但可以使用 Stack 小部件来实现此效果，

这是我尝试这样做的方法：

body: Center(
        child: Container(
          height: 50,
          margin: EdgeInsets.all(
            10.0,
          ),
          child: Stack(
            children: <Widget>[
              TextField(
                cursorColor: Colors.red,
                decoration: InputDecoration(
                  hintText: " Enter your text here",
                  contentPadding: EdgeInsets.symmetric(
                    vertical: 15.0,
                    horizontal: 15.0,
                  ),
                  border: OutlineInputBorder(
                    borderSide: BorderSide(
                      color: Colors.white,
                      width: 0.5,
                    ),
                    borderRadius: BorderRadius.circular(
                      10.0,
                    ),
                  ),
                ),
              ),
              Positioned(
                bottom: -1,
                child: Container(
                  height: 10,
                  width: MediaQuery.of(context).size.width - 20,
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.only(
                      bottomLeft: Radius.circular(10),
                      bottomRight: Radius.circular(10),
                    ),
                    gradient: LinearGradient(
                      colors: [
                        Colors.red,
                        Colors.green,
                      ],
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),

您可以根据您的 UI 进行修改。

Output：

无边界的第二版：

body: Center(
        child: Container(
          height: 50,
          margin: EdgeInsets.all(
            10.0,
          ),
          child: Stack(
            children: <Widget>[
              TextField(
                cursorColor: Colors.red,
                decoration: InputDecoration(
                  hintText: " Enter your text here",
                  contentPadding: EdgeInsets.symmetric(
                    vertical: 15.0,
                    horizontal: 15.0,
                  ),
                ),
              ),
              Positioned(
                bottom: 1,
                child: Container(
                  height: 3,
                  width: MediaQuery.of(context).size.width - 20,
                  decoration: BoxDecoration(
                    gradient: LinearGradient(
                      colors: [
                        Colors.red,
                        Colors.green,
                      ],
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
      )

Output：