Android like Textfield Validation in Flutter?

Question

I would like to achieve Android like TextField validation in Flutter.

I tried the TextField docs of Flutter and the InputDecoration has a property of errorText but is displays error at the bottom of textfield. I want to achieve something like below in Flutter

Answer 1

You can use a TextFormField along with a custom Tooltip inside a Stack to achieve this effect. In the decoration property for the TextFormField you can use the suffixIcon property of the InputDecoration class to pass the error icon.

And you can use a bool variable to show/hide the tooltip message when the validation error occurs.

Example code for the TextFormField:

  TextFormField(
    decoration: InputDecoration(
      //Set the different border properties for a custom design
      suffixIcon: IconButton(
        icon: Icon(Icons.error, color: Colors.red),
        onPressed: () {
          setState(() {
            showTooltip = !showTooltip; //Toggles the tooltip
          });
        },
      ),
    ),
    validator: (String value) {
      if(value.isEmpty) {
        setState(() {
          showTooltip = true; //Toggles the tooltip
        });
        return "";
      }
    }
  );

You can wrap the above code along with your custom tooltip widget code with a Stack to achieve the error tooltip effect.

Below is a quick working example. You can design your own custom tooltip widget and use it in your code.

Example:

class LoginAlternate extends StatefulWidget {
  @override
  _LoginAlternateState createState() => _LoginAlternateState();
}

class _LoginAlternateState extends State<LoginAlternate> {

  GlobalKey<FormState> _formKey = GlobalKey();
  bool showTooltip = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.blueGrey,
      body: Container(
        padding: EdgeInsets.symmetric(
          horizontal: 100,
          vertical: 100
        ),
        child: Form(
          key: _formKey,
          child: Column(
            children: <Widget>[
              Stack(
                alignment: Alignment.topRight,
                overflow: Overflow.visible,
                children: <Widget>[
                  TextFormField(
                    decoration: InputDecoration(
                      filled: true,
                      fillColor: Colors.white,
                      border: OutlineInputBorder(
                        borderSide: BorderSide.none
                      ),
                      suffixIcon: IconButton(
                        icon: Icon(Icons.error, color: Colors.red,),
                        onPressed: () {
                          setState(() {
                            showTooltip = !showTooltip;
                          });
                        },
                      ),
                      hintText: "Password"
                    ),
                    validator: (value) {
                      if(value.isEmpty) {
                        setState(() {
                          showTooltip = true;
                        });
                        return "";
                      }
                    },
                  ),
                  Positioned(
                    top: 50,
                    right: 10,
                    //You can use your own custom tooltip widget over here in place of below Container
                    child: showTooltip
                    ? Container(
                      width: 250,
                      height: 50,
                      decoration: BoxDecoration(
                        color: Colors.white,
                        border: Border.all( color: Colors.red, width: 2.0 ),
                        borderRadius: BorderRadius.circular(10)
                      ),
                      padding: EdgeInsets.symmetric(horizontal: 10),
                      child: Center(
                        child: Text(
                          "Your passwords must match and be 6 characters long.",
                        ),
                      ),
                    ) : Container(),
                  )
                ],
              ),
              RaisedButton(
                child: Text("Validate"),
                onPressed: () {
                  _formKey.currentState.validate();
                },
              ),
            ],
          ),
        ),
      ),
    );
  }
}