Flutter Question posted in
The official Flutter documentation can be found here.

how to change TextField color in flutter

I am having issue on how to change the color of the typed in text in the Textfield.The hintText color is working perfectly but the typed in text is still white. Since the background color of the container is white, whenever I typed a text, I can’t be able to view it because the text color is white. The only way to view it is to change my Container’s color to another color rather than white but I don’t want to do that. I want the container color to be white while the color of the typed in text is different.

Container(
      margin:
          EdgeInsets.only(left: Dimension.width30, right: Dimension.width30),
      decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.circular(Dimension.radius30),
          boxShadow: [
            BoxShadow(
                blurRadius: 3,
                spreadRadius: 1,
                offset: Offset(1, 1),
                color: Colors.grey.withOpacity(0.2))
          ]),
      child: TextField(
        obscureText: isObscure ? true : false,
        controller: textEditingController,
        decoration: InputDecoration(
            hintText: textHint,
            labelStyle: (TextStyle(color: Color(0xff8F6ED5))),
            hintStyle: (TextStyle(color: Color(0xff8F6ED5))),
            prefixIcon: Icon(
              icon,
              color: Color(0xff8F6ED5),
            ),
            focusedBorder: OutlineInputBorder(
                borderRadius: BorderRadius.circular(Dimension.radius30),
                borderSide: BorderSide(width: 1.0, color: Colors.white)),
            enabledBorder: OutlineInputBorder(
                borderRadius: BorderRadius.circular(Dimension.radius30),
                borderSide: BorderSide(width: 1.0, color: Colors.white)),
            border: OutlineInputBorder(
              borderRadius: BorderRadius.circular(Dimension.radius30),
            )),
      ),
    );
Tags:

2

Answers


  1. 0

    You can apply formatting to the textfield’s input using the style property. For example this sets the color to red:

    TextField(
  style: TextStyle(color: Colors.red),
  ...
)
    Login or Signup to reply.
  2. 0

    If you enable dark mode, the default text color for the TextField input is a light color.

    The actual appearance of the TextField without the colored Container on the back:

    TextField screenshot

    This is why it makes sense when the input color defaults to light.

    Since you’ve committed into manually coloring the TextField with light color using the Container, you have to manually set the text color of the input to a dark color as well:

    TextField(
  style: TextStyle(
    color: Colors.black,
    // ...
  ),
  // ...
)

    enter image description here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search