How can I put the controllers for the email and password?

I'm new to flutter, I'm trying to send the email and the password to the database, but I don't know how to put multiple controllers in one TextFormField. Could you please help me, guys? Thanks

This is the code I'm working on:

  TextEditingController email = TextEditingController();
  TextEditingController pass = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        buildInputForm('Email', false),
        buildInputForm('Password', true),
      ],
    );
  }

  Padding buildInputForm(String label, bool pass) {
    return Padding(
      padding: EdgeInsets.symmetric(vertical: 5),
      child: TextFormField(
        //controller: email,pass,
        obscureText: pass ? _isObscure : false,
        decoration: InputDecoration(
            labelText: label,
            labelStyle: TextStyle(
              color: kTextFieldColor,
            ),
            focusedBorder: UnderlineInputBorder(
              borderSide: BorderSide(color: kPrimaryColor),
            ),
            suffixIcon: pass
                ? IconButton(
                    onPressed: () {
                      setState(() {
                        _isObscure = !_isObscure;
                      });
                    },
                    icon: _isObscure
                        ? Icon(
                            Icons.visibility_off,
                            color: kTextFieldColor,
                          )
                        : Icon(
                            Icons.visibility,
                            color: kPrimaryColor,
                          ),
                  )
                : null),
      ),
    );
  }
}

enter image description here

2 answers

  • answered 2021-10-12 15:56 Mohamed Ashraf

    TextEditingController email = TextEditingController();
    TextEditingController pass = TextEditingController();
    

    Change to

    TextEditingController emailController = TextEditingController();
    TextEditingController passController = TextEditingController();
        
    

    Inside your TextFormField set controller: to be

    controller: pass ? passController : emailController 
    

    Hope i managed to help you

  • answered 2021-10-12 16:09 Krish Bhanushali

    An ideal way is to create a separate custom textfield widget instead of a method like this:

    class BuildInputForm extends StatelessWidget {
      const BuildInputForm({
        Key? key,
        required TextEditingController textEditingController, required this.label, required this.pass, required this.onpressed,
      
      })  : _textEditingController = textEditingController,
            super(key: key);
    
      final TextEditingController _textEditingController;
      final String label;
      final bool pass;
      final Function() onpressed;
     
    
      @override
      Widget build(BuildContext context) {
        return Padding(
          padding: EdgeInsets.symmetric(vertical: 5),
          child: TextFormField(
            controller: _textEditingController,
            obscureText: pass ? _isObscure : false,
            decoration: InputDecoration(
                labelText: label,
                labelStyle: TextStyle(
                  color: kTextFieldColor,
                ),
                focusedBorder: UnderlineInputBorder(
                  borderSide: BorderSide(color: kPrimaryColor),
                ),
                suffixIcon: pass
                    ? IconButton(
                        onPressed: onpressed
                        ,
                        icon: _isObscure
                            ? Icon(
                                Icons.visibility_off,
                                color: kTextFieldColor,
                              )
                            : Icon(
                                Icons.visibility,
                                color: kPrimaryColor,
                              ),
                      )
                    : null),
          ),
        );
      }
    }
    

    Now you can use it in your column like this :

        Widget build(BuildContext context) {
            return Column(
              children: [
               BuildInputForm(textEditingController:email, pass:false, label: 'email', onpressed: () {}),
              BuildInputForm(textEditingController:pass, pass:true, label: 'Password', onpressed: () {
                          setState(() {
                            _isObscure = !_isObscure;
                          });
                        }),
              ],
            );
          }
    

    There are ways you can optimize but this is very customizable way as you can reuse this widget anywhere you want. To use this you need to treat BuildInputForm as a separate widget like you do while creating screens.

How many English words
do you know?
Test your English vocabulary size, and measure
how many words do you know
Online Test
Powered by Examplum