CODEWITHSUNDEEP
flutter
Matt
Matt

Reputation: 484

Change color of TextFormField

I am trying to change the focusColor of a TextFormField.

TextFormField(
            maxLines: 1,
            autofocus: false,
            decoration: InputDecoration(
              focusColor: Colors.green,
              hintText: 'Email',
              icon: Icon(Icons.email),
            ))

Whenever the TextFormField comes in focus, its border and icon turn blue. I was hoping by changing focusColor that I could override this behavior, but it doesn't seem to do anything when I throw in Colors.green for example.

How can I set a different color when it is in focus?

Upvotes: 2

Views: 7259

Answers (4)

Erick M. Sprengel
Erick M. Sprengel

Reputation: 2209

There is a easiest way to customize TextFormField and all other material components. You just need to customize the primary and the secondary (accent) color.


class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    final theme = ThemeData();
    return MaterialApp(
      title: _title,
      theme: theme.copyWith(
        primaryColor: Colors.green, // DEPRECATED WAY
        accentColor: Colors.red, // DEPRECATED WAY
        colorScheme: theme.colorScheme.copyWith(
          secondary: Colors.red, // NEW WAY 
          primary: Colors.green, // NEW WAY
        ),
      ),
      home: Scaffold(
        appBar: AppBar(title: const Text(_title)),
        body: const MyStatelessWidget(),
      ),
    );
  }
}

https://dartpad.dev/1a28bdd9203250d3226cc25d512579ec?null_safety=true

I put the NEW WAY and the DEPRECATED WAY in comments due to this recent migration on ThemeData for MaterialApp (https://flutter.dev/docs/release/breaking-changes/theme-data-accent-properties ). The code above works for components using old style and the new style.

Upvotes: 0

leemuljadi
leemuljadi

Reputation: 470

Mate just put this in your 

MaterialApp(theme: themeData()),

ThemeData themeData() {
  return ThemeData(
    inputDecorationTheme: InputDecorationTheme(
      border: const OutlineInputBorder(
          borderSide: BorderSide(color: Colors.green)),
      focusedBorder: const OutlineInputBorder(
          borderSide: BorderSide(color: Colors.green)),
      enabledBorder: const OutlineInputBorder(
          borderSide: BorderSide(color: Colors.green)),
      errorBorder: const OutlineInputBorder(
          borderSide: BorderSide(color: Colors.green)),
      focusedErrorBorder: const OutlineInputBorder(
          borderSide: BorderSide(color: Colors.green)),
        ),
 );
}

You just tailored everything there for your TextFormField

Upvotes: 5

Federick Jonathan
Federick Jonathan

Reputation: 2864

First, you need to initialize 2 things:

FocusNode focusNode = FocusNode();
Color color = Colors.green;

Second, you need to call addListener

@override
  void initState() {
    focusNode.addListener(() {
      setState(() => color = focusNode.hasFocus ? Colors.red : Colors.green);
    });
    super.initState();
  }

Third, assign the focusNode, add color to cursorColor and prefixIcon properties of TextFormField. The thing you probably missed is this focusedBorder property of InputDecoration.

    TextFormField(
      focusNode: focusNode,
      cursorColor: color,
      decoration: InputDecoration(
        prefixIcon: Icon(
          Icons.ac_unit,
          color: color,
        ),
        enabledBorder:
            OutlineInputBorder(borderSide: BorderSide(color: Colors.green)),
        focusedBorder:
            OutlineInputBorder(borderSide: BorderSide(color: Colors.red)),
      ),
    ),

Upvotes: 0

dlohani
dlohani

Reputation: 2591

The easiest way I found was by wrapping with a Theme widget. As the TextField or TextFormField take primary color as border and icon color when focused, we could

Theme(
  data: Theme.of(context).copyWith(primaryColor: Colors.green),
  child: TextFormField(
    maxLines: 1,
    autofocus: false,
    decoration: InputDecoration(
      hintText: 'Email',
      icon: Icon(Icons.email),
    ),
  ),
),

Hope this solves your query.

Upvotes: 1

Related Questions