How to show error icon inside TextField in Flutter

Question

I need to show an error icon when the user enters invalid input inside a TextField.

Also, this icon should have a popup which is open by default when the error happens, like the following image.

How I can do that?

Answer 1

You can try something like this but please the next time explicate your questions (adding some code) cause people can't stay here to understand what you want... if you want help you need to be clear:

Main

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

HomePage

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  ErrorIcon errorIcon = new ErrorIcon(false);

  @override
  Widget build(BuildContext context) {
    debugPrint("Rebuilding main widget");

    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Padding(
          //Add padding around textfield
          padding: EdgeInsets.symmetric(horizontal: 25.0),
          child: TextField(
            onChanged: (text) {
              // DEFINE YOUR RULES HERE
              if (text.contains("1")) {
                setState(() {
                  errorIcon = new ErrorIcon(true);
                });
              } else {
                setState(() {
                  errorIcon = new ErrorIcon(false);
                });
              }
            },
            decoration: InputDecoration(
              hintText: "Enter Username",
              icon: errorIcon,
            ),
          ),
        ),
      ),
    );
  }
}

The error widget for the error icon

class ErrorIcon extends StatefulWidget {
  bool _isError = false;

  ErrorIcon(this._isError);

  bool get isError => _isError;

  @override
  _ErrorIconState createState() => _ErrorIconState();
}

class _ErrorIconState extends State<ErrorIcon> {
  @override
  Widget build(BuildContext context) {
    Widget out;

    debugPrint("Rebuilding ErrorWidget");
    widget.isError
        ? out = new Icon(
            Icons.error,
            color: Color(Colors.red.value),
          )
        : out = new Icon(null);

    return out;
  }
}

Please note that this code can be improved so i let you play with it :)

EDIT Cleaner code, i'm having fun with this so just a little bit of refactor:

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  ErrorIcon _errorWidget = new ErrorIcon(false);

  set errorWidget(ErrorIcon value) {
    setState(() {
      _errorWidget = value;
    });
  }

  @override
  Widget build(BuildContext context) {
    debugPrint("Rebuilding main widget");

    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Padding(
          //Add padding around textfield
          padding: EdgeInsets.symmetric(horizontal: 25.0),
          child: TextField(
            onChanged: (text) {
              // DEFINE YOUR RULES HERE
              text.contains("1")
                  ? errorWidget = new ErrorIcon(true)
                  : errorWidget = new ErrorIcon(false);
            },
            decoration: InputDecoration(
              hintText: "Enter Username",
              icon: _errorWidget,
            ),
          ),
        ),
      ),
    );
  }
}

class ErrorIcon extends StatelessWidget {
  bool _isError;

  ErrorIcon(this._isError);

  bool get isError => _isError;

  @override
  Widget build(BuildContext context) {
    Widget out;

    debugPrint("Rebuilding ErrorWidget");
    isError
        ? out = new Icon(
            Icons.error,
            color: Color(Colors.red.value),
          )
        : out = new Icon(null);

    return out;
  }
}