禁用时如何更改TextField下划线边框颜色

Question

I want to change TextFiled underline color when it is disabled

child: TextField(
    ***enabled: false,***
    controller: resultController,
    style: TextStyle(
        color: Colors.orange, fontSize: 18, fontWeight: FontWeight.bold),
    keyboardType: TextInputType.number,
    decoration: InputDecoration(
        enabledBorder:  UnderlineInputBorder(
            borderSide: BorderSide(color: Colors.white)),
        labelText: resultLableText,
        labelStyle: TextStyle(color: Colors.white)),
  ), 

Answer 1

I am unsure that there is a method you can use to check if a TextField is disabled, but a way you can do it is you can create a bool that keeps track if the TextField is disabled.

1. Create the bool

bool isDisabled = false;

2. Make a function that changes the value

Function<void> changeDisabled() {
setState() {
    isDisabled ? isDisabled = false : isDisabled = true
}
}

3. Check the status of isDisabled in your code.

child: TextField(
    enabled: false,
    controller: resultController,
    style: TextStyle(
        color: Colors.orange, fontSize: 18, fontWeight: FontWeight.bold),
    keyboardType: TextInputType.number,
    decoration: InputDecoration(
        enabledBorder:  UnderlineInputBorder(
            borderSide: BorderSide(color: isDisabled ? Colors.white : Colors.black)),
        labelText: resultLableText,
        labelStyle: TextStyle(color: Colors.white)),
  ), 

Answer 2

You can specify the underline color of the TextField if its disabled in the same way you did for when its enabled by using the disabledBorder property of the InputDecoration like:

 InputDecoration(
        enabledBorder:
            UnderlineInputBorder(borderSide: BorderSide(color: Colors.white)),
        labelText: resultLableText,
        labelStyle: TextStyle(color: Colors.white),
        disabledBorder:
            UnderlineInputBorder(borderSide: BorderSide(color: Colors.green)),
      ),

or specifying it in the ThemeData like:

 MaterialApp(
      theme: ThemeData.light().copyWith(
          inputDecorationTheme: InputDecorationTheme(
        disabledBorder:
            UnderlineInputBorder(borderSide: BorderSide(color: Colors.green)),
      )),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }

Answer 3

---

Look at the below code, it will easily solve your problem:

---

TextField(
            decoration: InputDecoration(
              hintText: "Your hint here",
              //defalult border
              border: OutlineInputBorder(
                  borderSide: BorderSide(width: 1, color: Colors.green)),
              //disabled border
              disabledBorder: OutlineInputBorder(
                  borderSide: BorderSide(width: 1, color: Colors.grey)),
              //enabled border
              enabledBorder: OutlineInputBorder(
                  borderSide: BorderSide(width: 1, color: Colors.blue)),
              //error boreder
              errorBorder: OutlineInputBorder(
                  borderSide: BorderSide(width: 1, color: Colors.red)),
              //focused border
              focusedBorder: OutlineInputBorder(
                  borderSide: BorderSide(width: 1, color: Colors.purple)),
              //error while focused border
              focusedErrorBorder: OutlineInputBorder(
                  borderSide: BorderSide(width: 1, color: Colors.amber)),
            ),
          ),