如何更改文本字段下划線錯誤顏色？

Question

如何更改TextFormField下划線錯誤顏色？ 當驗證器返回非空時，文本字段的基礎顏色變紅（當主題亮度變暗時）。

TextFormField(
  decoration: InputDecoration(
    labelText: AppLocalizations.key(context, 'formPassword'),
    icon: Icon(Icons.lock
    hintText: AppLocalizations.key(context, 'enterYourPassword'),
  ),
  validator: (val) {
    val = val.trim();
    if (validatePassword(val) == false) {
      return AppLocalizations.key(context, 'passwordNotAccepted');
    }
    password = val;
    return null;
  },
  initialValue: '',
  onSaved: (val) => {},
  keyboardType: TextInputType.visiblePassword,
  obscureText: true,
),

Answer 1

試試下面的代碼希望對你有幫助。

InputDecoration(
      errorBorder: OutlineInputBorder(
      borderSide: BorderSide(
      color: Colors.amber,
     ),
    ),
  errorStyle: TextStyle(
  color: Colors.blue,
 ),
),

您的完整小部件。

                 TextFormField(
                        validator: (value) {
                          if (value!.isEmpty) {
                            return 'Please Enter Brand Name';
                          }
                          return null;
                        },
                        decoration: InputDecoration(
                          errorBorder: OutlineInputBorder(
                            borderSide: BorderSide(
                              color: Colors.amber,
                            ),
                          ),
                          errorStyle: TextStyle(
                            color: Colors.blue,
                          ),
                          border: OutlineInputBorder(),
                          labelText: 'Brand Name',
                          hintText: 'Brand Name',
                        ),
                      ),

你的屏幕->

Answer 2

請參考以下代碼

class MainScreen extends StatelessWidget {
  MainScreen({Key key}) : super(key: key);

  final TextEditingController addressController = TextEditingController();
  final FocusNode addressFocus = FocusNode();

  int validateAddress(String address) {
    String patttern = r'(^[a-zA-Z0-9 ,.-]*$)';
    RegExp regExp = new RegExp(patttern);
    if (address.isEmpty || address.length == 0) {
      return 1;
    } else if (address.length < 10) {
      return 3;
    } else {
      return 0;
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.lightBlue,
        automaticallyImplyLeading: true,
        leading: Icon(
          Icons.arrow_back,
        ),
        title: Text("Example"),
        centerTitle: true,
      ),
      body: Container(
          padding: EdgeInsets.all(15.0),
          child: Center(
            child: TextFormField(
              autovalidate: true,
              controller: addressController,
              inputFormatters: [
                FilteringTextInputFormatter.deny(RegExp(r"\s\s")),
                FilteringTextInputFormatter.deny(RegExp(
                    r'(\u00a9|\u00ae|[\u2000-\u3300]|\ud83c[\ud000-\udfff]|\ud83d[\ud000-\udfff]|\ud83e[\ud000-\udfff])')),
              ],
              keyboardType: TextInputType.text,
              maxLength: 60,
              onChanged: (val) {},
              maxLines: 1,
              validator: (value) {
                int res = validateAddress(value);
                if (res == 1) {
                  return "Please enter address";
                } else if (res == 3) {
                  return "Please enter minimum 10 characters";
                } else {
                  return null;
                }
              },
              focusNode: addressFocus,
              autofocus: false,
              decoration: InputDecoration(
                errorMaxLines: 3,
                counterText: "",
                filled: true,
                fillColor: Colors.white,
                focusedBorder: OutlineInputBorder(
                  borderRadius: BorderRadius.all(Radius.circular(4)),
                  borderSide: BorderSide(
                    width: 1,
                    color: Color(0xffE5E5E5),
                  ),
                ),
                disabledBorder: OutlineInputBorder(
                  borderRadius: BorderRadius.all(Radius.circular(4)),
                  borderSide: BorderSide(
                    width: 1,
                    color: Color(0xffE5E5E5),
                  ),
                ),
                enabledBorder: OutlineInputBorder(
                  borderRadius: BorderRadius.all(Radius.circular(4)),
                  borderSide: BorderSide(
                    width: 1,
                    color: Color(0xffE5E5E5),
                  ),
                ),
                border: OutlineInputBorder(
                  borderRadius: BorderRadius.all(Radius.circular(4)),
                  borderSide: BorderSide(
                    width: 1,
                  ),
                ),
                errorBorder: OutlineInputBorder(
                    borderRadius: BorderRadius.all(Radius.circular(4)),
                    borderSide: BorderSide(
                      width: 1,
                      color: Colors.red,
                    )),
                focusedErrorBorder: OutlineInputBorder(
                  borderRadius: BorderRadius.all(Radius.circular(4)),
                  borderSide: BorderSide(
                    width: 1,
                    color: Colors.red,
                  ),
                ),
                hintText: "Hint Text" ?? "",
              ),
            ),
          )),
    );
  }
}