Adding a row with FirebaseAuth onError on flutter project

Issue

I’m trying to make a row appear after the onError event activates, my idea is to do something like what’s in the code, but I can’t figure that out

signInAndUpButton(context, true, () {
            FirebaseAuth.instance
                .signInWithEmailAndPassword(
                    email: _emailTextController.text,
                    password: _passwordTextController.text)
                .then((value) {
              print("Signed in");
              Navigator.pushNamed(context, "/Profile");
            }).onError((error, stackTrace) {
              print("incorrect Password");
              incorrectPassword(); //this method would add the row to the app's screen 
            });
          })
          
          
Row incorrectPassword() {
    return new Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Text("E-mail ou senha incorretos, ",
            style: TextStyle(color: hexStringToColor("#2c3333"))),
        GestureDetector(
            onTap: () {
              Navigator.push(context,
                  MaterialPageRoute(builder: (context) => ForgotPassword()));
            },
            child: Text(
              "Esqueceu sua senha?",
              style: TextStyle(
                  decoration: TextDecoration.underline,
                  color: hexStringToColor("#252B2B"),
                  fontWeight: FontWeight.bold),
            ))
      ],
    );
  }          

Solution

You can use a variable for the error widget and setState to change the state of page, Here is a sample code you can use this in your project according to your scenario.

import 'package:flutter/material.dart';

class SignInPage extends StatefulWidget {
  const SignInPage({Key? key}) : super(key: key);

  @override
  State<SignInPage> createState() => _SignInPageState();
}

class _SignInPageState extends State<SignInPage> {
  Widget _errorWidget = SizedBox();

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        /// Your UI
        ElevatedButton(
          onPressed: signIn,
          child: const Text('SignIn/SignUp'),
        ),

        /// Error Widget
        _errorWidget,
      ],
    );
  }

  void _signIn() async {
    FirebaseAuth.instance
        .signInWithEmailAndPassword(
            email: _emailTextController.text,
            password: _passwordTextController.text)
        .then((value) {
      print("Signed in");
      Navigator.pushNamed(context, "/Profile");
    }).onError((error, stackTrace) {
      print("incorrect Password");
      _errorWidget = incorrectPassword();
      setState(() {});
      //this method would add the row to the app's screen
    });
  }

  Row incorrectPassword() {
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Text(
          "E-mail ou senha incorretos, ",
          style: TextStyle(
              color: hexStringToColor("#2c3333"),
              ),
        ),
        GestureDetector(
          onTap: () {
            Navigator.push(context,
                MaterialPageRoute(builder: (context) => ForgotPassword()));
          },
          child: Text(
            "Esqueceu sua senha?",
            style: TextStyle(
              decoration: TextDecoration.underline,
              color: hexStringToColor("#252B2B"),
              fontWeight: FontWeight.bold,
            ),
          ),
        )
      ],
    );
  }
}

Answered By – Sparko Sol

Answer Checked By – Robin (FlutterFixes Admin)