将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,
                      ],
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),

您可以根据自己的用户界面对其进行修改。

输出：

第二版无边界：

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,
                      ],
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
      )

输出：