Cannot pass variable value from one stateless Widget to another in Flutter

Question

Thank you for your answers in front. I'm trying to pass the "username, email, password" from the TextField widget in GetTextField StatelessWidget to the print function in the GestureDetector widget in GetSignup StatelessWidget. I tried two ways but both "user name: null, user email: null, user password: null" messages appears after filling the fields and pressing the button. What could be possibly wrong?

Method 1:

class SignupScreen extends StatefulWidget {
  static const id = "signup_screen";
  @override
  _SignupScreenState createState() => _SignupScreenState();
}

class _SignupScreenState extends State<SignupScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomPaint(
        painter: BackgroundSignup(),
        child: Stack(
          children: <Widget>[
            Padding(
              padding: EdgeInsets.symmetric(
                horizontal: 35,
              ),
              child: Column(
                children: <Widget>[
                  GetHeader(),
                  GetTextField(),
                  GetSignup(),
                  GetButtonRow(),
                ],
              ),
            ),
            GetBackButton(),
          ],
        ),
      ),
    );
  }
}

class GetTextField extends StatelessWidget {
  String email;
  String password;
  String username;
  @override
  Widget build(BuildContext context) {
    return Expanded(
      flex: 4,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.end,
        children: <Widget>[
          SizedBox(
            height: 15,
          ),
          Directionality(
            textDirection: TextDirection.rtl,
            child: TextField(
              onChanged: (value) {
                username = value;
              },
              textAlign: TextAlign.start,
              decoration: InputDecoration(
                labelText: "الاسم كاملا",
                labelStyle:
                    TextStyle(color: Colors.white, fontWeight: FontWeight.bold),
                enabledBorder: UnderlineInputBorder(
                  borderSide: BorderSide(color: Colors.white),
                ),
              ),
            ),
          ),
          SizedBox(
            height: 15,
          ),
          Directionality(
            textDirection: TextDirection.rtl,
            child: TextField(
              onChanged: (value) {
                email = value;
              },
              textAlign: TextAlign.start,
              decoration: InputDecoration(
                labelText: "الإيميل",
                labelStyle:
                    TextStyle(color: Colors.white, fontWeight: FontWeight.bold),
                enabledBorder: UnderlineInputBorder(
                  borderSide: BorderSide(color: Colors.white),
                ),
              ),
            ),
          ),
          SizedBox(
            height: 15,
          ),
          Directionality(
            textDirection: TextDirection.rtl,
            child: TextField(
              onChanged: (value) {
                password = value;
              },
              obscureText: true,
              textAlign: TextAlign.start,
              decoration: InputDecoration(
                labelText: "كلمة السر",
                labelStyle:
                    TextStyle(color: Colors.white, fontWeight: FontWeight.bold),
                enabledBorder: UnderlineInputBorder(
                  borderSide: BorderSide(color: Colors.white),
                ),
              ),
            ),
          ),
          SizedBox(
            height: 25,
          ),
        ],
      ),
    );
  }
}

class GetSignup extends StatelessWidget {
  GetTextField getTextField = GetTextField();

  @override
  Widget build(BuildContext context) {
    return Expanded(
      flex: 1,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[
          GestureDetector(
            onTap: () {
              print('user name: ${getTextField.username}');
              print('user email: {getTextField.email}');
              print('user password: ${getTextField.password}');
            },
            child: CircleAvatar(
              backgroundColor: Colors.grey.shade800,
              radius: 40,
              child: Icon(
                Icons.arrow_back,
                color: Colors.white,
              ),
            ),
          ),
          Text(
            "انشئ حسابك",
            style: TextStyle(
              fontSize: 25,
              fontWeight: FontWeight.bold,
            ),
          ),
        ],
      ),
    );
  }
}

Method 2:

class SignupScreen extends StatefulWidget {
  static const id = "signup_screen";
  @override
  _SignupScreenState createState() => _SignupScreenState();
}

class _SignupScreenState extends State<SignupScreen> {
  GetTextField getTextField = GetTextField();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomPaint(
        painter: BackgroundSignup(),
        child: Stack(
          children: <Widget>[
            Padding(
              padding: EdgeInsets.symmetric(
                horizontal: 35,
              ),
              child: Column(
                children: <Widget>[
                  GetHeader(),
                  GetTextField(),
                  GetSignup(
                    username: getTextField.username,
                    email: getTextField.email,
                    password: getTextField.password,
                  ),
                  GetButtonRow(),
                ],
              ),
            ),
            GetBackButton(),
          ],
        ),
      ),
    );
  }
}

