Search code examples
fluttermaterial-uicolorstextfield

Change the label color of a TextField in flutter when unfocused and not empty


After Material 3, default TextField border and label color (when focused) were changed to grey. So I needed to set my ThemeData as below. If the TextField is empty, there's a hint inside it with light gray color, which is desired behaviour. When I focus the TextField the label is now red at the top of the TextField. The problem arrives when I unfocus it and the color of the label text remains red, whereas border color is light gray.

My desired behavior would be the label color turning light gray, instead of red. I know I can do it programmatically but I have several TextFields on my app rendering it unpractical. Let's note that on material 2 it worked like desired just by setting primary color.

      theme: ThemeData(
        brightness: Brightness.light,
        primarySwatch: Colors.red,
        elevatedButtonTheme: ElevatedButtonThemeData(
          style: ElevatedButton.styleFrom(
            backgroundColor: Colors.red,
            foregroundColor: Colors.white,
          ),
        ),
        inputDecorationTheme: InputDecorationTheme(
          floatingLabelStyle: TextStyle(color: Colors.red),
          border: OutlineInputBorder(borderRadius: BorderRadius.circular(10), borderSide: BorderSide()),
          focusedBorder: OutlineInputBorder(
            borderRadius: BorderRadius.circular(10),
            borderSide: BorderSide(color: Colors.red, width: 2),
          ),
        ),
        textSelectionTheme: TextSelectionThemeData(cursorColor: Colors.red),
      ),

Solution

  • This issue is interesting, I think I should add enableFloatingLabelStyle but in the meantime what occurs to me is to use the MaterialStateTextStyle to obtain the desired result.

          theme: ThemeData(
            brightness: Brightness.light,
            primarySwatch: Colors.red,
            elevatedButtonTheme: ElevatedButtonThemeData(
              style: ElevatedButton.styleFrom(
                backgroundColor: Colors.red,
                foregroundColor: Colors.white,
              ),
            ),
            inputDecorationTheme: InputDecorationTheme(
              // floatingLabelStyle: const TextStyle(color: Colors.red),
              // use material state to change the color of the floating label
              floatingLabelStyle: MaterialStateTextStyle.resolveWith((states) {
                if (states.contains(MaterialState.focused)) {
                  return const TextStyle(color: Colors.red);
                }
                return const TextStyle(color: Colors.grey);
              }),
              //
              border: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(10),
                  borderSide: const BorderSide()),
              focusedBorder: OutlineInputBorder(
                borderRadius: BorderRadius.circular(10),
                borderSide: const BorderSide(color: Colors.red, width: 2),
              ),
            ),
            textSelectionTheme:
                const TextSelectionThemeData(cursorColor: Colors.red),
          ),