将文本字段下划线颜色更改为渐变色
我可以使用以下代码将TextField的颜色的轮廓颜色更改为纯色：
TextField(
decoration: InputDecoration(
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.orange),
),
),
),
但是，我无法将其颜色更改为渐变，因为它只接受颜色作为输入。如何将其下划线颜色更改为颤振中的线性渐变？
共有1个答案
虽然，似乎没有将下划线颜色更改为渐变颜色的属性，但这种效果可以通过Stack widget实现，
下面是我如何尝试的：
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对其进行修改。
输出：
无边界的第二次验证：
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,
],
),
),
),
),
],
),
),
)
输出：
-
我对这两个都不熟悉 在我所有的表单中，textField的下划线都显示为蓝色。我想把它换成其他颜色。我使用的代码就像。。。 无法理解如何实现这一点。 注意：我知道这里有一个类似的问题，在flifter中更改TextField的下划线。但是，在那里也没有完全解决。另外，还有一个链接看起来与我的类似，它在这里使用appcompat v7更改EditText底线颜色，但实际上是属于Android开发的，
-
我试图改变一个文本字段的下划线颜色时，它的非活动/不集中。我不确定在哪里进行此更改，输入装饰主题仅在选中时更改下划线颜色。我如何实现这一点？ 我试图改变这种颜色文本字段为浅灰色时，它没有选择/失去焦点。
-
问题内容： 我在这里有此代码： 首先，如您所见，它带有下划线（）。其次，所有文字均为红色。那么，是否有将文本（$ username）留为红色而下划线为黑的情况？ 问题答案： 不能。您最好的方法是使用其他颜色的，但这并不是 真正的重点 。
-
默认是某种蓝色（可能是全息蓝色），但我需要将其更改为橙色。问题是，我不知道这到底是怎么叫的（这是下划线，指示器还是什么？），所以我不能自己谷歌这个。 谢谢
-
问题内容： 是否有生成器，或生成这种文本的简便方法，而无需定义 每个 字母 所以像这样： 但是不是用 彩虹 色而是用其他颜色（例如，白色到灰色/浅蓝色渐变等）生成的，我为此找不到简单的解决方案。有什么办法吗？ 问题答案： 我不完全了解 Stop的 工作原理。但是我有一个 渐变文本 示例。也许这会帮到您！ _您也可以根据需要为渐变添加更多颜色，或者从颜色生成器中选择其他颜色
-
WebStorm似乎是web开发的IDE，我一直很喜欢它。唯一的问题是过梁的错误强调： 由于这种浅色，我花了相当多的时间进行调试，而错误本来就不应该发生，我环顾四周，没有找到更改颜色的方法。这在WebStorm中可能吗？ 即使是黑色的主题也没有强烈对比的下划线。我们能改变它吗？