如何在颤动中更改 textField 的下划线颜色？答案

【问题标题】：How can a change the underline color of textField in flutter?如何在颤动中更改 textField 的下划线颜色？
【发布时间】：2018-07-17 05:35:18
【问题描述】：

我尝试定义输入装饰来更改输入文本字段下划线的颜色。但它不起作用。谁能建议我在这里缺少什么？

这里是代码 sn-p ：

decoration: InputDecoration(
    hintText: 'Username',
    hintStyle: TextStyle(color: Colors.white),
    border: new UnderlineInputBorder(
                                    borderSide: BorderSide(color: Colors.white, 
                                      width: 1.0, style: BorderStyle.none ),
    ),

【问题讨论】：

我将边框样式更改为纯色 (BorderStyle.solid)。但是还是不行。
这里有同样的问题。无法更改 TextField 的边框颜色

标签： flutter flutter-layout

【解决方案1】：

我们必须同时使用enabledBorder 和focusedBorder。

enabledBorder：当TextField 没有焦点时它会起作用。
focusedBorder：当TextField 获得焦点时，它将起作用。

enabledBorder: new UnderlineInputBorder(
  borderSide: BorderSide(
    color: Colors.black
  ),
),
// and:
focusedBorder: new UnderlineInputBorder(
  borderSide: BorderSide(
    color: Colors.black
  ),
),

【讨论】：

【解决方案2】：

decoration: InputDecoration(
  hintText: 'Username',
  hintStyle: TextStyle(color: Colors.white),
  enabledBorder: new UnderlineInputBorder(
    borderSide: BorderSide(
      color: Colors.white, 
      width: 1.0, 
      style: BorderStyle.none 
    ),
  ),
),

只需将 border 更改为 enabledBorder。希望对您有所帮助！

【讨论】：

【解决方案3】：

您必须将小部件层次结构放在 MaterialApp 下。

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
        title: 'Flutter WebView Demo',
        theme: new ThemeData(
          primarySwatch: Colors.blue,
        ),
          home: new Container(
             **//put widget here.**
        ));
  }
}

【讨论】：

【解决方案4】：

您可以将TextField 包裹在Theme 中并更改accentColor 之类的：

Theme(
  data: Theme.of(context).copyWith(accentColor: Colors.red),
  child: TextField(),
)

【讨论】：

【解决方案5】：

刚用过-：

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

它对我有用:)

【讨论】：

这只适用于焦点状态，对正常状态没有任何作用。

【解决方案6】：

 child: TextField(

                  controller: email,
                  enabled: true,
                  keyboardType: TextInputType.emailAddress,
                  decoration: InputDecoration(

                    filled: true,
                    fillColor: Color(0xFFF2F2F2),
                    enabledBorder: new OutlineInputBorder(
                        borderSide: new BorderSide(color: Colors.orange)),
                    focusedBorder: OutlineInputBorder(
                      borderSide: BorderSide(color: Colors.orange),

                    ),
                    hintText: ' Email ',

                    icon: Icon(
                      Icons.email,
                      color: Colors.orange,
                      size: 30.0,
                    ),


                  )

                )

【讨论】：

【解决方案7】：

如果你想改变那条蓝线的颜色，使用下面的代码..它可以工作

focusedBorder: OutlineInputBorder(borderSide: BorderSide(color: Colors.grey)

【讨论】：