How To Create Custom TextField Class?

Question

I am trying to create a custom textfield class so that i can easily change how it looks by only editing in one place. Currently i am facing a problem on how to make a toggle password visibility.

This is what my custom textfield class:

class CustomTextFieldOutline extends StatelessWidget {
  CustomTextFieldOutline(
      {this.label,
        this.controller,
        this.isValid,
        this.invalidMsg});

  final String label;
  final TextEditingController controller;
  final bool isValid;
  final String invalidMsg;

  @override
  Widget build(BuildContext context) {
    return TextField(
      decoration: InputDecoration(
          labelText: label,
          errorText: isValid ? null : invalidMsg,
          errorStyle: TextStyle(color: constant.colorWhite),
          labelStyle: TextStyle(color: constant.colorWhite),
          errorBorder: UnderlineInputBorder(
            borderSide: BorderSide(color: constant.colorWhite),
          ),
          focusedErrorBorder: UnderlineInputBorder(
            borderSide: BorderSide(color: constant.colorWhite),
          ),
          enabledBorder: UnderlineInputBorder(
            borderSide: BorderSide(color: constant.colorWhite),
          ),
          focusedBorder: UnderlineInputBorder(
            borderSide: BorderSide(color: constant.colorWhite),
          )),
      style: TextStyle(color: constant.colorWhite),
      controller: controller,
    );
  }
}

This is how i call it:

final _resetPasswordView = Container(
  child: AnimatedOpacity(
    opacity: _resetPasswordVisibility ? 1.0 : 0.0,
    duration: Duration(milliseconds: 300),
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: <Widget>[
        CustomTextFieldOutline(
          label: constant.email,
          controller: _emailSignInController,
          isValid: _isEmailValid,
          invalidMsg: _emailValidMsg,
        )
      ],
    ),
  ),
)

This how my password textfield looks like. I am not using custome textfield class because i dont know how can i implement toggle password visibility in class:

TextField(
  decoration: InputDecoration(
      labelText: constant.password,
      suffixIcon: GestureDetector(
        onTap: () {
          _togglePasswordVisibility();
        },
        child: Icon(
          _isHidePassword ? Icons.visibility_off : Icons.visibility,
          color: constant.colorWhite,
        ),
      ),
      errorText: _isPasswordValid ? null : _passwordValidMsg,
      errorStyle: TextStyle(color: constant.colorWhite),
      labelStyle: TextStyle(color: constant.colorWhite),
      errorBorder: UnderlineInputBorder(
        borderSide: BorderSide(color: constant.colorWhite),
      ),
      focusedErrorBorder: UnderlineInputBorder(
        borderSide: BorderSide(color: constant.colorWhite),
      ),
      enabledBorder: UnderlineInputBorder(
        borderSide: BorderSide(color: constant.colorWhite),
      ),
      focusedBorder: UnderlineInputBorder(
        borderSide: BorderSide(color: constant.colorWhite),
      )),
  style: TextStyle(color: constant.colorWhite),
  obscureText: _isHidePassword,
  controller: _passwordSignUpController,
)

How can i incorporate the password textfield functionality in the custom class so that i can use it for password or email textfield?

Answer 1

i do like this

Widget customTextField(TextInputType textInputType) {
    RegExp pattern = RegExp(
        r"^[a-zA-Z0-9.a-zA-Z0-9.!#$%&'*+-/=?^_`{|}~]+@[a-zA-Z0-9]+\.[a-zA-Z]+");
    TextEditingController _textEditingController = TextEditingController();

    if (textInputType == TextInputType.visiblePassword) {
      return TextField(
        controller: _textEditingController,
        decoration: InputDecoration(hintText: 'Password'),
        keyboardType: TextInputType.visiblePassword,
        obscureText: true,
      );
    } else {
      return TextField(
        controller: _textEditingController,
        decoration: InputDecoration(hintText: 'Email'),
        keyboardType: TextInputType.emailAddress,
        inputFormatters: [BlacklistingTextInputFormatter(pattern)],
      );
    }
  }

@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: ListView(
          shrinkWrap: true,
          children: <Widget>[
            customTextField(TextInputType.visiblePassword),
            customTextField(TextInputType.emailAddress),
          ],
        ),
      ),
    );
  }

idk how to make RegExp for email, but the results will be like this: