CODEWITHSUNDEEP
dartflutter
poujo
poujo

Reputation: 891

How to change TextFormField input text color in Flutter

Doing UI for a flutter app at uni, I just want the text typed into the TextFormField to be white. It seems unnecessarily difficult. I've tried googling etc but can't see an obvious answer.

  new Theme(
    // this colors the underline
    data: theme.copyWith(
      primaryColor: Colors.white,
      hintColor: Colors.transparent,

    ),
    child: new Padding(
      padding: const EdgeInsets.fromLTRB(32.0, 40.0, 32.0, 4.0),
      child: TextFormField(

          key: Key('username'),
          keyboardType: TextInputType.text,
          controller: usernameController,
          decoration: InputDecoration(

              fillColor: Colors.black.withOpacity(0.6),
              filled: true,
              border: new OutlineInputBorder(

                borderRadius: const BorderRadius.all(

                  const Radius.circular(8.0),
                ),
                borderSide: new BorderSide(
                  color: Colors.transparent,
                  width: 1.0,
                ),
              ),
              labelText: 'Username',
              labelStyle:
                  new TextStyle(color: Colors.white, fontSize: 16.0)),
          style:
              TextStyle(fontSize: 20.0, color: textTheme.button.color),
          validator: validateUserName,
          onSaved: (val) => this.loginFields._username = val),
    ),
  ),

Upvotes: 79

Views: 166420

Answers (14)

Filippo Orrù
Filippo Orrù

Reputation: 434

In my case, setting TextField(style: const TextStyle(color: Colors.white)) didn't work because I use a custom TextEditingController that overrides buildTextSpan() without applying the style parameter.

In buildTextSpan, make sure that you apply the style:

/// Highlights bad spelling with a red background and underline
class MyTextEditingController extends TextEditingController {
  @override
  TextSpan buildTextSpan({
    required BuildContext context, 
    TextStyle? style, 
    required bool withComposing,
}) {
    final highlightStyle = (style ?? const TextStyle()).copyWith(
      backgroundColor: Colors.red.withOpacity(0.2),
      decoration: TextDecoration.underline,
      decorationColor: Colors.red.shade800,
    );

    final spans = <TextSpan>[];
    // ... add spans with the highlightStyle or null

    return TextSpan(
      style: style, // Make sure to apply the style parameter, otherwise the style defined on TextField is lost
      children: spans,
    );
}

// ...

TextField(
  controller: _myController,
  style: _myDefaultStyle,
)

Upvotes: 0

Jairo Rodriguez
Jairo Rodriguez

Reputation: 396

Puedes usar style: TextStyle

body: Center(
  child: Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: <Widget>[
      Form(
        key: _formKey,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            TextFormField(
              controller: field,
              style: TextStyle(fontSize: 18, color: Colors.red),
              decoration: const InputDecoration(
                contentPadding: const EdgeInsets.only(
                    left: 15, top: 8, right: 15, bottom: 0),
                hintText: 'name',
              ),
              validator: (value) {
                if (value.isEmpty) {
                  return 'Please enter some text';
                }
                return null;
              },
            ),
          ],
        ),
      ),
    ],
  ),
),

Upvotes: 11

Martin Holoubek
Martin Holoubek

Reputation: 59

To use the style locally, use:

TextFormField(
  style: TextStyle(color: Colors.white),
)

To globally set the color (after 2023 when subtitle text style is deprecated), the only way is to set titleMedium text style.

ThemeData(
  ...
  textTheme: const TextTheme(
    ...
    titleMedium: const TextStyle(
      color: Colors.white,
    ),
  ),
),

If local text style is not set, Flutter uses titleMedium style as a default for the input style.

Upvotes: 4

Aristidios
Aristidios

Reputation: 2321

Changing Input textColor using the ThemeData :

Material 2

In Material 2 TextField is using titleMedium.

ThemeData(
  ...
  textTheme: const TextTheme(
    ...
    titleMedium: const TextStyle(
      color: Colors.red, // <-- TextFormField input color
    ),
  ),
),

