Flutter：未应用 TextField 边框颜色

Question

   decoration: InputDecoration(
                      border: OutlineInputBorder(
                          borderSide: BorderSide(
                              width: 2,
                              color: _isPasswordValidated
                                  ? Colors.orange
                                  : Colors.white)),
                      errorBorder: OutlineInputBorder(
                          borderSide: BorderSide(
                              width: 2,
                              color: _isPasswordValidated
                                  ? Colors.orange
                                  : Colors.red)),
                      focusedErrorBorder: OutlineInputBorder(
                          borderSide: BorderSide(
                              width: 2,
                              color: _isPasswordValidated
                                  ? Colors.orange
                                  : Colors.red)),

I am trying to apply Red color when password has not been typed or _isPasswordValidated value is false. However, only orange color has been applied.

Is there anyway that I can change the color without using Theme ?

Answer 1

On idle, you need to use enabledBorder , also check focusedBorder and goes on.

• enabledBorder: The border to display when the InputDecorator is enabled and is not showing an error.
• disabledBorder: The border to display when the InputDecorator is disabled and is not showing an error.
• focusedBorder: The border to display when the InputDecorator has the focus and is not showing an error.

Full details on inputDecoration-class

 TextField(
              decoration: InputDecoration(
                border: OutlineInputBorder(
                  borderSide: BorderSide(
                    width: 2,
                    color: _isPasswordValidated ? Colors.orange : Colors.white,
                  ),
                ),
                focusedBorder: OutlineInputBorder(
                  borderSide: BorderSide(
                    width: 2,
                    color: Colors.pink,
                  ),
                ),
                enabledBorder: OutlineInputBorder(
                  borderSide: BorderSide(
                    width: 2,
                    color: _isPasswordValidated ? Colors.orange : Colors.red,
                  ),
                ),
                errorBorder: OutlineInputBorder(
                  borderSide: BorderSide(
                    width: 2,
                    color: _isPasswordValidated ? Colors.orange : Colors.red,
                  ),
                ),
                focusedErrorBorder: OutlineInputBorder(
                  borderSide: BorderSide(
                    width: 2,
                    color: _isPasswordValidated ? Colors.orange : Colors.red,
                  ),
                ),
              ),
            ),