Flutter TextFormField focused border color

1.8k views Asked by At

This is my theme:

final ThemeData theme = ThemeData();

    return MaterialApp(
      title: 'Notes',
      home: SignInPage(),
      debugShowCheckedModeBanner: false,
      theme: theme.copyWith(
        primaryColor: Colors.green[800],
        colorScheme: theme.colorScheme
            .copyWith(secondary: Colors.green, secondaryVariant: Colors.green),
        floatingActionButtonTheme: FloatingActionButtonThemeData(
          backgroundColor: Colors.blue[900],
        ),
        inputDecorationTheme: InputDecorationTheme(
          border: OutlineInputBorder(
            borderRadius: BorderRadius.circular(8),
          ),
        ),
      ),
    );

In the old days of flutter if you'd put in the primary color to green, the border of the focused text fields would turn green too. Now, I want all of my text fields, when in focus, to have a green border, green prefix icon and green label text, all from the root Theme. But this is the result I get with the code above:

I want the lock, the "password" label, and border to be all green when focused, and grey when not focused. How can I do this from the root Theme of the app. I have the primaryColor set up to green and even the colorScheme secondary color set up to green, but still everything is blue, instead of green.

2

There are 2 answers

0
Alexandru Stroescu On

The actual way now to change the whole text field colors is by changing the colorScheme.

colorScheme: theme.colorScheme.copyWith(
          primary: Colors.green,
        ),
0
mohamed basha On

Add this worked for me

focusedBorder: const OutlineInputBorder(
    borderSide:  BorderSide(color: Color.fromRGBO(126, 132, 138, 1),),
),