Adding multiple controllers for same widget-CodePudding

so I'm building an app on flutter and I guess I made a mistake after some heavy work(all inputs are the same widget). I have multiple inputs (Form) and I create this widget which contains a TextField with my custom design. Is it possible to add controller (ie: in mail input I need to check if entered string contains "@" . in name input it should be from A-Z a-z etc .. i guess you got my point).

This is my widget :

Widget makeInput({label, obscureText = false}) {
return Column(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: <Widget>[
    Text(
      label,
      style: TextStyle(
          fontSize: 15, fontWeight: FontWeight.w400, color: Colors.white),
    ),
    SizedBox(
      height: 5,
    ),
    TextField(
      obscureText: obscureText,
      style: TextStyle(color: Colors.white),
      decoration: InputDecoration(
          contentPadding: EdgeInsets.symmetric(vertical: 0, horizontal: 12),
          enabledBorder: OutlineInputBorder(
              borderSide: BorderSide(color: Colors.purple[800])),
          border: OutlineInputBorder(
              borderSide: BorderSide(color: Colors.purple[800])),
          focusedBorder: OutlineInputBorder(
            borderSide: BorderSide(color: Colors.purple[800], width: 2.0),
          )),
    ),
    SizedBox(
      height: 25,
    ),
  ],
);
}

CodePudding user response：

So, first I would start by defining the controllers like this

final _emailController = TextEditingController();
final _usernameController = TextEditingController();

then I would modify the widget to this (just changed parameters and inside the TextFormField).

Widget MakeInput(label, obscureText, validator, controller) {
return Column(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: <Widget>[
    Text(
      label,
      style: TextStyle(
          fontSize: 15, fontWeight: FontWeight.w400, color: Colors.white),
    ),
    SizedBox(
      height: 5,
    ),
    TextFormField(
      obscureText: obscureText,
      controller: controller,
      style: TextStyle(color: Colors.white),
      decoration: InputDecoration(
          contentPadding: EdgeInsets.symmetric(vertical: 0, horizontal: 12),
          enabledBorder: OutlineInputBorder(
              borderSide: BorderSide(color: Colors.purple[800])
          ),
          border: OutlineInputBorder(
              borderSide: BorderSide(color: Colors.purple[800])
          ),
          focusedBorder: OutlineInputBorder(
            borderSide: BorderSide(color: Colors.purple[800], width: 2.0),
          )
      ),
      validator: validator
    ),
    SizedBox(
      height: 25,
    ),
  ],
);
}

I changed the obscureText parameter, because it will be easy for you passing to that function and not seting it value fixed to false(in case you have or want to add a password field to the form). I also changed your textField widget to TextFormField so u can use the validator functions passed to the widget parameters to validate the fields. In case u got stuck using them check the documentation here

So here is the function I think will help you validating the email field.

String? emailInputValidator(value) {
   if (value!.isEmpty || !RegExp(r"^[a-zA-Z0-9.a-zA-Z0-9.!#$%&'* -/=?^_`{|}~] @[a-zA-Z0-9] \.[a-zA-Z] ")
                                                .hasMatch(value)) return 'Enter a valid email';
}

I'm not a big fan of using Regex to validate username, so I prefer using this validation from the documentation (just a suggestion, u can look for regex if you really need it).

String? nameInputValidator(value){
if (value == null || value.isEmpty) {
      return 'Please enter some text';
    }
    return null;
}

so inside your Form, u can call your widget like this:

MakeInput("Enter your e-mail", false, emailInputValidator, _emailController),
SizedBox(height:10),
MakeInput("Enter your name", false, nameInputValidator, _usernameController)