user13508885
Reputation: 1
Cannot pass variable value from one stateless Widget to another in Flutter
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,
),
),
],
),
);
}
}
Upvotes: 0
Views: 238
Answers (2)
user13508885
Reputation: 1
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,
),
),
],
),
);
}
}
Upvotes: 0
Shikhar Singh
Reputation: 112
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(),
],
),
),
);
}
}
Upvotes: 1
Related Questions
- I need to know how i can call a variable in from a stateful widget to a stateless one
- How to pass data to stateless widget calling from another stateless widget?
- Passing variable value from state to another widget
- Have no access to a variable in Flutter Stateful Widget
- Flutter : how to pass value to Stateful widget?
- Flutter - Setting value of a variable of one stateful widget from another stateful widget
- Variable returns null when called from a Stateless to Stateful Widget?
- Flutter passing data up through stateless widget
- Flutter: how to passing variable from statefulwidget to other statefulwidget
- Flutter: How to pass variables from StatelessWidget to StatefulWidget