更改 FLUTTER 中 TextFormField 的默认边框颜色

Posted 2023-02-23

【中文标题】更改 FLUTTER 中 TextFormField 的默认边框颜色

【英文标题】：Change the default border color of TextFormField in FLUTTER

【发布时间】：2019-11-05 21:31:49

【问题描述】：

当 TextFormField 未激活时，无法更改默认边框颜色。当 TextFormField 未激活时，这将显示 DarkGrey-Border 颜色。那么，如何改变呢。

Theme(
              data: new ThemeData(
                primaryColor: Colors.red,
                primaryColorDark: Colors.black,
              ),
              child: TextFormField(
                decoration: new InputDecoration(
                  labelText: "Enter Email",
                  fillColor: Colors.white,
                  border: new OutlineInputBorder(
                    borderRadius: new BorderRadius.circular(25.0),
                    borderSide: new BorderSide(),
                  ),
                  //fillColor: Colors.green
                ),
                validator: (val) 
                  if (val.length == 0) 
                    return "Email cannot be empty";
                   else 
                    return null;
                  
                ,
                keyboardType: TextInputType.emailAddress,
                style: new TextStyle(
                  fontFamily: "Poppins",
                ),
              ),
            ),

【参考方案1】：

使用InputDecoration中的enabledBorder，别忘了你也可以使用focusedBorder，像这样：

InputDecoration(
                labelText: "Enter Email",
                fillColor: Colors.white,
                focusedBorder: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(25.0),
                  borderSide: BorderSide(
                    color: Colors.blue,
                  ),
                ),
                enabledBorder: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(25.0),
                  borderSide: BorderSide(
                    color: Colors.red,
                    width: 2.0,
                  ),
                ),
)

这里有更多信息：https://api.flutter.dev/flutter/material/InputDecoration/enabledBorder.html