Home Articles

如何更改textField下划线颜色?

Asked
Viewed 1335 times
3

我是崭新的扑克和飞镖 . 目前,在我的一个个人项目中使用它 .

enter image description here

在我的所有表单中,textField的下划线显示为蓝色 . 我想将其改为其他颜色 . 我正在使用的那段代码就像......

new TextField(
  controller: this._emailController,
  decoration: new InputDecoration(
      hintText: "Enter your email",
      labelText: "Email",
      labelStyle: new TextStyle(
          color: const Color(0xFF424242)
      )
  ),

),

无法理解如何实现这一目标 .

注意:我知道这里有一个类似的问题Change TextField's Underline in Flutter . 但是,在那里它还没有完全解决 . 此外,还有一个链接看起来与我的相似Changing EditText bottom line color with appcompat v7但是,它实际上属于Android开发,使用JAVA而不是DART(颤动),我对这些链接感到困惑 .

2 Answers

  • 5

    逻辑上的答案是使用InputBorder,特别是UnderlineInputDecorator,并将其作为边框传递给inputdecorator . 但是,所有这一切都告诉InputDecorator是否应该使用下划线或您指定的任何其他内容 .

    实际颜色基于主题 - 来源:

    Color _getActiveColor(ThemeData themeData) {
      if (isFocused) {
        switch (themeData.brightness) {
          case Brightness.dark:
            return themeData.accentColor;
          case Brightness.light:
            return themeData.primaryColor;
        }
      }
      return themeData.hintColor;
    }
    

    所以改变颜色做这样的事情(或指定整个应用程序的主题):

    new Theme(
      data: new ThemeData(
        primaryColor: Colors.red,
        accentColor: Colors.orange,
        hintColor: Colors.green
      ),
      child: new TextField(
        decoration: new InputDecoration(
          hintText: "Enter your email",
          labelText: "Email",
          labelStyle: new TextStyle(color: const Color(0xFF424242)),
          border: new UnderlineInputBorder(
            borderSide: new BorderSide(
              color: Colors.red
            )
          )
        ),
      ),
    ),
    
  • -1

    刚使用 - :

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

    这个对我有用 :)

Related