flutter - 如何创建自定义 TextField 类？

Question

我正在尝试创建一个自定义文本字段类，这样我就可以通过仅在一个地方进行编辑来轻松更改它的外观。目前我面临着如何使切换密码可见性的问题。

这是我的自定义文本字段类:

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

我是这样调用它的:

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

这就是我的密码文本框的样子。我没有使用客户文本字段类，因为我不知道如何在类中实现切换密码可见性:

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

如何将密码文本字段功能合并到自定义类中，以便我可以将其用于密码或电子邮件文本字段？

Answer 1

这是来自 instaflutter 的示例

class CustomTextField extends StatefulWidget {
  final String hint;
  final TextEditingController controller;
  final Color baseColor;
  final Color borderColor;
  final Color errorColor;
  final TextInputType inputType;
  final bool obscureText;
  final Function validator;
  final Function onChanged;

  CustomTextField(
      {this.hint,
      this.controller,
      this.onChanged,
      this.baseColor,
      this.borderColor,
      this.errorColor,
      this.inputType = TextInputType.text,
      this.obscureText = false,
      this.validator});

  _CustomTextFieldState createState() => _CustomTextFieldState();
}

class _CustomTextFieldState extends State<CustomTextField> {
  Color currentColor;

  @override
  void initState() {
    super.initState();
    currentColor = widget.borderColor;
  }

  @override
  Widget build(BuildContext context) {
    return Card(
      elevation: 0.0,
      color: Colors.white,
      shape: RoundedRectangleBorder(
        side: BorderSide(color: currentColor, width: 2.0),
        borderRadius: BorderRadius.circular(20.0),
      ),
      child: Padding(
        padding: EdgeInsets.symmetric(horizontal: 10.0),
        child: TextField(
          obscureText: widget.obscureText,
          onChanged: (text) {
            if (widget.onChanged != null) {
              widget.onChanged(text);
            }
            setState(() {
              if (!widget.validator(text) || text.length == 0) {
                currentColor = widget.errorColor;
              } else {
                currentColor = widget.baseColor;
              }
            });
          }, 
          //keyboardType: widget.inputType,
          controller: widget.controller,
          decoration: InputDecoration(
            hintStyle: TextStyle(
              color: widget.baseColor,
              fontFamily: "OpenSans",
              fontWeight: FontWeight.w300,
            ),
            border: InputBorder.none,
            hintText: widget.hint,
          ),
        ),
      ),
    );
  }
}

然后你就可以创建你的小部件了

 _emailField = new CustomTextField(
      baseColor: Colors.grey,
      borderColor: Colors.grey[400],
      errorColor: Colors.red,
      controller: _email,
      hint: "E-mail Adress",
      inputType: TextInputType.emailAddress,
      validator: Validator.validateEmail,
    );
    _passwordField = CustomTextField(
      baseColor: Colors.grey,
      borderColor: Colors.grey[400],
      errorColor: Colors.red,
      controller: _password,
      obscureText: true,
      hint: "Password",
      validator: Validator.validatePassword,
);