I want to transfer passcontroller data from password widget to passwordrep widget to compare them in the passwordrep Widget but it doesn't transfer the text that I input.I don't know if it's the problem because of the variables or the Widget type. Pls help.
password Widget:
TextFormField passwordrep(TextEditingController passrepcontroller, bool isObscure) {
TextEditingController passcontroller = new TextEditingController();
password(passcontroller, true);
return TextFormField(
controller: passrepcontroller,
obscureText: isObscure,
onSaved: (value) {
passrepcontroller.text = value!;
},
validator: (value) {
RegExp regex = RegExp(r'^.{8,}$');
if (value!.isEmpty) {
return "Please repeat the password";
}
if (!regex.hasMatch(value) || value != passcontroller.text) {
return 'Passwords don\'t match';
}
return null;
},
decoration: const InputDecoration(
fillColor: Colors.white70,
filled: true,
border: OutlineInputBorder(
borderRadius: BorderRadius.all(
Radius.circular(15.0),
),
borderSide: BorderSide(color: Colors.black),
),
contentPadding: EdgeInsets.symmetric(vertical: 15.0),
hintText: "Repeat Password",
prefixIcon: Icon(
Icons.lock_outline,
color: Colors.black,
),
));
}
passwordrep Widget:
TextFormField passwordrep(TextEditingController passrepcontroller, bool isObscure) {
TextEditingController passcontroller = new TextEditingController();
password(passcontroller, true);
return TextFormField(
controller: passrepcontroller,
obscureText: isObscure,
onSaved: (value) {
passrepcontroller.text = value!;
},
validator: (value) {
RegExp regex = RegExp(r'^.{8,}$');
if (value!.isEmpty) {
return "Please repeat the password";
}
if (!regex.hasMatch(value) || value != passcontroller.text) {
return 'Passwords don\'t match';
}
return null;
},
decoration: const InputDecoration(
fillColor: Colors.white70,
filled: true,
border: OutlineInputBorder(
borderRadius: BorderRadius.all(
Radius.circular(15.0),
),
borderSide: BorderSide(color: Colors.black),
),
contentPadding: EdgeInsets.symmetric(vertical: 15.0),
hintText: "Repeat Password",
prefixIcon: Icon(
Icons.lock_outline,
color: Colors.black,
),
));
}
I've tried converting the widgets to statefull widgets but it also doesn't work.
make 2 text controllers for password and repeatPassword
final _passwordController = TextEditingController();
final _repeatPasswordContrller = TextEditingController();
pass each TextEditingController
to the desired TextFormField
TextFormField(
controller: _passwordController,
use the text
property _passwordController.text
which contains the text that the user has entered
complete example
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key});
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
final _formKey = GlobalKey<FormState>();
final _passwordController = TextEditingController();
final _repeatPasswordContrller = TextEditingController();
@override
Widget build(BuildContext context) {
return Scaffold(
body: Form(
key: _formKey,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
TextFormField(
controller: _passwordController,
validator: (value) {
if (value == null || value.isEmpty) {
return 'Please enter password';
}
return null;
},
), TextFormField(
controller: _repeatPasswordContrller,
validator: (value) {
if (value == null || value.isEmpty) {
return 'Please repeat password';
}
return null;
},
),
const SizedBox(height: 25),
ElevatedButton(
onPressed: () {
if (_formKey.currentState!.validate()) {
//compare text here
if(_passwordController.text == _repeatPasswordContrller.text){
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(content: Text('the same')),
);
}else{
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(content: Text('different strings')),
);
}
}
},
child: const Text('Compare passwords'),
),
],
),
)
);
}
}