将文本字段下划线颜色更改为渐变 [英] Change TextField underline color to gradient

问题描述

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

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

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

推荐答案

虽然似乎没有将下划线颜色更改为渐变颜色的属性，但可以使用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,
                      ],
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),

您可以根据您的用户界面进行修改。

输出：

没有边框的第二个Verion：

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

输出：

这篇关于将文本字段下划线颜色更改为渐变的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！