flutterdartwidgetpass-data

Passing Data Trough Widgets in Flutter


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.


Solution

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