class GetTextField extends StatelessWidget {
  String email;
  String password;
  String username;
  @override
  Widget build(BuildContext context) {
    return Expanded(
      flex: 4,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.end,
        children: <Widget>[
          SizedBox(
            height: 15,
          ),
          Directionality(
            textDirection: TextDirection.rtl,
            child: TextField(
              onChanged: (value) {
                username = value;
              },
              textAlign: TextAlign.start,
              decoration: InputDecoration(
                labelText: "الاسم كاملا",
                labelStyle:
                    TextStyle(color: Colors.white, fontWeight: FontWeight.bold),
                enabledBorder: UnderlineInputBorder(
                  borderSide: BorderSide(color: Colors.white),
                ),
              ),
            ),
          ),
          SizedBox(
            height: 15,
          ),
          Directionality(
            textDirection: TextDirection.rtl,
            child: TextField(
              onChanged: (value) {
                email = value;
              },
              textAlign: TextAlign.start,
              decoration: InputDecoration(
                labelText: "الإيميل",
                labelStyle:
                    TextStyle(color: Colors.white, fontWeight: FontWeight.bold),
                enabledBorder: UnderlineInputBorder(
                  borderSide: BorderSide(color: Colors.white),
                ),
              ),
            ),
          ),
          SizedBox(
            height: 15,
          ),
          Directionality(
            textDirection: TextDirection.rtl,
            child: TextField(
              onChanged: (value) {
                password = value;
              },
              obscureText: true,
              textAlign: TextAlign.start,
              decoration: InputDecoration(
                labelText: "كلمة السر",
                labelStyle:
                    TextStyle(color: Colors.white, fontWeight: FontWeight.bold),
                enabledBorder: UnderlineInputBorder(
                  borderSide: BorderSide(color: Colors.white),
                ),
              ),
            ),
          ),
          SizedBox(
            height: 25,
          ),
        ],
      ),
    );
  }
}

class GetSignup extends StatelessWidget {
  final username;
  final email;
  final password;
  GetSignup({this.username, this.email, this.password});
  @override
  Widget build(BuildContext context) {
    return Expanded(
      flex: 1,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[
          GestureDetector(
            onTap: () {
              print('user name: $username');
              print('user email: $email');
              print('user password: $password');
            },
            child: CircleAvatar(
              backgroundColor: Colors.grey.shade800,
              radius: 40,
              child: Icon(
                Icons.arrow_back,
                color: Colors.white,
              ),
            ),
          ),
          Text(
            "انشئ حسابك",
            style: TextStyle(
              fontSize: 25,
              fontWeight: FontWeight.bold,
            ),
          ),
        ],
      ),
    );
  }
}

Answer 1

Update your GetTextField class like this:

class GetTextField extends StatelessWidget {
  Function(String) onEmail;
  Function(String) onPassword;
  Function(String) onUsername;
  GetTextField({Key key, this.onEmail,this.onPassword,this.onUsername}) : super(key: key);
   @override
  Widget build(BuildContext context) {
    return Expanded(
      flex: 4,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.end,
        children: <Widget>[
          SizedBox(
            height: 15,
          ),
          Directionality(
            textDirection: TextDirection.rtl,
            child: TextField(
              onChanged: onUsername,
              textAlign: TextAlign.start,
              decoration: InputDecoration(
                labelText: "الاسم كاملا",
                labelStyle:
                    TextStyle(color: Colors.white, fontWeight: FontWeight.bold),
                enabledBorder: UnderlineInputBorder(
                  borderSide: BorderSide(color: Colors.white),
                ),
              ),
            ),
          ),
          SizedBox(
            height: 15,
          ),
          Directionality(
            textDirection: TextDirection.rtl,
            child: TextField(
              onChanged: onEmail
              textAlign: TextAlign.start,
              decoration: InputDecoration(
                labelText: "الإيميل",
                labelStyle:
                    TextStyle(color: Colors.white, fontWeight: FontWeight.bold),
                enabledBorder: UnderlineInputBorder(
                  borderSide: BorderSide(color: Colors.white),
                ),
              ),
            ),
          ),
          SizedBox(
            height: 15,
          ),
          Directionality(
            textDirection: TextDirection.rtl,
            child: TextField(
              onChanged: onPassword
              obscureText: true,
              textAlign: TextAlign.start,
              decoration: InputDecoration(
                labelText: "كلمة السر",
                labelStyle:
                    TextStyle(color: Colors.white, fontWeight: FontWeight.bold),
                enabledBorder: UnderlineInputBorder(
                  borderSide: BorderSide(color: Colors.white),
                ),
              ),
            ),
          ),
          SizedBox(
            height: 25,
          ),
        ],
      ),
    );
}

Use it in SignupScreen like this:->

class SignupScreen extends StatefulWidget {
  static const id = "signup_screen";
  @override
  _SignupScreenState createState() => _SignupScreenState();
}