Material 3

In Material 3 TextField is using bodyLarge.

ThemeData(
  ...
  textTheme: const TextTheme(
    ...
    bodyLarge: const TextStyle(
      color: Colors.red, // <-- TextFormField input color
    ),
  ),
),

Follow this Github issue for any changes

Upvotes: 11

zeucxb
zeucxb

Reputation: 1104

If you are trying to change the textColor using the ThemeData.

Now TextField is using titleMedium.

So,

ThemeData(
  ...
  textTheme: const TextTheme(
    ...
    titleMedium: const TextStyle(
      color: Colors.red, // <-- TextFormField input color
    ),
  ),
),

Upvotes: 2

morteza
morteza

Reputation: 33

decoration: const InputDecoration(
              labelStyle: TextStyle(color: Colors.white),
),

Upvotes: 0

Kwame Opare Asiedu
Kwame Opare Asiedu

Reputation: 2355

For anyone trying to do this from a material app's theme: ThemeData property, the color can be changed using the subtitle1 text theme style.

MaterialApp(
  ...
  theme: ThemeData(
    ...
    textTheme: const TextTheme(
      ...
      subtitle1: const TextStyle(
        color: Colors.red, // <-- TextFormField input color
      ),
    ),
  ),
)

Upvotes: 18

dhaval_nakum
dhaval_nakum

Reputation: 330

You can use style inside TextFormField.

Example :

          TextFormField(
            style: const TextStyle(color: Colors.white),
          ),

Upvotes: 11

pavel
pavel

Reputation: 1671

You can use this to change everything

TextFormField(
                //controller: _phoneController,
                cursorColor: Colors.black,
                keyboardType: TextInputType.text,
                style: TextStyle(
                  color: Colors.black
                ),
                decoration: new InputDecoration(
                  hintStyle: TextStyle(
                    color: Colors.white
                  ),
                    border: InputBorder.none,
                    //contentPadding:
                    //EdgeInsets.only(left: 15, bottom: 11, top: 11, right: 15),
                    hintText: "New Playlist"),
              ),

Upvotes: 6

dshukertjr
dshukertjr

Reputation: 18603

This will do:

TextFormField(
  style: TextStyle(color: Colors.white),
)

Upvotes: 164

ListenSoftware Louise Ai Agent
ListenSoftware Louise Ai Agent

Reputation: 4233

Overview: The textFormField style is set to a TextStyle defined as MediumStyle. The style affects the characters being displayed in the textbox. Whereas, the labelStyle affect the font displays of the inputdecoration.

TextFormField(
            style: MediumStyle,
            keyboardType: TextInputType.emailAddress,
            focusNode: _employeeEmailFocus,
            decoration: InputDecoration(labelText: "Employee Email", labelStyle:MediumBoldStyle),
            validator: (val)=> null,
            onSaved:(value)=> this._employeeEmail=value,
            onFieldSubmitted: (term){
                _fieldFocusChange(context,_employeeEmailFocus,_passwordFocus);
            },

            ),

Upvotes: 1

fucukur
fucukur

Reputation: 373

Padding(
  padding: EdgeInsets.all(10),
  child: TextFormField(
  cursorColor: Color(0XFFFFCC00)//Cursor color change
  style: TextStyle(
    color: Color(0XFFFFCC00),
    decorationColor: Color(0XFFFFCC00),//Font color change
    backgroundColor: Color(0XFFFFCC00),//TextFormField title background color change
   ),
),

Upvotes: 3

olexa.le
olexa.le

Reputation: 1807

You are changing input text color in this line TextStyle(fontSize: 20.0, color: textTheme.button.color), so in order to set in to white just use Colors.white constant instead of textTheme.button.color.

More about text style here.

Upvotes: 2

Archu Mohan
Archu Mohan

Reputation: 219

Add a inputdecoration class for textformfield this is i think so

    decoration: InputDecoration(
              prefixStyle: new TextStyle(

              ),

Upvotes: -11

Related Questions