How to set TextFormField to use primary color(on focus) in Flutter

Question

I need to change label and border's default color to use the primary color on focus, and i've already tried InputDecorationTheme, but it doesn't work well with the label. I realize that the TextField uses accent color.

The screen; and theme:

final ThemeData darkTheme = ThemeData(
    primaryColor: Colors.blueAccent[400],
    accentColor: Colors.pinkAccent[400],
    brightness: Brightness.dark,
    backgroundColor: Colors.grey[900],
    inputDecorationTheme: InputDecorationTheme(
        fillColor: Colors.white.withOpacity(0.1),
        filled: true,
    ),
);

Thank you.

score 0 · Answer 1 · answered Oct 30 '19 at 17:02

0

Try setting the style in your TextFormField like:

style: TextStyle(
   color: Theme.of(context).primaryColor
),

answered Oct 30 '19 at 17:02

Davide Bicego

562
2
6
24

Thanks, but I need to change the outline and label's color on focus, I'll edit my question. – Mario Santos Oct 31 '19 at 12:09

score 0 · Answer 2 · answered Oct 30 '19 at 17:28

utils.dart

class AvailableFonts {
  static const primaryFont = "Quicksand";
  static const primaryFontSize = 14.0;
}

theme.dart

place it in lib folder as main

ThemeData buildThemeData() {
  final baseTheme = ThemeData(fontFamily: AvailableFonts.primaryFont);

 return baseTheme.copyWith(
   primaryColor: primaryColor,
   primaryColorDark: primaryDark,
   primaryColorLight: primaryLight,
   accentColor: secondaryColor,
);}

And, where you define your colours

colours.dart

const primaryColor = Colors.red;
const primaryLight = const Color(0xFFB71C1C);
const primaryDark = const Color(0xFFFF9F59);
const secondaryColor = Colors.white;

There after, you can simply use as an example bellow:

color: primaryColor,

It works, but I need to change the outline and label's color on focus, I'll edit my question, thank u. — Mario Santos, Oct 31 '19 at 12:11

score 0 · Answer 3 · edited May 17 '22 at 07:31

This is the correct way to call color:

focusedBorder: UnderlineInputBorder(
                      borderRadius: BorderRadius.circular(20),
                      borderSide: BorderSide(
                          color: ThemeData()
                              .inputDecorationTheme
                              .focusedBorder?.borderSide
                              .color ??
                              Colors.pink),
                    )

How to set TextFormField to use primary color(on focus) in Flutter

3 Answers3