class _SignupScreenState extends State<SignupScreen> {
  String email="",username="",password="";
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomPaint(
        painter: BackgroundSignup(),
        child: Stack(
          children: <Widget>[
            Padding(
              padding: EdgeInsets.symmetric(
                horizontal: 35,
              ),
              child: Column(
                children: <Widget>[
                  GetHeader(),
                  GetTextField(
                     onEmail(email){
                       setState(() {
                          email = email;
                        });
                     },
                     onUsername(username){
                       setState(() {
                          username = username;
                        });
                     }
                     onPassword(pass){
                       setState(() {
                          password = pass;
                        });
                     }
                  ),
                  GetSignup(
                    username: username,
                    email: email,
                    password: password,
                  ),
                  GetButtonRow(),
                ],
              ),
            ),
            GetBackButton(),
          ],
        ),
      ),
    );
  }
}

Answer 2

First: I tried to implement Shikhar Singh instruction but I get the same output "username= null, email = null, password = null" here is the code after modification"

class SignupScreen extends StatefulWidget {
  static const id = "signup_screen";
  @override
  _SignupScreenState createState() => _SignupScreenState();
}

class _SignupScreenState extends State<SignupScreen> {
  String email;
  String username;
  String password;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomPaint(
        painter: BackgroundSignup(),
        child: Stack(
          children: <Widget>[
            Padding(
              padding: EdgeInsets.symmetric(
                horizontal: 35,
              ),
              child: Column(
                children: <Widget>[
                  GetHeader(),
                  GetTextField(
                    onEmail: (value) {
                      setState(() {
                        value = email;
                      });
                    },
                    onUsername: (value) {
                      setState(() {
                        value = username;
                      });
                    },
                    onPassword: (value) {
                      setState(() {
                        value = password;
                      });
                    },
                  ),
                  GetSignup(
                    username: username,
                    email: email,
                    password: password,
                  ),
                  GetButtonRow(),
                ],
              ),
            ),
            GetBackButton(),
          ],
        ),
      ),
    );
  }
}

class GetTextField extends StatelessWidget {
  Function(String) onEmail;
  Function(String) onPassword;
  Function(String) onUsername;
  GetTextField({Key key, this.onEmail, this.onPassword, this.onUsername})
      : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Expanded(
      flex: 4,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.end,
        children: <Widget>[
          SizedBox(
            height: 15,
          ),
          Directionality(
            textDirection: TextDirection.rtl,
            child: TextField(
              onChanged: onUsername,
              textAlign: TextAlign.start,
              decoration: InputDecoration(
                labelText: "الاسم كاملا",
                labelStyle:
                    TextStyle(color: Colors.white, fontWeight: FontWeight.bold),
                enabledBorder: UnderlineInputBorder(
                  borderSide: BorderSide(color: Colors.white),
                ),
              ),
            ),
          ),
          SizedBox(
            height: 15,
          ),
          Directionality(
            textDirection: TextDirection.rtl,
            child: TextField(
              onChanged: onEmail,
              textAlign: TextAlign.start,
              decoration: InputDecoration(
                labelText: "الإيميل",
                labelStyle:
                    TextStyle(color: Colors.white, fontWeight: FontWeight.bold),
                enabledBorder: UnderlineInputBorder(
                  borderSide: BorderSide(color: Colors.white),
                ),
              ),
            ),
          ),
          SizedBox(
            height: 15,
          ),
          Directionality(
            textDirection: TextDirection.rtl,
            child: TextField(
              onChanged: onPassword,
              obscureText: true,
              textAlign: TextAlign.start,
              decoration: InputDecoration(
                labelText: "كلمة السر",
                labelStyle:
                    TextStyle(color: Colors.white, fontWeight: FontWeight.bold),
                enabledBorder: UnderlineInputBorder(
                  borderSide: BorderSide(color: Colors.white),
                ),
              ),
            ),
          ),
          SizedBox(
            height: 25,
          ),
        ],
      ),
    );
  }
}

class GetSignup extends StatelessWidget {
  final username;
  final email;
  final password;
  GetSignup({Key key, this.username, this.email, this.password})
      : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Expanded(
      flex: 1,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[
          GestureDetector(
            onTap: () {
              //TODO: fill circle avatar
              print('user name: $username');
              print('user email: $email');
              print('user password: $password');
            },
            child: CircleAvatar(
              backgroundColor: Colors.grey.shade800,
              radius: 40,
              child: Icon(
                Icons.arrow_back,
                color: Colors.white,
              ),
            ),
          ),
          Text(
            "انشئ حسابك",
            style: TextStyle(
              fontSize: 25,
              fontWeight: FontWeight.bold,
            ),
          ),
        ],
      ),
    );
  }
}