Flutter: How do you get rid of a widget when you leave the screen or press back?

Question

I'm creating a simple chatting app and I've added some authentication validation. During login or registration, when I get an error message from firebase, a widget pops up displaying the error. How do I make sure this widget goes away when I leave the screen? Right now if I press back it goes to the welcome screen and when I go back to the login screen, the error is still there. Here's the widget-

class ErrorMessage extends StatefulWidget {
  @override
  _ErrorMessageState createState() => _ErrorMessageState();
}

class _ErrorMessageState extends State<ErrorMessage> {
  @override
  Widget build(BuildContext context) {
    if (error != null) {
      return Container(
        width: double.infinity,
        color: Colors.amberAccent,
        padding: EdgeInsets.all(8),
        child: Row(
          children: <Widget>[
            Padding(
              padding: EdgeInsets.only(right: 8),
              child: Icon(Icons.error_outline),
            ),
            Expanded(
              child: Text(error, maxLines: 3),
            ),
            Padding(
              padding: EdgeInsets.only(left: 8),
              child: IconButton(
                icon: Icon(Icons.close),
                onPressed: () {
                  setState(() {
                    error = null;
                  });
                },
              ),
            ),
          ],
        ),
      );
    }
    return SizedBox(
      height: 0,
      width: 0,
    );
  }
}

Answer 1

Instead of using a custom made widget just for displaying error/warning messages, I suggest using something like awesome_dialog which already has autoHide capability.

For example, this one will close itself after 4secs:

AwesomeDialog(
    context: context,
    animType: AnimType.LEFTSLIDE,
    dismissOnTouchOutside: true,
    dismissOnBackKeyPress: true,
    headerAnimationLoop: true,
    dialogType: DialogType.WARNING,
    autoHide: Duration(seconds: 4),  
    body: Container(
      child: Center(
         child: Text(errorMessage, maxLines: 3),
      ),
    )