Flutter TextFormField focused border color

Question

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.

score 1 · Answer 1 · edited Jul 18 '22 at 11:42

1

Add this worked for me

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

edited Jul 18 '22 at 11:42

Suraj Rao

29,388
11
94
103

answered Jul 18 '22 at 11:31

mohamed basha

65
7

score 0 · Answer 2 · answered Jun 09 '21 at 08:26

0

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

colorScheme: theme.colorScheme.copyWith(
          primary: Colors.green,
        ),

answered Jun 09 '21 at 08:26

Alexandru Stroescu

1,067
1
9
16

Flutter TextFormField focused border color

2 Answers2