Search code examples
fluttercolorsflutter-text

How to change the color of validator text in flutter?


I have password textfield in flutter application, which has a validator associated with it, which is working fine. Below is the code for the same

String pwdValidator(String value) {

  if (value.length < 6) {
    return 'Password must be longer than 6 characters';
  } else {
    return null;
  }
}

final passwordField = TextFormField(
  decoration: InputDecoration(
    labelText: 'Password',

    prefixIcon: Icon(
      LineIcons.lock,
      color: Colors.white,
    ),
    enabledBorder: UnderlineInputBorder(
      borderSide: BorderSide(color: Colors.white),
    ),
    focusedBorder: UnderlineInputBorder(
      borderSide: BorderSide(color: Colors.white),
    ),
  ),
  keyboardType: TextInputType.text,
  obscureText: true,
  validator: pwdValidator,
  controller: pwdInputController,
);

You can see above the whole of the code. I have issue with this working code and that is I am not able to change the text color of the validator for the password,I mean when the user press the submit button and if password field is not sufficient size in length. how am i supposed to change the color for the same?


Solution

  • You can copy paste run full code below
    You can use errorStyle and set TextStyle per your request
    code snippet

    TextFormField(
                decoration: InputDecoration(
                  labelText: 'Password',
                  errorStyle: TextStyle(color: Colors.orange),
    

    working demo

    enter image description here

    full code

    import 'package:flutter/material.dart';
    
    void main() => runApp(MyApp());
    
    /// This Widget is the main application widget.
    class MyApp extends StatelessWidget {
      static const String _title = 'Flutter Code Sample';
    
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          title: _title,
          home: Scaffold(
            appBar: AppBar(title: const Text(_title)),
            body: MyStatelessWidget(),
          ),
        );
      }
    }
    
    /// This is the stateless widget that the main application instantiates.
    class MyStatelessWidget extends StatefulWidget {
      MyStatelessWidget({Key key}) : super(key: key);
    
      @override
      _MyStatelessWidgetState createState() => _MyStatelessWidgetState();
    }
    
    class _MyStatelessWidgetState extends State<MyStatelessWidget> {
      final _formKey = GlobalKey<FormState>();
    
      String pwdValidator(String value) {
        if (value.length < 6) {
          return 'Password must be longer than 6 characters';
        } else {
          return null;
        }
      }
    
      @override
      Widget build(BuildContext context) {
        return Form(
          key: _formKey,
          child: Column(
            children: [
              TextFormField(
                decoration: InputDecoration(
                  labelText: 'Password',
                  errorStyle: TextStyle(color: Colors.orange),
                  prefixIcon: Icon(
                    Icons.description,
                    color: Colors.white,
                  ),
                  enabledBorder: UnderlineInputBorder(
                    borderSide: BorderSide(color: Colors.white),
                  ),
                  focusedBorder: UnderlineInputBorder(
                    borderSide: BorderSide(color: Colors.white),
                  ),
                ),
                keyboardType: TextInputType.text,
                obscureText: true,
                validator: pwdValidator,
                //controller: pwdInputController,
              ),
              RaisedButton(
                onPressed: () {
                  // Validate returns true if the form is valid, otherwise false.
                  if (_formKey.currentState.validate()) {}
                },
                child: Text('Submit'),
              )
            ],
          ),
        );
      }
    }