How to add icon to errorText below TextFormField?

Question

How to add icon to errorText below TextFormField using Flutter?

Solution

Prot_CN, i think the screenshot in your post is using a custom error message with a combination of Icon and Text widget as i am not sure if the built-in feature will allow this (i could be wrong). If you don't wanna design a custom error message, you could use unicode 26A0 to display a warning symbol with your error message which would look like this,

Here is the complete code with unicode,

class MyApp extends StatefulWidget {
  @override
  MyAppState createState() => MyAppState();
}

class MyAppState extends State<MyApp> {
  final _formKey = GlobalKey<FormState>();
  final textController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            appBar: AppBar(
              title: Text('Test'),
            ),
            body: Form(
                key: _formKey,
                child: Column(children: <Widget>[
                  Container(
                      padding: const EdgeInsets.all(20.0),
                      child: TextFormField(
                        controller: textController,
                        decoration: new InputDecoration(
                            errorStyle: TextStyle(fontSize: 18.0),
                            labelText: 'Hint text',
                            filled: true,
                            fillColor: Colors.white,
                            enabledBorder: new OutlineInputBorder(
                              borderRadius: new BorderRadius.circular(25.0),
                              borderSide: new BorderSide(
                                color: Colors.grey,
                              ),
                            ),
                            focusedBorder: new OutlineInputBorder(
                                borderRadius: new BorderRadius.circular(25.0),
                                borderSide: new BorderSide(
                                  color: Colors.blue,
                                )),
                            border: OutlineInputBorder(
                                borderRadius: new BorderRadius.circular(25.0),
                                borderSide: BorderSide(
                                    color: Colors.black, width: 1.0))),
                        style: new TextStyle(color: Colors.black),
                        validator: (value) {
                          if (value.isEmpty) {
                            return '\u26A0 Field is empty.';
                          }
                          return null;
                        },
                      )),
                  Center(
                      child: Padding(
                    padding: EdgeInsets.only(top: 20.0),
                    child: RaisedButton(
                      onPressed: () {
                        // Validate returns true if the form is valid, otherwise false.
                        if (_formKey.currentState.validate()) {
                          // If the form is valid, display a snackbar. In the real world,
                          // you'd often call a server or save the information in a database.

                          Scaffold.of(context).showSnackBar(
                              SnackBar(content: Text('Processing Data')));
                        }
                      },
                      child: Text('Submit'),
                    ),
                  ))
                ]))));
  }
}

Also, here is an example with custom error message similar to your screenshot,

class MyApp extends StatefulWidget {
  @override
  MyAppState createState() => MyAppState();
}

class MyAppState extends State<MyApp> {
  final _formKey = GlobalKey<FormState>();
  final textController = TextEditingController();
  String errorText = '';
  IconData errorIcon;
  double errorContainerHeight = 0.0;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            appBar: AppBar(
              title: Text('Test'),
            ),
            body: Column(children: <Widget>[
                  Container(
                      padding: const EdgeInsets.only(top: 20.0, left: 20.0, right: 20.0),
                      child: TextFormField(
                        controller: textController,
                        decoration: new InputDecoration(
                          suffixIcon: Icon(Icons.arrow_drop_down, size: 35.0,),
                            labelStyle: TextStyle(fontSize: 18.0),
                            labelText: 'Hint text',
                            filled: true,
                            fillColor: Colors.white,
                            enabledBorder: new OutlineInputBorder(
                              borderRadius: new BorderRadius.circular(5.0),
                              borderSide: new BorderSide(
                                color: errorText.isEmpty ? Colors.grey : Colors.red[700],
                              ),
                            ),
                            focusedBorder: new OutlineInputBorder(
                                borderRadius: new BorderRadius.circular(5.0),
                                borderSide: new BorderSide(
                                  color: errorText.isEmpty ? Colors.blue : Colors.red[700],
                                )),
                            border: OutlineInputBorder(
                                borderRadius: new BorderRadius.circular(5.0),
                                borderSide: BorderSide(
                                    color: Colors.black, width: 1.0))),
                        style: new TextStyle(color: Colors.black),
                      )),
                  Container(
                    padding: EdgeInsets.only(left: 20.0, top: 5.0),
                    height: errorContainerHeight,
                      child: Row(
                    children: <Widget>[
                      Icon(errorIcon, size: 20.0, color: Colors.red[700]),
                      Padding(padding: EdgeInsets.only(left: 5.0),child: Text(errorText, style: TextStyle(fontSize: 16.0, color: Colors.red[700])))
                    ],
                  )),
                  Center(
                      child: Padding(
                    padding: EdgeInsets.only(top: 20.0),
                    child: RaisedButton(
                      onPressed: () {
                        // Validate returns true if the form is valid, otherwise false.
                        if (textController.text.isEmpty) {
                            setState(() {
                              errorContainerHeight = 35.0;
                              errorIcon = FontAwesomeIcons.exclamationCircle;
                              errorText = 'Field is empty.';
                            });
                          } else {
                          setState(() {
                            errorContainerHeight = 0.0;
                            errorIcon = null;
                            errorText = '';
                          });
                        }

                      },
                      child: Text('Submit'),
                    ),
                  ))
                ])));
  }
}

Hope this helps.

Comments

[Prot_CN]

Thx, but what about Flutter?

[Prot_CN]

Thx man, but your way is super custom thing, which will be not animated etc. Do you think, that google used also custom widget sort of textfield + container?

[Pro]

You're welcome. Yeah, you can try the first option with unicode if you don't really wanna use custom message. Not quite sure if google used a custom widget.