Flutter - How to change TextField hint color?

Question

I'm a bit confused how to change the hint color of the textfield. Someone can guide me how to do it.Thanks

child: TextField(
   style: TextStyle(fontSize: 20),
   decoration: InputDecoration(
                  hintText: "Password",
                  border: new OutlineInputBorder(
                            borderSide: new BorderSide(
                              color: Colors.teal,
                            ),
                          ),
                   prefixIcon: const Icon(
                            Icons.security,
                            color: Colors.white,
                          ),
                ),
   ),

anmol.majhail · Accepted Answer · 2019-02-21T14:37:51.800

195

You can do with hintStyle: in InputDecoration

TextField(
        style: TextStyle(fontSize: 20),
        decoration: InputDecoration(
          hintText: "Password",
          hintStyle: TextStyle(fontSize: 20.0, color: Colors.redAccent),
          border: OutlineInputBorder(
            borderSide: BorderSide(
              color: Colors.teal,
            ),
          ),
          prefixIcon: const Icon(
            Icons.security,
            color: Colors.white,
          ),
        ),
      ),

edited Feb 21 '19 at 14:37

answered Dec 08 '18 at 03:42

anmol.majhail

48,256
14
136
105

7

What about when the input is focused? change hinttext color to a different color? – Vincent J. Michuki May 04 '19 at 08:44
@VincentJ.Michuki See my answer below. – Andrei Neacsu Feb 06 '20 at 11:23

score 20 · Answer 2 · answered Feb 06 '20 at 11:23

As an addition to the accepted answer, to update the focused hint decoration you have to update the app's Theme.

@override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
          primaryColor: Colors.white,
          inputDecorationTheme: const InputDecorationTheme(
            labelStyle: TextStyle(color: Colors.black),
            hintStyle: TextStyle(color: Colors.grey),
          )),
      home: MainScreen(),
    );
  }

An alternative way, one can use a focus node like so `hintStyle: TextStyle(color: focusNode.hasFocus ? Color(0xff7FBBCA) : Colors.black45)` — Vincent J. Michuki, Feb 10 '20 at 08:52

score 13 · Answer 3 · answered Mar 16 '21 at 02:46

change both hintStyle and labelStyle

TextFormField(
              decoration: InputDecoration(
                hintText: 'username@mail.com',
                labelText: 'Email',
               hintStyle: TextStyle(color: Colors.white), # change to your color
                labelStyle: TextStyle(color: Colors.white), # change color
             ))

score 4 · Answer 4 · answered May 11 '21 at 08:40

If you want to change the hintColor of all the TextField Widget in the app, you can apply it in the Theme.

example code:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData.light().copyWith(
        hintColor: Colors.orange,
      ),
      home: Scaffold(
        body: Column(children: [
          TextField(
            decoration: InputDecoration(
              hintText: "Email",
            ),
          ),
          TextField(
            decoration: InputDecoration(
              hintText: "Password",
            ),
          ),
        ]),
      ),
    );
  }
}

score 1 · Answer 5 · answered May 15 '20 at 06:58

After digging the source code for the InputDecorator used to determine the label color, here's what I found.

TextStyle _getFloatingLabelStyle(ThemeData themeData) {
  final Color color = decoration.errorText != null
    ? decoration.errorStyle?.color ?? themeData.errorColor
    : _getActiveColor(themeData);
  final TextStyle style = themeData.textTheme.subtitle1.merge(widget.baseStyle);
  return style
    .copyWith(color: decoration.enabled ? color : themeData.disabledColor)
    .merge(decoration.labelStyle);
}

Color _getActiveColor(ThemeData themeData) {
  if (isFocused) {
    switch (themeData.brightness) {
      case Brightness.dark:
        return themeData.accentColor;
      case Brightness.light:
        return themeData.primaryColor;
    }
  }
  return themeData.hintColor;
}

In short, to change the hint color, set hintColor using Theme and ThemeData.

Another tip: to change the label color, set the primaryColor light theme, or accentColor for dark theme.

ThemeData.dark().copyWith(
  primaryColor: Colors.red,
  accentColor: Colors.white,
  hintColor: Colors.pink,
)

score 0 · Answer 6 · answered May 01 '21 at 17:21

0

TextField(
   decoration: InputDecoration(
   hintText: 'your hint',
   hintStyle: Theme.of(context).textTheme.caption.copyWith(
   fontSize: 20,
   fontWeight: FontWeight.w600,
   color: ColorConstants.kTextColor,  <--- // Set Your Own Color
   ),

answered May 01 '21 at 17:21

Kalpesh Khandla

758
1
9
22

Also, you can check this page for more examples. https://medium.com/flutter-community/a-visual-guide-to-input-decorations-for-flutter-textfield-706cf1877e25 – Richardd May 02 '21 at 00:05

Flutter - How to change TextField hint color?

6 Answers6