Passing Data Trough Widgets in Flutter

Question

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.

Answer 1

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'),
          ),
        ],
      ),
    )


    );
  }
}